利用Meting实现网页内插入音乐播放器 - 罗莎之鹰

YelonhimX commented 5 years ago

http://yelonhimx.wang/2019/11/08/metingAdd/

Duter2016 commented 5 years ago

我不是大佬！纯业余玩玩博客！

你在博客里涉及}{的代码前后加上{% raw %}和{% endraw %}就不会被Jekyll编译了。

试了你这个方法，果然有效！

你3.1的脚本放置方法，放在页头和页尾，会导致你全站的每一个页面都会加载涉及的三个脚本，多少会非使用音乐的页面对加载速度有点影响。你的3.1和3.2代码可以合并，然后一起放在你的Music.html文件里，也就是：

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
    server={{ page.server }}
    autoplay={{ page.autoplay }}
    type={{ page.type }}
    id={{ page.id }}
    auto={ page.url }}
    theme={{ page.theme }}
    >
</meting-js>

这样，涉及的脚本是否在页面加载，可以通过判断一个参数“id”是否存在，来决定是否加载。所以，你去掉一个参数Music: true//作为判断是否加入播放器的开关,你把处添加的代码改为：

<!--meting added -->
{% if page.id %}
{% include Music.html %}
{% endif %}

如果你填写了id:后的数字，就加载Music.html里的所有内容，不填写就不加载！

以上拙见，仅供参考！另，借用你的方法了，先表感谢了！

YelonhimX commented 5 years ago

@Duter2016 我不是大佬！纯业余玩玩博客！

你在博客里涉及}{的代码前后加上{% raw %}和{% endraw %}就不会被Jekyll编译了。

试了你这个方法，果然有效！

你3.1的脚本放置方法，放在页头和页尾，会导致你全站的每一个页面都会加载涉及的三个脚本，多少会非使用音乐的页面对加载速度有点影响。你的3.1和3.2代码可以合并，然后一起放在你的Music.html文件里，也就是：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
    server={{ page.server }}
    autoplay={{ page.autoplay }}
  type={{ page.type }}
    id={{ page.id }}
    auto={ page.url }}
    theme={{ page.theme }}
    >
</meting-js>
这样，涉及的脚本是否在页面加载，可以通过判断一个参数“id”是否存在，来决定是否加载。所以，你去掉一个参数Music: true//作为判断是否加入播放器的开关,你把处添加的代码改为：

{% if page.id %}
{% include Music.html %}
{% endif %}
如果你填写了id:后的数字，就加载Music.html里的所有内容，不填写就不加载！

以上拙见，仅供参考！另，借用你的方法了，先表感谢了！

谢谢您指点，互相学习，一起进步！

YelonhimX / YelonhimX.github.io

利用Meting实现网页内插入音乐播放器 - 罗莎之鹰 | Eagles of Rosa #16