希望可以添加音乐播放器功能

[moecasts]

参考插件 https://github.com/MoePlayer/hexo-tag-aplayer

[ikeq]

现在用这个插件没效果吗

[moecasts]

@ikeq 是的，由于是异步渲染的缘故，那个插件中 meting 功能监听的 DOMContentLoaded不会触发。

[ikeq]

hexo/_config.yml

aplayer:
  asset_inject: false

themes/inside/_config.yml

plugins:
  - https://unpkg.com/[email protected]/dist/APlayer.min.css
  - https://unpkg.com/[email protected]/dist/APlayer.min.js

亲测可行，只有一个问题，尚没有很好的机制销毁播放器（路由改变后）。

[ikeq]

我后期实现一些自定义事件类型（包括但不限于 Angular 路由变化），之后就可以很方便做一些善后动作了，例如：

document.addEventListener('route:after', function({ type }) {
  // type: post | page | etc...
});

[moecasts]

@ikeq 请问您试了 meting 功能吗？原生功能是可以的，但是我试的 meting 功能貌似不行。

[ikeq]

这个插件提供的 meting 功能是基于 [email protected]，不好处理，但这个 MetingJS 已经到 2.x 了，基于 web components，很完美，所以只需要：

1. 使用 [email protected]；
2. patch 一下 hexo-tag-aplayer 的输出结果使之生成 [email protected] 的标记，具体为：

// themes/inside/scripts/patch.js (名字随意)
const meting = hexo.extend.tag.env.getExtension('meting')

if (meting) {
  hexo.extend.tag.env.removeExtension('meting')
  hexo.extend.tag.register('meting', function (args) {
    /** @type {string} */
    const html = meting.fn.call(hexo, args);

    if (html.trim().startsWith('<div')) {
      return '<meting-js ' + html.match(/[\w-]+\="[\w-]+"/g)
        .filter(i => i.startsWith('data-'))
        .map(i => i.substring(5))
        .join(' ') + '></meting-js>';
    }

    return html
  });
}

其他配置也是需要的：

# hexo/_config.yml
aplayer:
  asset_inject: false
  meting: true

# themes/inside/_config.yml
plugins:
  - https://unpkg.com/[email protected]/dist/APlayer.min.css
  - https://unpkg.com/[email protected]/dist/APlayer.min.js
  - https://unpkg.com/[email protected]/dist/Meting.min.js

Have fun!

[moecasts]

@ ikeq 测试成功了，感谢您的帮助 :)

如果可以内置该功能的话就更好了，音乐播放器功能还是很常用的。

[pinkpeachabc]

这个测试成功了，但是如果想要全局实现aplayer的吸底模式，却只能点击展开和图片上的播放键，展开后右侧的按钮失灵。像是被右侧的博客挡住了一样 不能点击 其他都是正常的