给个人博客添加各种有趣又有用的小功能

撰写于 2018-07-16 修改于 2021-07-01 分类搭建个人博客标签 GitHub Pages+hexo / Gitment / APlayer / DPlayer / 评论 / 打赏 / 妹子阅读数量：次

评论功能

Gitment

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

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

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

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

引入 Gitment

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

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

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

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

1	$ npm install --save gitment

初始化评论

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

来必力

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

添加音乐、视频

网易云音乐
APlayer
DPlayer

网易云音乐

添加网易云音乐

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

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

APlayer

如果网易云音乐不能满足你的胃口，那么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

<! -- 添加捐赠图标 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏"></a>
        <span class="donate_txt">
           ↑<br>
           喜欢文章就打赏一包辣条吧！
        </span>
        <br>
      </div>  
    <div id="donate_guide" class="donate_bar center hidden" >
        <!-- 方式一：
            ![](http://file.youqian.tech/2018/07/16/818aaf3940fcb81b80cec7fb39bcb0b2.png)
            ![](http://file.youqian.tech/2018/07/16/b1be33f440b853398031437a9276fa90.png)
         -->
        <!-- 方式二；
            step1：在_config.yml中添加配置
                Alipay: /img/Alipay.jpg
                WeChatpay: /img/WeChatpay.jpg
            step2：此处两张图片的路径分别设置为如下
                <img src="<%- theme.root_url %><%=theme.Alipay%>"
                <img src="<%- theme.root_url %><%=theme.WeChatpay%>"
        -->
        <!-- 支付宝打赏图案 
        <img src="http://file.youqian.tech/2018/07/16/818aaf3940fcb81b80cec7fb39bcb0b2.png" alt="支付宝打赏"> -->
        <!-- 微信打赏图案 -->
        <img src="http://file.youqian.tech/2018/07/16/b1be33f440b853398031437a9276fa90.png" alt="微信打赏">
        
    </div>
    <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function(){
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }
    </script>
</div>
<! -- 添加捐赠图标 -->

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

1
2
3

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

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

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

领养可爱妹子

领取

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

1	npm install --save hexo-helper-live2d

安顿

在主题的 _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;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\random\layout\includes footer.swig文件中添加如下代码，自己想放那也可以放那里。

{% 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 %}

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

1 2	# Fireworks 点击爆炸效果 fireworks: true

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

顶部加载条

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

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
  <style>
      .pace .pace-progress {
          background: #1E92FB; /*进度条颜色*/
          height: 3px;
      }
      .pace .pace-progress-inner {
           box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
      }
      .pace .pace-activity {
          border-top-color: #1E92FB;    /*上边框颜色*/
          border-left-color: #1E92FB;    /*左边框颜色*/
      }
  </style>

文章阅读量

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

1
2
3

<span id="busuanzi_container_page_pv">
   本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

网站访问量

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

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

1 2	<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

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

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

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

安全运行天数

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

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
    <script>
        var now = new Date(); 
        function createtime() { 
            var grt= new Date("07/08/2018 12:00: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>

博客字数统计

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

1	$ npm install hexo-wordcount --save

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

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

总结：

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

参考链接：

hexo博客的背景设置

Hexo博客添加打赏功能

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