最詳細的Next主題構造

首先執行指令，之後把前期準備做好，否則後面會出現毛病。

hexo init
cnpm install --save hexo-deployer-git
npm install
git init
           

目錄導航

• 一、根目錄下的配置檔案
• • 1、下載下傳next主題，及更改主題
  • 2、更改語言
  • 3、設定作者與站點描述
  • 4、增加本地搜尋功能(插件)
  • 5、統計全站及文章字數及閱讀時長（目前有錯）（插件）
  • 6、添加卡通人物（插件）
  • 7、靜态資源壓縮（插件）（有問題）
• 二、主題配置檔案
• • 1、增加菜單的分類，及建立它們的頁面
  • 2、換主題風格
  • 3、設定作者頭像
  • 4、增加社交連結
  • 5、打賞功能
  • 6、開啟側邊友情連結
  • 7、設定網站圖示
  • 8、增添加載條
  • 9、修改網站底部小圖示
  • 10、去掉網頁Hexo自帶底部資訊
  • 11、增加彩帶、背景動圖、背景動畫
  • 12、右上角實作github按鈕
  • 13、顯示目前浏覽進度
  • 14、增加爆炸效果
  • 15、添加文章結束語
  • 16、添加版權資訊
  • 17、404頁面建立
  • 18、添加網易雲音樂

一、根目錄下的配置檔案

1、下載下傳next主題，及更改主題

1. 下載下傳zip壓縮包點選這裡

   解壓後放入themes目錄下，并改名為next

   

2. 修改根目錄配置檔案

3. 

2、更改語言

1. 看主題的中文格式，去下面檔案夾看

   

   發現中文格式為zh-CN

   

2. 修改根目錄配置檔案

   

3、設定作者與站點描述

修改根目錄的配置檔案

4、增加本地搜尋功能(插件)

①、安裝插件,如下圖

cnpm install hexo-generator-searchdb --save
           

②、修改根目錄配置檔案，新增以下内容到任意位置

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

③、修改主題配置檔案，搜尋local_search子產品

5、統計全站及文章字數及閱讀時長（目前有錯）（插件）

①、安裝插件，如下圖

cnpm install hexo-symbols-count-time --save
           

②、修改根目錄配置檔案，添加以下内容。

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true   #這兩行是全站統計，可以填false
  total_time: true
           

發現有問題

6、添加卡通人物（插件）

點選這裡,參考官方文檔，裡面有中文說明

①、首先安裝插件

cnpm install --save hexo-helper-live2d
           

②、選則模型下載下傳

cnpm install live2d-widget-model-hibiki
# cnpm install ive2d-widget-model-koharu
           

②、修改根目錄配置檔案，在最下面加入

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-hibiki    #修改為自己下載下傳的模型名稱
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7
           

7、靜态資源壓縮（插件）（有問題）

①、 安裝插件：

cnpm install hexo-neat --save-dev
           

②、修改根目錄配置檔案，添加以下内容：

# hexo-neat
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
 enable: true
 exclude:
# 壓縮css  
neat_css:
 enable: true
 exclude:
   - '**/*.min.css'
# 壓縮js
neat_js:
 enable: true
 mangle: true
 output:
 compress:
 exclude:
   - '**/*.min.js'
   - '**/jquery.fancybox.pack.js'
   - '**/index.js'  
           

二、主題配置檔案

1、增加菜單的分類，及建立它們的頁面

1. 修改主題配置檔案，menu子產品，去掉#即可，可以調換順序

   

2. 建立各自對應的頁面

hexo new page about
hexo new page tags
new page categories
           

1. 在發表文章是開頭加上對應menu字段

①、自己可以在menu添加自定義菜單及菜單圖示

②、hexo new page 自定義菜單名

③、在themes/next/languages/zh-CN.yml檔案中menu子產品添加對應名稱及中文名

2、換主題風格

1. 修改主題配置檔案，找到 Scheme，差别不大

   

3、設定作者頭像

修改主題配置檔案，找到avatar，将位址換位本地或網上的都行。

本地設定：

①.在根目錄的source建立images檔案夾，然後把圖檔放入。

②. 修改主題配置檔案。

rounded是變圓

rotated根據滑鼠滾動

4、增加社交連結

修改主題配置檔案，找到social子產品。

格式為：顯示文本: 連結位址 || Front Awesome圖示名稱

注：Front Awesome連結圖示名稱不必帶fa- 字首

5、打賞功能

修改主題配置檔案,搜尋reward子產品

①、将支付截圖儲存在根目錄下的source/images中

②、修改主題配置檔案

注：animation：文字會跳動

6、開啟側邊友情連結

修改主題配置檔案，搜尋Blog rolls子產品

7、設定網站圖示

①、在Easylcon中分别找一張（1616與3232）的ico圖示。或者去别的網站下載下傳，并改為xxx16.ioc和xxx32.ico，然後把圖示放到根目錄下的source/images

②、修改主題配置檔案，搜尋favicon子產品

8、增添加載條

①、下載下傳進度條檔案

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
           

②、修改主題配置檔案，搜尋pace子產品，根據列出的，選一個寫在theme後

9、修改網站底部小圖示

修改主題配置檔案，搜尋icon子產品，修改name後為Front Awesome。

注：animated為閃動

color網上找16進制代碼，加“ ”

10、去掉網頁Hexo自帶底部資訊

修改主題配置檔案，搜尋copyright子產品。

11、增加彩帶、背景動圖、背景動畫

1. 增加彩帶

   ①、輸入以下指令

git clone https://github.com/theme-next/theme-next-canvas-ribbon themes/next/source/lib/canvas-ribbon
           

②、修改主題配置檔案，搜尋canvas_ribbon子產品

1. 增加背景動圖

   ①、在根目錄下的source檔案中若沒有_data目錄則建立，然後在此目錄下建立footer.swig檔案。

   

   并輸入以下内容

<script color="0,0,255" opacity="0.7" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/canvas-nest.js"></script>
           

②、修改主題配置檔案，搜尋custom_file_path部分，去掉注釋

1. 增加背景動畫

   ①、輸入以下指令

git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
           

②、修改主題配置檔案，搜尋JavaScript 3D，三個選一個，第二個加載較快

12、右上角實作github按鈕

修改主題配置檔案，搜尋github_banner。

發現文章右上角

13、顯示目前浏覽進度

注意此功能隻能用于Pisces和Gemini主題

修改主題配置檔案，搜尋bt2子產品

14、增加爆炸效果

①、建立路徑：themes/next/source/js/src/fireworks.js

添加以下代碼：

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
           

②、修改themes/next/layout/_layout.swig檔案，在最下面</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/src/fireworks.js"></script>
{% endif %}
           

③、修改主題配置檔案，最後面添加以下代碼：

# Fireworks
fireworks: true
           

15、添加文章結束語

①、建立路徑：\themes\next\layout\_macro\passage-end-tag.swig,添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文已結束<i class="fa fa-hourglass-end"></i>非常感謝您的閱讀-------------</div>
    {% endif %}
</div>
           

②、修改==\themes\next\layout\_macro\post.swig==，在END POST BODY後添加以下代碼：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
           

③、修改主題配置檔案，最下面添加：

# 文章末尾添加“本文結束”标記
passage_end_tag:
  enabled: true
           

16、添加版權資訊

修改主題配置檔案，搜尋creative_commons子產品

17、404頁面建立

①、根目錄下建立404頁面

hexo new page 404
           

②、在根目錄下的source/404/index.md,添加以下代碼:

---
title: 404
date: 2020-05-28 17:37:33
---
<!DOCTYPE HTML>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css" target="_blank" rel="external nofollow" >
  </head>
  <body>
    <script type="text/plain" src="http://www.qq.com/404/search_children.js"
            charset="utf-8" homePageUrl="https://ldysdy999.github.io"  #填自己的部落格位址
            homePageName="回到我的首頁">
    </script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
  </html>
           

③、修改themes/next/languages/zh-CN.yml中文名字公益404修改為公益

④、修改主題配置檔案，開啟menu子產品的commonweal标簽

18、添加網易雲音樂

①、打開網易雲音樂網頁版,生成外連接配接播放器

複制HTML代碼

②、修改themes/next/layout/_macro/sidebar.swig,添加代碼如下

<div id="music163player">
  <iframe frame  marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1381930398&auto=1&height=66"></iframe>
</div>
           

添加到不同位置，播放器的位置也不同，如下：

➡、添加到開頭幾行

➡、添加到中間

➡、添加到最51行上面，注意51-—54行前千萬不能分開