前言
在hexo的next主题的最新优化_1中和hexo的next主题的最新优化_2介绍了一些简单点的操作,希望对你们有所帮助,如果实在看不懂,可以扫一扫文章最后的QQ群二维码,有什么问题可以私聊我呦!好的废话就不多说了。我们开始吧!
主题优化_3
设置动态背景
更改的位置:
提示:这里的设置和老版的next主题有些不同。
next主题常见动态背景样式有canvas_nest、three_waves、canvas_lines、canvas_sphere等
- canvas_nest如下图所示
- 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设置
开启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设置
添加进度条
更改的位置:
在next主题中提供了很多种加载方式,这就根据个人喜欢了,以下图效果为例
更改的内容:
第一步:打开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设置
设置左右上角的fork github
更改的位置:
更改的内容:
第一步:找到喜欢的样式复制代码
第二步:修改文件
第三步:更改粘贴代码的内容:
搜索功能
更改的位置:
更改的内容:
1,安装hexo-generator-searchdb,在站点的根目录下执行以下命令:
npm install hexo-generator-searchdb --save
2,网站配置文件config
search:
path: search.xml
field: post
format: html
limit: 10000
3,主题配置文件config:
# Local search
local_search:
enable: true
增加点击爆炸效果
更改的位置:
更改的内容:
fireworks.js文件链接:
链接:https://pan.baidu.com/s/1wcbQpO0QSKV35k3vCVFvYg
提取码:pry5
1,将上方的文件复制到 ----》themes\next\source\js路径下替换原来的文件
2,修改如下图片路径下的文件添加如下内容 <body>
标签最后添加
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>
{% endif %}
3,修改主题配置文件
[更多优化点这里]