今天为博客增加了音乐播放插件、博客页脚网站安全运行时间、文章阅读次数以及网站访客统计的功能，接下来进行详细介绍。

博客音乐插件的使用

本博客使用的音乐播放插件为hexo-tag-aplayer，该款插件集成了MetingJS的功能，MetingJS是基于Meting API 的APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

安装

1	npm install --save hexo-tag-aplayer

配置

如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：

1 2	aplayer: meting: true

接着就可以通过以下方式在文章中使用MetingJS播放器了：

<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

参考

Github 地址：https://github.com/MoePlayer/hexo-tag-aplayer
官方文档：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

效果

music

博客页脚添加网站安全运行时间

设置

在\themes\next\layout\_partials\footer.swig文件中添加如下代码：

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span> 
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("05/22/2019 13:14:21");//此处修改你的建站时间或者网站上线时间
        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 = "<br />本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

效果

time

添加文章阅读次数统计和访客统计

设置

可以使用不蒜子统计实现文章阅读次数统计和访客统计的功能，不蒜子就是那么一款记录访客和访问量的插件。
首先需要在themes/next/layout/_partial/footer.swig文件开始添加busuanzi.pure.mini.js不蒜子脚本文件：

1	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

如果使用的是Next主题，接下来需要在主题配置文件 _config.yml 中设置如下：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i> 浏览
  page_pv_footer: 次

效果

read
visitor