hexo的next主题的最新优化_3

时间 2019-12-19

标签 hexo 主题最新优化繁體版

原文原文链接

前言

在hexo的next主题的最新优化_1中和hexo的next主题的最新优化_2介绍了一些简单点的操做，但愿对大家有所帮助，若是实在看不懂，能够扫一扫文章最后的QQ群二维码，有什么问题能够私聊我呦！好的废话就很少说了。咱们开始吧！javascript

主题优化_3

设置动态背景

更改的位置：css

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

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

canvas_nest以下图所示

three_waves、canvas_lines、canvas_sphere这三种效果能够本身尝试

开启canvas_nest更改的内容：git

第一步：打开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文件夹。github

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

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

第一步：打开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文件夹。canvas

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

添加进度条

更改的位置：hexo

在next主题中提供了不少种加载方式，这就根据我的喜欢了，如下图效果为例post

更改的内容：

第一步：打开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，修改主题配置文件

[更多优化点这里]