Hexo全局添加APlayer音乐播放器

最新推荐文章于 2025-06-06 09:00:18 发布

Mr Han2

最新推荐文章于 2025-06-06 09:00:18 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js html node.js

本文链接：https://blog.csdn.net/qq_27439819/article/details/105011943

本文档详细介绍了如何在基于Yilia主题的Hexo博客中全局添加APlayer音乐播放器，包括配置Yilia主题，解决与相册功能冲突的问题，以及注意事项，如本地音乐资源在GitHub上的使用限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人博客

基于 Yilia 主题全局添加 APlayer 音乐播放器

编辑文件 hexo-theme-yilia/layout/_partial/left-col.ejs ，在文件的末尾追加以下代码；其中歌曲的歌词文件、封面图片、URL都可以从通过音乐直链搜索工具获取，有些音乐由于版权得问题，个人建议还是通过下载到本地比较好。当然如果你的网站是部署再github上就不建议使用本地音乐，会存在卡顿的情况。如果是放在云服务器上，直接下载到本地。提示，如果下面的代码不能将APlayer播放器固定到理想的页面位置，可自行修改 div 标签的样式和 APlayer 的 fixed 参数值。

<% if(theme.aplayer.enable) {
   
    %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
// 这里div的样式是笔者自己修改过的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div>
<div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
<script>
  const ap = new APlay