hexo的next主题的最新优化_3

前言

在hexo的next主题的最新优化_1中和hexo的next主题的最新优化_2介绍了一些简单点的操作，希望对你们有所帮助，如果实在看不懂，可以扫一扫文章最后的QQ群二维码，有什么问题可以私聊我呦！好的废话就不多说了。我们开始吧！

主题优化_3

设置动态背景

更改的位置：

提示：这里的设置和老版的next主题有些不同。

next主题常见动态背景样式有canvas_nest、three_waves、canvas_lines、canvas_sphere等

• canvas_nest如下图所示

  
  
  1.png

• three_waves、canvas_lines、canvas_sphere这三种效果可以自己尝试

开启canvas_nest更改的内容：

• 第一步：打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

• 第二步：下载安装 canvas_nest module 执行 这是在主题文件夹下进行的操作

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

提示:执行完命令后会在 /themes/next/source/lib查看会看到canvas_nest文件夹。

• 第三步：在/themes/next/_config.yml设置

1.jpg

开启three_waves、canvas_lines、canvas_sphere更改的内容：

• 第一步：打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

• 第二步：下载安装 canvas_nest module 执行 这是在主题文件夹下进行的操作

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

提示:执行完命令后会在 /themes/next/source/lib查看会看到three文件夹。

• 第三步：在/themes/next/_config.yml设置

2.png

---

添加进度条

更改的位置：

在next主题中提供了很多种加载方式，这就根据个人喜欢了，以下图效果为例

3.png

更改的内容：

第一步：打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

第二步：下载安装 Progress module 执行

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

第三步：在/themes/next/_config.yml设置

4.png

设置左右上角的fork github

更改的位置：


更改的内容：

提示：左上角样式选择点这里,右上角样式选择点这里

第一步：找到喜欢的样式复制代码

9.png

第二步：修改文件

7.png

第三步：更改粘贴代码的内容：

8.png

---

搜索功能

更改的位置：

10.png

更改的内容：

1，安装hexo-generator-searchdb，在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

2，网站配置文件config

11.png

search:
 path: search.xml
 field: post
 format: html
 limit: 10000

3，主题配置文件config：

12.png

# Local search
local_search:
 enable: true

---

增加点击爆炸效果

更改的位置：

13.png

更改的内容：

fireworks.js文件链接：

链接：https://pan.baidu.com/s/1wcbQpO0QSKV35k3vCVFvYg ​ 提取码：pry5

1，将上方的文件复制到 ----》themes\next\source\js路径下替换原来的文件

2，修改如下图片路径下的文件添加如下内容 标签最后添加

14.png

 {% if theme.fireworks %}
 
 
 
 {% endif %}

3，修改主题配置文件

15.png

更多优化点这里