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，修改主題配置文件

[更多優化點這裏]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。