Hexo Next 主題啟用及相關設置

用於備份個人所用設置，有些方案收集自互聯網。

主題下載並啟用

進入命令行，下載 NexT 主題，輸入：

git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站點配置文件 _config.yml，找到如下代碼：

## Themes: https://hexo.io/themes/
theme: landscape

將 landscape 修改為 next 即可。

修改語言

打開站點配置文件，搜索 language，找到如下代碼：

author:
language:
timezone:

在 language 后面輸入 zh-CN。

注意：冒號后面必須有一個空格。

新建標簽及分類界面

打開 主題配置文件，搜索 menu，找到如下代碼：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

把 tags 和 categories 前面的 # 刪除，進入命令行，輸入：

hexo n page tags
hexo n page categories

進入博客主目錄 Hexo/source，找到 tags 和 categories 文件夾，分別進入並修改文件夾內的文件。例如，先進入 tags 文件夾，打開 index.md 文件，在 date 下一行輸入：

type: "tags"

修改 categories 文件夾下的文件時，只需把上面的 tags 代碼改成 categories 即可。

切換主題

next 主題自帶四種樣式。

在主題配置文件 /next/_config.yml 中查找：scheme，找到如下代碼：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

選擇你喜歡的一種樣式，去掉前面的 #，其他主題前加上 # 即可。

隱藏網頁底部 powered By Hexo / 強力驅動

打開 themes/next/layout/_partials/footer.swig

找到：

{% if theme.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} – {#
  #}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

把這段代碼首尾分別加上：<!-- 和 -->，或者直接刪除。

文章添加陰影

打開 /themes/next/source/css/_custom/custom.styl，添加：

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

瀏覽頁面顯示當前瀏覽進度

打開 themes/next/_config.yml，搜索關鍵字 scrollpercent，把 false 改為 true。

Local Search本地搜索

在站點的根目錄下執行以下命令：

npm install hexo-generator-searchdb --save

編輯站點配置文件，新增以下內容到任意位置：

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

編輯主題配置文件，啟用本地搜索功能：

# Local search
local_search:
  enable: true

設置個人頭像

打開 主題配置文件，找到 Sidebar Avatar 字段：

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: #/images/avatar.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

將 url 后面的 # 刪掉，然后把你的頭像命名為 avatar.jpg 放入 themes/next/source/images 中

rounded ：設置頭像為圓形

opacity ：設置頭像的不透明度

rotated ：設置頭像可旋轉

設置站點建立時間

在 主題配置文件 中，搜索：since，修改 since 后面的值即可，例如：

since: 2013

設置網站圖標

在 EasyIcon 中找一張（32*32）的 ico 圖標，或者去別的網站下載或者制作，並將圖標名稱改為favicon.ico，然后把圖標放在 /themes/next/source/images 里，並且修改主題配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

修改文章底部的 # 號的標簽

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel="tag">#，將 # 換成 <i class="fa fa-tag"></i>

網站底部字數統計

切換到根目錄下，運行如下代碼：

npm install hexo-wordcount --save

然后在 /themes/next/layout/_partials/footer.swig 文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

添加點擊愛心效果

在 /themes/next/source/js/src 下新建文件 clicklove.js，接着把如下代碼復制粘貼到 clicklove.js 文件中，代碼如下：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 \themes\next\layout\_layout.swig 文件末尾添加：

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

點擊爆炸效果

方法和那個點擊出現愛心效果是差不多的，首先在 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

動態背景

next 主題在 5.1.1 以上

打開 next/layout/_layout.swig 文件

在 </body> 之前添加如下代碼，不要放在 </head> 的后面：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打開主題配置文件 /next/_config.yml

搜素 canvas_nest，將 false 改為 true 即可。

next 主題在 5.1.1 以下

打開 next/layout/_layout.swig 文件

在 </body> 之前添加如下代碼，不要放在 </head> 的后面：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打開主題配置文件 /next/_config.yml

在里面添加如下代碼：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

配置項說明

• color ：線條顏色, 默認: '0,0,0'；三個數字分別為 (R,G,B)
• opacity: 線條透明度（0~1）, 默認: 0.5
• count: 線條的總數量, 默認: 150
• zIndex: 背景的 z-index 屬性，css 屬性用於控制所在層的位置, 默認: -1

修改文章不透明度

設置了動態背景后，動態線條會干擾到文章的閱讀，所以就需要調整文章背景的不透明度了。

修改 themes\next\source\css\ _custom\custom.styl 文件，在后面添加如下代碼：

.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.8;
    min-height: 500px;
}

配置項說明

background: #fff; 白色
opacity: 0.8; 不透明度

自動更換背景圖片

和修改動態背景類似。

自動更換背景是修改添加背景的 css 樣式來實現。圖片來源是：

https://source.unsplash.com/

這個網站不僅免費提供了很多高清美圖，而且還提供 api 接口調用，非常良心。這里實現的原理也是調用了這個網站的接口。

修改 themes\next\source\css\ _custom\custom.styl 文件，添加以下代碼：

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

如果不喜歡這個網址提供的圖片做背景，可以修改url()里面的路徑。repeat、attachment、position 就是調整圖片的位置、不重復出現、不滾動等等。

靜態背景

打開博客根目錄 /themes/next/source/css/_custom/custom.styl 文件，編輯如下：

// Custom styles.
body { 
    background-image: url(/images/background.png);
    background-attachment: fixed; // 不隨屏幕滾動而滾動
    background-repeat: repeat; // 如果背景圖不夠屏幕大小則重復鋪，改為no-repeat則表示不重復鋪
    background-size: contain; // 等比例鋪滿屏幕
}

然后將背景圖命名為 background.png 並放入主題根目錄 source/images 下。

修改主題顏色

找到 博客根目錄\themes\next\source\css\_custom\custom.styl 並打開

如下列出了藍色主題的參考代碼，可以直接使用：

// 文章內鏈接文本樣式 
.post-body p a{ 
    color: #0593d3; 
    border-bottom: none; 
    border-bottom: 1px solid #0593d3; 
    &:hover { 
        color: #fc6423; 
        border-bottom: none; 
        border-bottom: 1px solid #fc6423; 
    } 
}

// 修改選中字符的顏色
/* webkit, opera, IE9 */
::selection { 
    background: #49b1f5;
    color: #fff; 
}
/* firefox */
::-moz-selection { 
    background: #49b1f5;
    color: #fff;    
}

// 修改網站頭部顏色
.headband {
    height: 3px;
    background: #49b1f5;
}
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: #49b1f5;
}
.site-subtitle {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

// 修改按鍵（button）樣式
.btn {
    color: #49b1f5;
    background: #fff;
    border: 2px solid #49b1f5;
}

// 按鍵（button）點擊時樣式
.btn:hover {
  border-color: #49b1f5;
  color: #fff;
  background: #49b1f5;
}

// 鼠標移動至文章標題時的效果
.posts-expand .post-title-link::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #49b1f5;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}