Hexo 博客添加各种有趣又有用的小功能

评论功能

1. Gitment
2. 来必力

Gitment

​ Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

中文官方文档|项目地址|示例页面

使用：看官方文档，说的很详细

1. 注册 OAuth Application

​ 首先在GitHub注册一个新的OAuthe应用程序 ，GitHub—–>settings—->applications—->new，嫌麻烦的点击此处，申请好之后，看到这两个东西ClientID和Client Secret，要记下来后面会用到。

1. 引入 Gitment

将下面的代码添加到你的页面：

"container">
"stylesheet" href="https://imsun.github.io/gitment/style/default.css">

注意，上述代码引用的 Gitment 将会随着开发变动。如果你希望始终使用最新的界面与特性即可引入上述代码。

如果你希望引用确定版本的 Gitment，则应该使用 npm 进行安装。

$ npm install --save gitment

1. 初始化评论

​ 页面发布后，你需要访问页面并使用你的 GitHub 账号登录（请确保你的账号是第二步所填 repo 的 owner），点击初始化按钮。之后其他用户即可在该页面发表评论。

来必力

​ 来比力我不说具体，网上很多。这里说下我为什么不用来必力而使用Gitment ，害怕呗，那么多家的倒闭了，Gitment 是作者实现的一款基于 GitHub Issues 的评论系统，评论会放到你的项目的Issues 里面，数据有保障。还有就是来必力加载速度太慢。

---

添加音乐、视频

1. 网易云音乐
2. APlayer
3. DPlayer

网易云音乐

代码放到你想放到的页面。还有一种是把本地音乐放到网易云音乐，然后再生成外部播放器。

添加网易云音乐歌单列表：待续。。。，我还没弄出来?。

APlayer

• APlayer GitHub
• 官网中文文档

​ 如果网易云音乐不能满足你的胃口，那么APlayer 来凑，APlayer 功能很强大，自然使用起来有点小复杂，这个后续讲，大家可以先跟着文档来使用，因为我使用的主题还没弄出来，暂时跳过。

DPlayer

DPlayer跟APlayer 是用一个作者开发的。

---

打赏实现

1.在\themes\random\source\css新建donate.css

.donate_bar {
    text-align: center;
    margin-top: 5%
}

.donate_bar a.btn_donate { 
    display: inline-block; 
    width: 82px; 
    height: 82px; 
    margin-left: auto; 
    margin-right: auto; 
    background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat; 
    -webkit-transition: background 0s; 
    -moz-transition: background 0s; 
    -o-transition: background 0s; 
    -ms-transition: background 0s; 
    transition: background 0s 
} 

.donate_bar a.btn_donate:hover { 
    background-position: 0 -82px 
} 

.donate_bar .donate_txt { 
    display: block; 
    color: #9d9d9d; 
    font: 14px/2 "Microsoft Yahei" 
} 

.donate_bar.hidden{ 
    display: none 
} 

.post-donate{ 
    margin-top: 45px; 
}

#donate_guide{ 
    height: 310px; 
    width: 500px; 
    margin: 0 auto; 
} 

#donate_guide img{ 
    height: 350px; 
    height: 350px; 
}

2.在themes\random\layout\includes下新建donate.swig

"post-donate">
    
"donate_board" class="donate_bar center">
        "btn_donate" class="btn_donate" href="javascript:;" title="打赏">
        "donate_txt">
           ↑

           喜欢文章就打赏一包辣条吧！
        
        

      
  
    
"donate_guide" class="donate_bar center hidden" >
        
        
        
        
        "http://bmob-cdn-20430.b0.upaiyun.com/2018/07/16/b1be33f440b853398031437a9276fa90.png" alt="微信打赏">

    
    

3.在post.swig合适位置中添加(想在那个页面放都可以)，不知道放那的话，在后添加

{% if theme.donate %}
    {% include 'includes/donate.swig' %}
{% endif %}

4.打开主题配置文件_config.yml，在里面最后写下：

#是否开启打赏功能
donate: true

---

领养可爱妹子

1. 领取

   博客项目根目录下右击git bash here，输入如下命令，

npm install --save hexo-helper-live2d

1. 安顿

   在主题的 _config.yml 下配置

# 添加萌妹子效果
live2d:
  enable: true
  scriptFrom: local  
  model:
    use: live2d-widget-model-wanko    //妹子有很多个，叫名字他才出来
  display:    
    position: right   //位置
    width: 150    //妹子宽度
    height: 300    //妹子高度
  mobile:
    show: true

use 用来配置模型，目前有很多模型可以选择。 更多模型

点击爆炸效果

​ 圖片就不上傳了哈！妹子那張圖片已經有了。

• 首先在themes\random\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;tfor(var a=createCircle(e,t),n=[],i=0;ireturn 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;tfor(var a=createCircle(e,t),n=[],i=0;ireturn 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\random\layout\includes footer.swig文件中添加如下代码，自己想放那也可以放那里。

{% if theme.fireworks %}
    "fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" > 
     
    
  {% endif %}

• 打开主题配置文件_config.yml，在里面最后写下：

# Fireworks  点击爆炸效果
fireworks: true

如果你不喜欢爆炸的效果，你也可以实现点击出现桃心效果。

---

顶部加载条

在\themes\random\layout\includes head.swig文件中添加如下代码，

"//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
  

---

文章阅读量

在\themes\random\layout 文件下的post.swig中添加入戏代码：

"busuanzi_container_page_pv">
   本文总阅读量"busuanzi_value_page_pv">次

---

网站访问量

推荐不蒜子，简单又好用。访问量是pv ,访客量是uv，自己换。

在\themes\random\layout\includes 文件下的layout.swig页脚部分添加如下代码：

    "busuanzi_container_site_pv">本站总访问量"busuanzi_value_site_pv">次

计算访问量的方法有两种：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。 我用的是uv的方式，大家自行选择即可。

---

安全运行天数

在\themes\random\layout\includes 文件下的layout.swig页脚部分添加如下代码：

"timeDate">载入天数..."times">载入时分秒...
    

博客字数统计

1.切换到根目录下，然后运行如下代码

$ npm install hexo-wordcount --save

2.在\themes\random\layout\includes 文件下的layout.swig页脚部分添加如下代码：

"theme-info">
      
"powered-by">
      "post-count">全站博客共{{ totalcount(site) }}字

---

总结：

本篇以random主题为例。考虑网站的安全性，建议备案，然后加入百度SEO。

---

参考链接：

hexo博客的背景设置

Hexo博客添加打赏功能

hexo 博客小功能添加-评论、相册、字数统计…