stellar主题使用meetingjs接入aplayer音乐播放器

总文章在这里

使用Hexo和Stellar搭建个人博客网站https://bxzdyg.cn/p/%E4%BD%BF%E7%94%A8Hexo%E5%92%8CStellar%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/

本篇文章是这篇大文章的抽离，因为本篇文章代码段落较长刚好拿来凑文章节数，且具有随时更新的特性，不好固定在一个文章里，也不能写在wiki里，否则无法被推荐。

很遗憾的告诉你，使用了metingjs的页面无法进行toc的选定（标题无法跳转），目前我不知道怎么解决

安装

1 2	yarn add hexo-tag-aplayer npm -i hexo-tag-aplayer --save

安装好对应的依赖后启用对应的语法

blog\_config.yml

1
2
3

# 音乐播放器
aplayer:
  meting: true

这时候你就可以使用 {% meting %}的语法连接你的歌单，或者本地音乐

一般使用

有关 {% meting %} 的选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置(这个不是background-color)

此处示范为连接我的网易云歌单

1	{% meting "8871126058" "netease" "playlist" "autoplay" "mutex:true" "listmaxheight:340px" "lrctype:0" "preload:none" "theme:#1cd0fd" "storagename:metingjs"%}

将它放在你需要放的位置

.aplayer .aplayer-list ol li.aplayer-list-light,
.aplayer .aplayer-list ol li:hover {
  font-size: small;
  font-weight: bold;
}

.aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 17px;
}

本站的aplayer音乐播放器追加样式，放在每次都导入的css文件里面，或者有用到aplayer播放器的页面

使用本地

待编辑……qwq(其实写了的，一定是不见了！)

全局使用

待编辑……qwq(其实写了的，一定是不见了！)

默认隐藏歌词

因为我个人比较喜欢听纯音乐，对歌词没有太多需求，而且可能你也不希望这个歌词出现，但是metingjs是很难让歌词这个部分消失的，即使你设置'lrctype:0',还是会存在一个部分影响你的心情。

下面提供了几种方法

方法一

方法二

// Aplayer默认关闭歌词
// 创建一个MutationObserver实例，用于监听DOM的变化
var observer = new MutationObserver(function (mutations) {
    // 查找页面中class为"aplayer-icon-lrc"的元素
    var lrcButton = document.querySelector(".aplayer-icon-lrc");
    // 如果找到了lrcButton
    if (lrcButton) {
        // 延迟1毫秒执行点击操作
        setTimeout(function () {
            lrcButton.click();
        }, 1);
        // 打印"success"到控制台
        console.log("success");
        // 断开MutationObserver实例，停止监听DOM的变化
        observer.disconnect();
    }
});
// 监听整个文档及其子节点的变化
observer.observe(document, { childList: true, subtree: true });

// Aplayer默认关闭歌词
function removelrc() {
  // 检测是否存在歌词按钮
  const lrcIcon = document.querySelector(".aplayer-icon-lrc");
  if (!lrcIcon) {
    return;
  }

  // 触发以后立刻移除监听
  observer.disconnect();

  // 稍作延时保证触发函数时存在按钮
  setTimeout(() => {
    // 以触发按钮的方式隐藏歌词，防止在点击显示歌词按钮时需要点击两次才能出现的问题
    lrcIcon.click();
  }, 1);

  console.log("success");
}

const observer = new MutationObserver((mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      removelrc();
    }
  }
});

const observerConfig = {
  childList: true, // 观察子节点的变化
  subtree: true, // 观察所有后代节点的变化
};

observer.observe(document, observerConfig); // 开始观察document节点的变化