title: Hexo 博客添加各种有趣又有用的小功能
date: 2018-07-16 17:47:22
tags:
- GitHub Pages+hexo
- Gitment
- APlayer
- DPlayer
- 评论
- 打赏
- 妹子
评论功能
Gitment
Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。
使用:看官方文档,说的很详细
- 注册 OAuth Application
首先在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 进行安装。
$ 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://bmob-cdn-20430.b0.upaiyun.com/2018/07/16/818aaf3940fcb81b80cec7fb39bcb0b2.png)
![](http://bmob-cdn-20430.b0.upaiyun.com/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://bmob-cdn-20430.b0.upaiyun.com/2018/07/16/818aaf3940fcb81b80cec7fb39bcb0b2.png" alt="支付宝打赏"> -->
<!-- 微信打赏图案 -->
<img src="http://bmob-cdn-20430.b0.upaiyun.com/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合适位置中添加(想在那个页面放都可以),不知道放那的话,在后添加
{% if theme.donate %}
{% include 'includes/donate.swig' %}
{% endif %}
4.打开主题配置文件_config.yml
,在里面最后写下:
#是否开启打赏功能
donate: true
领养可爱妹子
]
-
领取
博客项目根目录下右击git bash here,输入如下命令,
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
,在里面最后写下:
# 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中添加入戏代码:
<span id="busuanzi_container_page_pv">
本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
网站访问量
推荐不蒜子,简单又好用。访问量是pv ,访客量是uv,自己换。
在\themes\random\layout\includes 文件下的layout.swig页脚部分添加如下代码:
<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.切换到根目录下,然后运行如下代码
$ 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。