NexT(v7.0+)美化(一)

本文章基于 Next v7.7 版本编辑, 自定义文件与主题文件分离是个好的实践,这样可以在不修改任何主题原始代码的情况下加入自定义内容。所有 CSS 修改都使用 custom_file_path

顶部阅读进度条

在博文页面顶部添加 Reading Progress 进度条,表示阅读进度,Next 主题已内置配置文件

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块到 source/lib 文件夹

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml,搜索 reading_progress 定位到�-corner-indicator

  • pace-theme-fill-left
  • pace-theme-flash
  • pace-theme-loading-bar
  • pace-theme-mac-osx
  • pace-theme-minimal

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块到 source/lib 文件夹

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml,搜索 pace 定位到如下代码

1
2
3
4
5
6
7
8
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-flash

pace 设置为 true
pace_theme 设置为上面 Themes list 中的一种,主题样式可以在 PACE 查看

升级

切换到安装目录

1
cd themes/next/source/lib/pace

更新

1
git pull

动态背景

Next 主题默认提供了三种动态背景

Canvas-nest此功能已从 V7.7.2 中移除

我选用的是这个背景,比较好玩

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # 是否在手机上显示
color: "255,51,51" # RGB颜色设置
opacity: 0.5 # 线条透明度
zIndex: -1 # 显示级别
count: 160 # 线条的数量,越多越卡

如果想使用 CDN 加速的话需要设置

1
2
3
4
vendors:
...
canvas_nest: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest.min.js
canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest-nomobile.min.js

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-nest

更新

1
git pull

JavaScript 3D library

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码,有三种风格可选,将一种设置为 true 即可

1
2
3
4
5
6
7
8
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

升级

切换到安装目录

1
cd themes/next/source/lib/three

更新

1
git pull

Canvas-ribbon

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码

1
2
3
4
5
6
7
8
9
10
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: true # 是否开启
size: 300 # 宽度
alpha: 0.6 # 透明度
zIndex: -1 # 显示级别

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-ribbon

更新

1
git pull

网站标题崩溃欺骗

在网页标题中添加崩溃欺骗效果,离开页面后标题会更改,切换回来后会恢复正常,用来忽悠人效果不错

安装

1
npm install theme-next/hexo-next-title

设置

在站点或主题的配置文件 _config.yml 下添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Change title and favicon when window is hidden and visible.
title_change:
enable: false

# Enabling this feature on non-desktop devices may not be a good choice, but it depends on you.
onmobile: false

# Enable random title or not.
# Basically `random: true` means you have several titles to display and `random: false` means you have only one title to display.
# When `random: true`, YOU MUST FOLLOW the format which has been commented in two title options below.
# When `random: false`, please fill in the same line of the title option, like `title: one title`.
random: false

# Restore the original title after the specified time in milliseconds.
timeout: 2019

# Options when window is hidden.
hidden:
favicon: /images/favicon-32x32-next.png
title:
#- 404
#- φ(* ̄0 ̄)
#- Waiting for you.

# Options when window is visible.
visible:
favicon: /images/favicon-32x32-next.png
title:
#- 200
#- (✿◡‿◡)
#- Welcome back!