hexo增加aplayer音乐播放器及valine评论

hexo增加aplayer音乐播放器及valine评论

本文介绍在hexo博客中增加一个音乐播放器界面,可以放上自己喜欢的歌单;增加valine评论,使得每一篇文章都可留言评论。

aplayer音乐播放器

aplayer是一款HTML音乐播放器,具有美观的播放界面,被广泛的使用在各大平台样例展示 github

通过aplayer你可在你的博客中任意的添加喜欢的歌曲或者歌单
单曲


歌单

同时aplayer还提供模拟模式吸附模式,可以参考官方文档aplayer


配置教程

安装hexo-tag-aplayer插件

1
npm install --save hexo-tag-aplayer

添加MeingJS 支持
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
在Hexo配置文件_config.yml中添加

1
2
aplayer:
meting: true

使用
在想加入音乐播放器的博客文章中加入如下配置:

加入单曲:

1
{% meting "3986040" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

加入歌单:

1
{% meting "627070825" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

配置参数:

选项 默认值 描述
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 播放器风格色彩设置


valine评论

本来评论打算使用的是gitalk,可是在折腾了一段时间后,遇到一个错误一直没有解决,听闻valine挺好用的,故而转向valine,
并且整个配置过程挺简单的。

注册Leancloud
因为评论系统其实是放在Leancloud上的,首先需要去注册一个账号
点我注册
注册完以后需要创建一个应用,名字可以随便起,然后 进入应用->设置->应用key
获取你的appid 和 appkey 如图所示:

修改主题的_config.yml

1
2
3
4
5
6
7
8
9
10
valine:
enable: true
app_id: 你的appid
app_key: 你的appkey
notify: false #邮件提醒设置
verify: false #验证码设置
placeholder: ヾノ≧∀≦)o快来评论一下吧!
avatar: monsterid #头像设置
pageSize: 10
visitor: true

添加valine.ejs
/layout下创建/comment目录,在/comment下创建valine.ejs文件,在其中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<% if (!has_config('comment.app_id') || !has_config('comment.app_key')) { %>
<div class="notification is-danger">
You forgot to set the <code>app_id</code> or <code>app_key</code> for Valine. Please set it in <code>_config.yml</code>.
</div>
<% } else { %>
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
new Valine({
el: '#valine-thread' ,
notify: <%= get_config('comment.notify') %>,
verify: <%= get_config('comment.verify') %>,
app_id: '<%= get_config('comment.app_id') %>',
app_key: '<%= get_config('comment.app_key') %>',
placeholder: '<%= get_config('comment.placeholder') %>'
});
</script>
<% } %>

修改article.ejs文件
在article文件最后添加如下代码:

1
2
3
4
5
6
7
8
<% if (!index && has_config('comment.type')) { %>
<div class="card">
<div class="card-content">
<h3 class="title is-5 has-text-weight-normal"><%= __('article.comments') %></h3>
<%- partial('comment/' + get_config('comment.type')) %>
</div>
</div>
<% } %>

至此,valine配置完成,执行hexo ghexo d更新

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×