Hexo博客中插入音乐

96
星月程风
0.2 2017.04.22 19:53* 字数 364

博客原文

hexo添加音乐目前接触到的有两种方案:

  1. 在官方网站获取外链,比如网易云音乐
  2. 自己生成外链,插入文章

对于方案一,在使用过程中,遇到的问题就是 很多音乐由于版权原因无法生成外链!!! 这个很尴尬,而且这个影响网站的SEO,逼格也不够高。

无奈之下选择方案二,本教程集中阐述方案二!!

经过使用总结,其实方案二还是很不错的!甚至胜过方案一!!


下面我就隆重介绍一款html5音乐播放器:Aplayer。把Aplayer加入hexo需要用到hexo-tag-aplayer插件。

切换到hexo目录,运行:

npm install --save hexo-tag-aplayer

安装完成后,在需要添加音乐的地方加上:

{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

hexo d --g之后就会出现你想要的音乐啦!

这里我把音乐和专辑封面添加到七牛上,加载速度嗖嗖的。

如果你想加入歌单,把上面的代码换成下面代码就行,参数的用法可以参照插件的使用说明。

{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "平凡之路","author": "朴树","url": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.mp3","pic": "https://ogd99kckh.qnssl.com/1.jpg","lrc": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.txt"},{"title": "野子","author": "苏运莹","url": "http://og9ocpmwk.bkt.clouddn.com/01%20%E9%87%8E%E5%AD%90.m4a","pic": "http://og9ocpmwk.bkt.clouddn.com/%E9%87%8E%E5%AD%90.jpg","lrc":"https://ogd99kckh.qnssl.com/%E9%87%8E%E5%AD%90.txt"}]}{% endaplayerlist %}

当然,Aplayer的作者还有一款html5的视频播放器,叫Dplayer,对应有一款hexo的插件,叫hexo-tag-dplayer,有需求的可以去看看,用法都差不多。

瞎折腾
Web note ad 1