bucketzxm
0%

使用aplayer给hexo博客添加音乐

Posted on Edited on In , Disqus:

博客使用Hexo搭建，今天想给文章里面加上音乐链接，记录一下教程和修改部分。

Aplayer

Aplayer是一个html5的嵌入式播放器。可以使用官网提供的CDN进行引入。
因为我用的主题是hexo-next, 所以这里只写一下我简单的修改，其它的主题应该修改都类似。

  1. 在themes文件夹下找到hexo-theme-next， 这里就是存放next主题的地方。

  2. 在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>

  3. 修改hexo-theme-next/layout/_layout.swig， 引入上一步中创建的aplayer.swig。 在</body>前加入:

    '_third-party/aplayer.swig'

  4. 保存之后hexo g 重新生成所有文件。

如何使用

使用方法很简单， 在markdown格式的博文中，在需要插入音乐的地方加入以下div即可：

<div class="aplayer" data-id="29713168" data-server=”netease" data-type="song" data-autoplay=”true” data-mode=”circulation”></div>

参数配置如下：

  1. data-id: 歌曲/专辑/歌单对应的id。注意这里需要是歌曲原本的id,不是你自己歌单中点击后显示的。 （必须）
  2. data-server: 音乐平台， 大致支持以下几个，我只测了一下网易音乐和虾米音乐。（必须）
  • netease(网易云音乐)
  • tecent(qq音乐)
  • xiami(虾米音乐)
  • kugou(酷狗音乐)
  1. data-type:请求类型（必须）
    • song(单曲)
    • album(专辑)
    • playlist(歌单)
    • search(搜索)
  2. data-mode: 播放模式(可选)
    • random(随即)
    • single(单曲)
    • circulation(列表循环)
    • order(列表)
  3. data-autoplay: 自动播放(可选)
    • false
    • true

其它参数可以看官方文档

例子

验证没有失效