Open moecasts opened 4 years ago
现在用这个插件没效果吗
@ikeq 是的,由于是异步渲染的缘故,那个插件中 meting
功能监听的 DOMContentLoaded
不会触发。
aplayer:
asset_inject: false
plugins:
- https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css
- https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js
亲测可行,只有一个问题,尚没有很好的机制销毁播放器(路由改变后)。
我后期实现一些自定义事件类型(包括但不限于 Angular 路由变化),之后就可以很方便做一些善后动作了,例如:
document.addEventListener('route:after', function({ type }) {
// type: post | page | etc...
});
@ikeq 请问您试了 meting 功能吗?原生功能是可以的,但是我试的 meting 功能貌似不行。
这个插件提供的 meting 功能是基于 MetingJS@1.x,不好处理,但这个 MetingJS 已经到 2.x 了,基于 web components,很完美,所以只需要:
// 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
}); }
其他配置也是需要的:
```yml
# hexo/_config.yml
aplayer:
asset_inject: false
meting: true
# themes/inside/_config.yml
plugins:
- https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css
- https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js
- https://unpkg.com/meting@2.0.1/dist/Meting.min.js
Have fun!
@ ikeq 测试成功了,感谢您的帮助 :)
如果可以内置该功能的话就更好了,音乐播放器功能还是很常用的。
这个测试成功了,但是如果想要全局实现aplayer的吸底模式,却只能点击展开和图片上的播放键,展开后右侧的按钮失灵。像是被右侧的博客挡住了一样 不能点击 其他都是正常的
参考插件 https://github.com/MoePlayer/hexo-tag-aplayer