博客添加音乐插件、网站运行时间、文章阅读次数和网站访客统计
今天为博客增加了音乐播放插件、博客页脚网站安全运行时间、文章阅读次数以及网站访客统计的功能，接下来进行详细介绍。
博客音乐插件的使用
本博客使用的音乐播放插件为hexo-tag-aplayer，该款插件集成了MetingJS的功能，MetingJS是基于Meting API 的APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
安装
npm install --save hexo-tag-aplayer
配置
如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：
aplayer:meting: true
接着就可以通过{% meting ...%} 在文章中使用 MetingJS播放器了：
<!-- 简单示例 (id, server, type) -->
{% meting "60198" "netease" "playlist" %}<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
有关 {% meting %}的选项列表如下:
| 选项 | 默认值 | 描述 |
|---|---|---|
| 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
博客页脚添加网站安全运行时间
设置
在\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>
添加文章阅读次数统计和访客统计
设置
可以使用不蒜子统计实现文章阅读次数统计和访客统计的功能，不蒜子就是那么一款记录访客和访问量的插件。
首先需要在themes/next/layout/_partial/footer.swig文件开始添加busuanzi.pure.mini.js不蒜子脚本文件：
<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 falseenable: true# custom uv span for the whole sitesite_uv: truesite_uv_header: <i class="fa fa-user"></i> 本站访客数site_uv_footer: 人次# custom pv span for the whole sitesite_pv: truesite_pv_header: <i class="fa fa-eye"></i> 本站总访问量site_pv_footer: 次# custom pv span for one page onlypage_pv: truepage_pv_header: <i class="fa fa-eye"></i> 浏览page_pv_footer: 次
欢迎访问我的博客：ZhaoJuntao’s Blog
博客添加音乐插件、网站运行时间、文章阅读次数和网站访客统计相关推荐
- Hexo Next主题添加访客统计、访问次数统计、文章阅读次数统计
Hexo的版本:v3.9.0 Next的版本:v7.4.0 1.打开next主题配置文件\themes\next_config.yml,搜索找到busuanzi_count,把enable设置为tru ...
- wordpress实现文章阅读次数
原文出自搬砖工,需要转载请注明出处. 相信不少博客都是用wordpress搭建的,那么我们在不使用插件的情况下如何简单地实现文章阅读次数的统计呢?下面有两个方法可供参考: 方法一: 1.首先打开我们的 ...
- 如何用访客帐户登录计算机,如何在Windows 10中创建访客帐户 | MOS86
如果您发现客人经常询问您是否临时使用电脑检查他们的电子邮件或在网上查找内容,则不必让他们使用您的个人帐户或为每个客人创建一个特殊帐户. 相关文章图片1tupian为什么您的计算机上的每个用户都应该拥有 ...
- 求每个店铺访问次数top3的访客信息
题目: 有50W个京东店铺,每个顾客访客访问任何一个店铺的任何一个商品时都会产生一条访问日志, 访问日志存储的表名为Visit,访客的用户id为user_id,被访问的店铺名称为shop,数据如下: ...
- 文章阅读统计php,WordPress博客统计文章阅读次数及访客数并刷访问数
需要插件和自己修改主题下面的foot.php代码. 步骤如下: 1.登陆到wp后台,鼠标移动到左侧菜单的"插件"链接上,会弹出子菜单,点击子菜单的"安装插件"链 ...
- 前端页面添加音乐插件
1.Aplayer搭配Metingjs音乐插件的使用 Aplayer和MetingJ的介绍 Aplayer官网文档:https://aplayer.js.org/#/ Metingjs官网文档:htt ...
- html 文章阅读次数,关于浏览次数和浏览次数缓存的问题
文章的浏览次数需要配合模板中的脚本实现,如模板中没有相应的脚本,系统不会记录浏览次数.使用脚本实现浏览次数的统计,是考虑到页面有可能生成静态HTML,如果只在访问文章的动态地址(如http://www ...
- Wordress博客添加音乐播放器插件
1.之前是使用Aplayer播放器来播放音乐,好看是好看但是要自己动手解决Pjax问题(就是页面跳转会使音乐重新播放) 2.接下来我介绍我发现的另一个音乐播放器 Floating Window Mus ...
- C#：万能表单+ajax实现网站文章阅读次数限制，若达到限制次数，则需付费购买文章（单篇文章）
网站后台创建万能表单,字段如图 html页面判断用户是否登录状态,参数传递ajax异步,成功或失败后的业务处理. //判断用户是否登陆 <script type="text/javas ...
最新文章
- 对Dev的GridControl/GridView控件进行分组并展开操作
- pytorch学习知识点总结
- 俄罗斯“指尖旋风”席卷南京
- springboot抑制log中的info信息
- java私有成员的访问_java – 使用私有成员或公共访问器的方法
- 不冲突的端口范围_网络中IP地址发生冲突故障怎么办
- P5068 [Ynoi2015]我回来了
- 《论文笔记》ROBUST MAP ALIGNMENT FOR COOPERATIVE VISUAL SLAM
- #ifndef #define #endif 和#pragma once的区别
- 也玩ASP.NET MVC 与 WebFroms 整合
- ios html清除缓存图片,iOS 清理文件缓存(示例代码)
- 软件项目建议书模板（免费）
- 【linux多线程】c++多线程的几种创建方式
- ActionBar隐藏app图标
- TensorFlow中的Shape如何理解
- 获取手机号码归属地工具类
- 【NLP】Words Normalization+PorterStemmer源码解析
- DOS命令：systeminfo
- 高德地图学习---在高德地图图层上使用google的卫星图
- 夜来风雨声，“路由协议”知多少？