hexo的next主题的最新优化_3

匿名 (未验证) 提交于 2019-12-02 23:43:01

前言

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</pre> 

提示:执行完命令后会在 /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</pre> 

增加点击爆炸效果

更改的位置:

更改的内容:

fireworks.js文件链接:

链接:https://pan.baidu.com/s/1wcbQpO0QSKV35k3vCVFvYg

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 %}</pre> 

3,修改主题配置文件

更多优化点这里

文章来源: https://blog.csdn.net/qq_43414988/article/details/92373711
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!