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 | # Progress bar in the top during page loading. |
将 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 | # Canvas-nest |
如果想使用 CDN 加速的话需要设置
1 | vendors: |
升级
切换到安装目录
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 | # JavaScript 3D library. |
升级
切换到安装目录
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 | # Canvas-ribbon |
升级
切换到安装目录
1 | cd themes/next/source/lib/canvas-ribbon |
更新
1 | git pull |
网站标题崩溃欺骗
在网页标题中添加崩溃欺骗效果,离开页面后标题会更改,切换回来后会恢复正常,用来忽悠人效果不错
安装
1 | npm install theme-next/hexo-next-title |
设置
在站点或主题的配置文件 _config.yml
下添加。
1 | # Change title and favicon when window is hidden and visible. |