且听风吟

🕊️ gu~gu~gu

0%

Hexo 添加全局 APlayer 播放器

发表于 更新于 分类于 评论数： 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 3 分钟

介绍

hexo-tag-aplayer 是 APlayer 播放器的 Hexo 标签插件（现已支持 MetingJS），可以十分方便地在文章内插入音乐播放器。

配置

  • 此处未采用单文章插入方式，而改用整站加载方式。

找到\theme\next\layout\_layout.swig文件，将以下代码黏贴到body体内即可，如果你需要修改参数，点击此处查看

<body>
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
</body>
<!--如果将本体放在body里面，导致页面加载出现问题，请尝试放到body体后面-->
<div class="aplayer" 
	data-id="3778678" 
	data-server="netease" 
	data-type="playlist" 
	data-fixed="true"	
	data-order="random"
	data-volume="0.65"
	data-autoplay="false"   
	date-preload="auto"
	data-theme="#cc543a">
</div>

注意： 如果你使用上述代码，请以data-xxx格式书写参数名

优化

网易云音乐网页版底部的播放器，无论在网易云里如何跳转页面，只要还在当前标签页都是不重新加载的，这样就可以使正在播放中的音乐不随页面跳转中断。

在我们的博客中可以使用pjax实现迷你音乐播放器全站无刷新加载。

以下为NexT启用pjax功能：

  • 项目地址：https://github.com/theme-next/theme-next-pjax

  • 过程演示

    • 在博客根目录执行以下命令

      cd themes/next
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

    • 找到主题配置文件 → 搜索 pjax 设置为 true 即可

      # Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

    • 到此重新运行博客，切换页面，播放器歌曲已不再自动刷新

参考