博客使用Hexo搭建,今天想给文章里面加上音乐链接,记录一下教程和修改部分。
Aplayer
Aplayer是一个html5的嵌入式播放器。可以使用官网提供的CDN进行引入。
因为我用的主题是hexo-next, 所以这里只写一下我简单的修改,其它的主题应该修改都类似。
在themes文件夹下找到hexo-theme-next, 这里就是存放next主题的地方。
在
hexo-theme-next/layout/_third-party
文件夹下存放着各种第三方插件的模板。在_third-party/ 下创建
aplayer.swig
模板文件在aplayer.swig中加入以下两行
<scripts>
引入aplayer,如果出现问题可能是因为player.js需要在jquery后引入, 可以查看自己对应的主题是否用了jquery<script src="https://cdn.bootcss.com/aplayer/1.6.0/APlayer.min.js"></script>
<script src="https://api.i-meto.com/music/player.js"></script>
修改
hexo-theme-next/layout/_layout.swig
, 引入上一步中创建的aplayer.swig。 在</body>
前加入:'_third-party/aplayer.swig'
保存之后
hexo g
重新生成所有文件。
如何使用
使用方法很简单, 在markdown格式的博文中,在需要插入音乐的地方加入以下div
即可:
<div class="aplayer" data-id="29713168" data-server=”netease" data-type="song" data-autoplay=”true” data-mode=”circulation”></div>
参数配置如下:
- data-id: 歌曲/专辑/歌单对应的id。注意这里需要是歌曲原本的id,不是你自己歌单中点击后显示的。 (必须)
- data-server: 音乐平台, 大致支持以下几个,我只测了一下网易音乐和虾米音乐。(必须)
- netease(网易云音乐)
- tecent(qq音乐)
- xiami(虾米音乐)
- kugou(酷狗音乐)
- data-type:请求类型(必须)
- song(单曲)
- album(专辑)
- playlist(歌单)
- search(搜索)
- data-mode: 播放模式(可选)
- random(随即)
- single(单曲)
- circulation(列表循环)
- order(列表)
- data-autoplay: 自动播放(可选)
- false
- true
其它参数可以看官方文档
例子
验证没有失效