基礎篇講到了如何使用 Hexo 建站。包括基本命令使用及獲取到原始碼之後的一些簡單工程配置。
下面將介紹，如何給部落格新增 評論、背景音樂、點選特效、字數統計等功能。
文章內容多數內容皆來自於TRHX 的文章Hexo 部落格主題個性化。
友情提示，本文篇幅太長，建議結合目錄選擇性的瀏覽。
1. 新增評論
material-x 主題已經整合了四個評論系統。暫時只介紹用過的兩個。
1.1 使用 valine
首先需要在 leancloud 上註冊應用。在控制檯中，點開註冊的應用檢視 AppID 和 AppKey。
在主題配置檔案中
#valine配置
valine:
enable: true # 如果你想用Valine評論系統，請設定enable為true
volantis: true # 是否啟用volantis版本（禁止匿名，增加若干貼吧、QQ表情）
# 還需要在根目錄配置檔案中新增下面這三行內容
# leancloud:
# app_id: 你的appId
# app_key: 你的appKey
guest_info: nick,mail,link #valine comment header info
placeholder: 快來評論吧~ # valine comment input placeholder(like: Please leave your footprints )
avatar: mp # gravatar style https://valine.js.org/avatar
pageSize: 10 # comment list page size
verify: true # valine verify code (true/false)
notify: true # valine mail notify (true/false)
lang: zh-cn
highlight: true
複製程式碼在部落格配置檔案中
leancloud:
app_id: 你的appId
app_key: 你的appKey
複製程式碼配置完成後，在文章底部出現評論介面。
評論效果支援 Markdown 語法。
評論內容可以在 leancloud 控制檯中管理。
1.2 使用 gitalk
首先需要在 GitHub 中建立一個授權應用。此應用在訪客評論時使用 GitHub 賬戶登入，進行授權。
建立授權應用地址：github.com/settings/ap…，亦可以在 GitHub 中通過 Settings -> Developer settings -> OAuth Apps ->New Auth App 訪問 。
需要填寫四條資訊，以我的應用為例：
- 應用名稱，授權時告知使用者是哪個應用使用 GitHub 賬戶。
- 應用主頁，使用部落格站點主頁 ，也可以換別的。
- 應用描述。
- 授權通過後的跳轉頁面。
授權頁面如圖：
在應用中檢視 Client ID 和 Client Secret 。
最後在部落格配置檔案中
gitalk:
clientID: 你的clientID
clientSecret: 你的clientSecret
repo: 你的repo名
owner: 你的GitHub名
admin: [] 至少填寫你的GitHub名
複製程式碼由於，gitalk 的評論方式是通過對 repo 提 issues 的方式。因此上面的 repo 即是檢視 issues 的倉庫地址。
評論介面如下：
在 issues 管理，通過最近更新的排序方式，檢視最新的評論。
可以直接在 issues 中直接回復。這樣的好處是，只要檢視 issues 就可以知道有新的評論，便於實時互動。GitHub還會通過傳送郵件的方式告知有新的 issues。
2. 新增BGM
在主題的配置檔案中:
############################### 預設值 ###############################
# 音樂控制元件的預設配置，如果sidebar或者page裡沒有提供，就取這裡的引數
music:
enable: true # 是否啟用
color: '#1BCDFC' # 主題色
mode: circulation # random （隨機） single （單曲） circulation （列表迴圈） order （列表）
server: netease # netease（網易雲音樂）tencent（QQ音樂） xiami（蝦米） kugou（酷狗）
type: playlist # song （單曲） album （專輯） playlist （歌單） search （搜尋）
id: 2615636388 # 歌曲/專輯/歌單 ID
volume: 0.7 # 音量, 0~1
autoplay: false # 自動播放
# sidebar 配置
sidebar:
- widget: music
icon: fas fa-compact-disc
title: "最近在聽"
more:
icon: far fa-heart
url: https://music.163.com/#/user/home?id=63035382
rel: external nofollow noopener noreferrer
target: _blank
server: netease # netease（網易雲音樂）tencent（QQ音樂） xiami（蝦米） kugou（酷狗）
type: playlist # song （單曲） album （專輯） playlist （歌單） search （搜尋）
id: 2615636388 # 歌曲/專輯/歌單 ID
複製程式碼還要在 layout 中配置是否顯示在側邊欄。
layout:
# 文章列表（主頁、自定義的列表）佈局
posts:
# 列表類頁面的側邊欄,顯示 music 部件
sidebar: [author, list, grid, music, category, tagcloud]
# 文章頁面佈局
article:
# 文章頁面的側邊欄，不顯示 music 部件
sidebar: [author, toc, grid, category, tagcloud, list, related_posts]
# 其他的頁面佈局暫時等於文章列表
複製程式碼
在文章 md 檔案中：
# page中配置，用於文章標題
---
music:
enable: true # true（文章內和文章列表都顯示） internal（只在文章內顯示）
server: netease # netease（網易雲音樂）tencent（QQ音樂） xiami（蝦米） kugou（酷狗）
type: song # song （單曲） album （專輯） playlist （歌單） search （搜尋）
id: 558369602 # 歌曲/專輯/歌單 ID
---
複製程式碼
3. 新增點選效果
3.1 點選彈出愛心
在主題資料夾，source/js 目錄下，新建 love.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: 500%;-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);
複製程式碼在主題目錄，layout 資料夾中，layout.ejs 檔案末尾新增：
<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/love.js"></script>
複製程式碼效果如圖（盜圖）：
3.2 點選彈出文字
在主題資料夾，source/js 目錄下，新建 click_show_text.js 。複製下面程式碼：
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業", "誠信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FF0000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});
function delay() {
$(".buryit").removeAttr("onclick");
}
複製程式碼在主題目錄，layout 資料夾中，layout.ejs 檔案末尾新增：
<!--單擊顯示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>
複製程式碼核心價值觀類文字可以自己替換，效果如圖（盜圖）：
3.3 點選煙花
在主題資料夾，source/js 目錄下，新建 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)};
複製程式碼在主題目錄，layout 資料夾中，layout.ejs 檔案末尾新增：
<!-- 單擊煙花爆炸效果 -->
<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>
複製程式碼效果如圖（盜圖）
以上配置 ，修改過後及時生效，不需要重啟服務。
4. 新增字數統計和閱讀時長
需要安裝依賴，在部落格根目錄下：
npm i --save hexo-wordcount
複製程式碼在主題資料夾，layout/_partial/post 目錄下，新建 word.ejs 。複製下面程式碼：
<div>
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字數統計: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 閱讀時長: </span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
複製程式碼在主題資料夾下，layout/_partial 目錄下修改 meta.ejs 檔案。
<!-- 注意此 div -->
<div class='new-meta-box'>
<% (topMetas).forEach(function(meta){ %>
<% if(meta != 'title'){ %>
<%- partial('../_meta/' + meta, {post: post, isPostList: isPostList}) %>
<% } %>
<% }) %>
<!-- 此為新增內容 -->
<%if(theme.word_count){%>
<%- partial('post/word') %>
<%}%>
<!-- 以上是新增內容 -->
</div>
複製程式碼最後在主題配置檔案的末尾，新增
# 顯示字數統計
word_count: true
複製程式碼效果如圖
5. 新增百度統計
百度統計是百度推出的一款免費的專業網站流量分析工具，能夠告訴使用者訪客是如何找到並瀏覽使用者的網站，在網站上做了些什麼。
訪問百度統計首頁，註冊賬戶，新增網站，輸入你站點的域名。
建立網站成功後，需要將需要將統計程式碼放在頁面中，詳見獲取內碼表面。由於 material-x 已經整合了此程式碼 ，見主題資料夾，layout/_partial 目錄下， head.ejs 檔案。
<% if (config.baidu_analytics_key) { %>
<!-- ba -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%= config.baidu_analytics_key %>";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>
複製程式碼所以 ,只需要在部落格配置目錄下，
baidu_analytics_key: # 你的百度統計key
複製程式碼key在獲取程式碼的位置，見圖：
配置完成後，可執行程式碼安裝檢查判斷是否整合成功。
6. 新增雪花效果
雪花效果有兩種，見下面盜圖 ：
樣式一
樣式二
在主題資料夾 下，source/js 目錄下新建 snow.js 複製下面程式碼。
樣式一
/*樣式一*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此處可以定義雪花顏色，若要白色可以改為#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定義雪花最小尺寸 */
maxSize: 50,/* 定義雪花最大尺寸 */
newOn: 300 /* 定義密集程度，數字越小越密集 */
});
});
複製程式碼樣式二
/*樣式二*/
/* 控制下雪 */
function snowFall(snow) {
/* 可配置屬性 */
snow = snow || {};
this.maxFlake = snow.maxFlake || 200; /* 最多片數 */
this.flakeSize = snow.flakeSize || 10; /* 雪花形狀 */
this.fallSpeed = snow.fallSpeed || 1; /* 墜落速度 */
}
/* 相容寫法 */
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) { setTimeout(callback, 1000 / 60); };
cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame;
/* 開始下雪 */
snowFall.prototype.start = function(){
/* 建立畫布 */
snowCanvas.apply(this);
/* 建立雪花形狀 */
createFlakes.apply(this);
/* 畫雪 */
drawSnow.apply(this)
}
/* 建立畫布 */
function snowCanvas() {
/* 新增Dom結點 */
var snowcanvas = document.createElement("canvas");
snowcanvas.id = "snowfall";
snowcanvas.width = window.innerWidth;
snowcanvas.height = document.body.clientHeight;
snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
document.getElementsByTagName("body")[0].appendChild(snowcanvas);
this.canvas = snowcanvas;
this.ctx = snowcanvas.getContext("2d");
/* 視窗大小改變的處理 */
window.onresize = function() {
snowcanvas.width = window.innerWidth;
/* snowcanvas.height = window.innerHeight */
}
}
/* 雪運動物件 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
this.x = Math.floor(Math.random() * canvasWidth); /* x座標 */
this.y = Math.floor(Math.random() * canvasHeight); /* y座標 */
this.size = Math.random() * flakeSize + 2; /* 形狀 */
this.maxSize = flakeSize; /* 最大形狀 */
this.speed = Math.random() * 1 + fallSpeed; /* 墜落速度 */
this.fallSpeed = fallSpeed; /* 墜落速度 */
this.velY = this.speed; /* Y方向速度 */
this.velX = 0; /* X方向速度 */
this.stepSize = Math.random() / 30; /* 步長 */
this.step = 0 /* 步數 */
}
flakeMove.prototype.update = function() {
var x = this.x,
y = this.y;
/* 左右擺動(餘弦) */
this.velX *= 0.98;
if (this.velY <= this.speed) {
this.velY = this.speed
}
this.velX += Math.cos(this.step += .05) * this.stepSize;
this.y += this.velY;
this.x += this.velX;
/* 飛出邊界的處理 */
if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
this.reset(canvas.width, canvas.height)
}
};
/* 飛出邊界-放置最頂端繼續墜落 */
flakeMove.prototype.reset = function(width, height) {
this.x = Math.floor(Math.random() * width);
this.y = 0;
this.size = Math.random() * this.maxSize + 2;
this.speed = Math.random() * 1 + this.fallSpeed;
this.velY = this.speed;
this.velX = 0;
};
// 渲染雪花-隨機形狀（此處可修改雪花顏色！！！）
flakeMove.prototype.render = function(ctx) {
var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此處是雪花顏色，預設是白色 */
snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改為其他顏色，請自行查 */
snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16進位制的RGB 顏色程式碼。 */
ctx.save();
ctx.fillStyle = snowFlake;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
};
/* 建立雪花-定義形狀 */
function createFlakes() {
var maxFlake = this.maxFlake,
flakes = this.flakes = [],
canvas = this.canvas;
for (var i = 0; i < maxFlake; i++) {
flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
}
}
/* 畫雪 */
function drawSnow() {
var maxFlake = this.maxFlake,
flakes = this.flakes;
ctx = this.ctx, canvas = this.canvas, that = this;
/* 清空雪花 */
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var e = 0; e < maxFlake; e++) {
flakes[e].update();
flakes[e].render(ctx);
}
/* 一幀一幀的畫 */
this.loop = requestAnimationFrame(function() {
drawSnow.apply(that);
});
}
/* 呼叫及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();
複製程式碼在主題資料夾，layout 目錄中，layout.ejs 檔案末尾新增：
<!-- 雪花特效 -->
<script type="text/javascript" src="\js\snow.js"></script>
複製程式碼7. 新增背景動態線條
在主題資料夾，layout 目錄中，layout.ejs 檔案末尾新增：
<!--動態線條背景，線條顏色 220,220,220 可以換成喜歡的-->
<script type="text/javascript" color="92,210,245" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
複製程式碼8. 新增網站執行時間
在主題資料夾下，layout/_partial 目錄下修改 footer.ejs 檔案中，新增 下面程式碼：
- 顯示部分放在合適的位置。
- 指令碼部分放在檔案底部。
<!-- 顯示部分 -->
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<!-- 指令碼部分 -->
<script>
var now = new Date();
function createtime() {
var grt= new Date("11/03/2019 14:42:00");//在此處修改你的建站時間
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全執行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
複製程式碼效果如圖：
9. 新增背景動態綵帶
在主題資料夾，layout 目錄中，layout.ejs 檔案末尾新增：
<!-- 樣式一（滑鼠點選更換樣式） -->
<script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script>
<!-- 樣式二（飄動的綵帶） -->
<script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>
複製程式碼10. 新增RSS訂閱
RSS訂閱是站點用來和其他站點之間共享內容的一種簡易方式，即Really Simple Syndication（簡易資訊聚合），如果不會使用，可以參見：百度百科 。
需要安裝依賴
npm install hexo-generator-feed
複製程式碼在部落格配置檔案中，新增下面配置。
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS訂閱
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
複製程式碼在主題配置目錄中，使用 atom.xml 。個人偏好放置後面。
# 社交資訊
social:
- icon: fas fa-envelope
url: mailto:me@xaoxuu.com
- icon: fab fa-github
url: https://github.com/flueky
- icon: fas fa-headphones-alt
url: https://music.163.com/#/user/home?id=12143853
- icon: fas fa-rss
url: atom.xml
複製程式碼覺得有用？那打賞一個唄。去打賞
個人主頁已經更新 ，歡迎收藏flueky.github.io/。