hexo的next主题的最新优化_3

时间:2022-08-31 22:28:58

前言

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

主题优化_3

设置动态背景

更改的位置:

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

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

  • canvas_nest如下图所示

hexo的next主题的最新优化_3

  • 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设置

hexo的next主题的最新优化_3

开启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设置

hexo的next主题的最新优化_3


添加进度条

更改的位置:

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

hexo的next主题的最新优化_3

更改的内容:

第一步:打开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设置

hexo的next主题的最新优化_3

设置左右上角的fork github

更改的位置:

hexo的next主题的最新优化_3

更改的内容:

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

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

hexo的next主题的最新优化_3

第二步:修改文件

hexo的next主题的最新优化_3

hexo的next主题的最新优化_3

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

hexo的next主题的最新优化_3


搜索功能

更改的位置:

hexo的next主题的最新优化_3

更改的内容:

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

npm install hexo-generator-searchdb --save

2,网站配置文件config

hexo的next主题的最新优化_3

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

3,主题配置文件config:

hexo的next主题的最新优化_3

# Local search
local_search:
  enable: true

增加点击爆炸效果

更改的位置:

hexo的next主题的最新优化_3

更改的内容:

fireworks.js文件链接:

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

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

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

hexo的next主题的最新优化_3

 {% 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,修改主题配置文件

hexo的next主题的最新优化_3

[更多优化点这里]