为 Hexo-Redefine 主题启用 MetingJs

本教程适配 Redefine v2.8.2

最近把 Hexo 的主题切换到了 Redefine，用着还不错
看文档说支持 Aplayer 播放器，但是不支持 MetingJs，只能自己添加音频直链，挺麻烦的（而且也不支持页面内嵌 Aplayer 播放器）
于是我就花了点时间捣鼓了一下，实现效果还不错，但是移动端好像无法正常显示🤔
不知道咋回事，先将就用着吧，看有没有大佬能够完善一下或者看作者会不会加到主题里面了＞︿＜

引入 JS 文件

第一步当然是引入相关的 js 文件了，我的选择是把文件保存本地然后在主题里面以相对路径引用。
由于 Aplayer.min.js 主题里面已经有了，所以我们只需要把 Meting.min.js 下载下来就行了。

Meting.min.js: Meting.min.js

随后将 Meting.min.js 移至 theme/redefine/source/js/build/libs 即可。

然后新建一个文件，路径为 theme/redefine/layout/components/plugins/meting_js_only.ejs ，内容为

<%- renderJS('libs/APlayer.min.js') %>
<%- renderJS('libs/Meting.min.js') %>

起这个名字的原因是我仅想引入 Aplayer 和 Meting 的 js 文件而不直接创建一个 Aplayer 的容器，因为我不想搞那个全局吸底，我想弄的是页面内嵌播放器
页面内嵌播放器的格式跟全局吸底的不同

然后在同级目录里面创建一个名为 meting.ejs 的文件（路径： theme/redefine/layout/components/plugins/meting.ejs ），内容为：

<div id="meting-container"></div>
<%- renderJS('plugins/meting.js') %>

既然有纯 js 版的也就有创建容器版的，但是这个就只是创建容器而没有引入 js 了

Meting.js 之构建全局播放器

欸，上面说不是有引入 js/plugins/meting.js 吗？那文件呢？
你先别急，这不就来了吗
这个文件是用于 读取配置文件中的参数来构建一个全局吸底的播放器

此文件路径 themes/redefine/source/build/js/plugins/meting.js

meting.js 内容：

// 从主题配置中获取 meting 配置
const metingConfig = theme.plugins.meting;
console.log('Meting Config:', metingConfig);

// 初始化播放器配置的函数
function initMetingPlayer() {
    // 检查必选参数
    if (!metingConfig.id || !metingConfig.server || !metingConfig.type) {
        console.error('Missing required parameters:', {
            id: metingConfig.id,
            server: metingConfig.server,
            type: metingConfig.type
        });
        return;
    }

    // 创建 meting-js 元素
    const metingElement = document.createElement('meting-js');
    
    // 设置必选属性
    metingElement.setAttribute('server', metingConfig.server);
    metingElement.setAttribute('type', metingConfig.type);
    metingElement.setAttribute('id', metingConfig.id);

    // 根据播放器类型设置 fixed 或 mini
    if (metingConfig.playerType === 'fixed') {
        metingElement.setAttribute('fixed', 'true');
    } else if (metingConfig.playerType === 'mini') {
        metingElement.setAttribute('mini', 'true');
    }

    // 设置其他可选属性
    if (metingConfig.autoplay !== undefined) {
        metingElement.setAttribute('autoplay', metingConfig.autoplay);
    }
    if (metingConfig.theme !== undefined) {
        metingElement.setAttribute('theme', metingConfig.theme);
    }
    if (metingConfig.loop !== undefined) {
        metingElement.setAttribute('loop', metingConfig.loop);
    }
    if (metingConfig.order !== undefined) {
        metingElement.setAttribute('order', metingConfig.order);
    }
    if (metingConfig.preload !== undefined) {
        metingElement.setAttribute('preload', metingConfig.preload);
    }
    if (metingConfig.volume !== undefined) {
        metingElement.setAttribute('volume', metingConfig.volume);
    }
    if (metingConfig.mutex !== undefined) {
        metingElement.setAttribute('mutex', metingConfig.mutex);
    }
    if (metingConfig.lrcType !== undefined) {
        metingElement.setAttribute('lrc-type', metingConfig.lrcType);
    }
    if (metingConfig.listFolded !== undefined) {
        metingElement.setAttribute('list-folded', metingConfig.listFolded);
    }
    if (metingConfig.listMaxHeight !== undefined) {
        metingElement.setAttribute('list-max-height', metingConfig.listMaxHeight);
    }
    if (metingConfig.storageName !== undefined) {
        metingElement.setAttribute('storage-name', metingConfig.storageName);
    }

    // 获取并清空 meting-container 容器
    const apContainer = document.getElementById('meting-container');
    if (apContainer) {
        apContainer.innerHTML = '';
        // 将 meting-js 元素添加到容器中
        apContainer.appendChild(metingElement);
    }

    console.log('Created meting element:', metingElement.outerHTML);
}

// 确保 DOM 加载完成后再执行初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initMetingPlayer);
} else {
    initMetingPlayer();
}

注入主题文件

万事俱备，只欠东风。
现在我们只需要把这些组件给注入到主题文件里面就行了。
编辑布局文件 theme/redefine/layout/layout.ejs
将其修改为：

<!DOCTYPE html>
<html lang="<%= config.language %>">
<%- partial('components/header/head') %>
<body>
	<%- body %>
	<%- partial('components/scripts') %>
	<% if (theme.plugins.aplayer.enable) { %>
	<%- partial('components/plugins/aplayer') %>
	<% } %>
	<% if (theme.plugins.meting.enable) { %>
		<%- partial('components/plugins/meting_js_only') %>
	<% } %>
	<% if (theme.plugins.meting.global_sticky_enable) { %>
		<%- partial('components/plugins/meting') %>
	<% } %>
</body>
</html>

即可。

你可能会发现，在布局文件中有几个开关来控制是否引入这些文件，那么我们现在添加。
在 config.redefine.yml 添加一个配置项：（在 plugins 下，其实紧挨着 aplayer 配置项就行了，注意缩进）

meting: # MetingJs相关配置
  enable: true # 是否全局注入Aplayer.js与Meting.js
  global_sticky_enable: false # 是否启用全局吸底，不启用的话下面的配置项无效
  id: '1926144232' # 歌曲ID / 歌单ID / 专辑ID
  server: 'netease' # 音乐平台
  type: 'song' # ID对应的类型
  playerType: 'fixed' # 吸底 / 迷你 | fixed & mini 
  preload: 'auto' 
  loop: 'all'
  theme: '#4586F3'

更多配置项可前往 Github 查看：Option

OK，大功告成。你现在可以使用 hexo s 预览你的播放器效果了。

我只是想在页面中插入播放器

差点忘了这一茬。

如果你只希望在页面中插入播放器的话（而非全局吸底），那么其实可以这样

先引入 JS 文件，将 Meting.min.js 移至 theme/redefine/source/js/build/libs
编辑布局文件，theme/redefine/layout/layout.ejs，修改为

<!DOCTYPE html>
<html lang="<%= config.language %>">
<%- partial('components/header/head') %>
<body>
<%- body %>
<%- partial('components/scripts') %>
<% if (theme.plugins.meting.enable) { %>
    <%- renderJS('libs/APlayer.min.js') %>
    <%- renderJS('libs/Meting.min.js') %>
<% } %>
</body>
</html>

此处我把主题原本的 Aplayer 相关给删了，如果有需要可以加回来

在 config.redefine.yml 添加一个配置项：（在 plugins 下，其实紧挨着 aplayer 配置项就行了，注意缩进）
1
2
meting:
enable: true

插入格式为

<meting-js
	server="netease"
	type="song"
	id="5221167">
</meting-js>

效果：

Never Gonna Give You Up - Rick Astley

作词 : Stock Aitken Waterman

作曲 : Stock Aitken Waterman

We're no strangers to love (我们对爱已不陌生)

You know the rules and so do I (你我都知道规则)

A full commitment's what I'm thinking of (我打算给予你满心承诺)

You wouldn't get this from any other guy (你从别人那里可得不到)

I just wanna tell you how I'm feeling (但是我只想告诉你我此时的心情)

Gotta make you understand (想让你理解)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会和你告别)

Never gonna tell a lie and hurt you (我永远不会用谎言伤害你)

We've known each other for so long (我们相识已久)

Your heart's been aching but (你一直很心痛)

You're too shy to say it (你却说不出)

Inside we both know what's been going on (我们都知道我们这样多久了)

We know the game and we're gonna play it (我们的游戏将一直进行)

And if you ask me how I'm feeling (如果你问我，我怎么想)

Don't tell me you're too blind to see (请不要给我说，你看不见)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会和你告别)

Never gonna tell a lie and hurt you (我永远不会用谎言伤害你)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会和你告别)

Never gonna tell a lie and hurt you (我永远不会用谎言伤害你)

(Ooh, give you up) (（哦，放弃你）)

(Ooh) (（哦）)

Never gonna give, never gonna give (我永远不会，永远不会)

(Give you up) (（放弃你）)

(oh) (（哦）)

Never gonna give, never gonna give (我永远不会，永远不会)

(Give you up) (（放弃你）)

We've known each other for so long (我们相识已久)

Your heart's been aching but (你一直很心痛)

You're too shy to say it (但你说不出)

Inside we both know what's been going on (我们都知道我们这样多久了)

We know the game and we're gonna play it (我们的游戏会一直进行)

I just wanna tell you how I'm feeling (我只想告诉你我此时的心情)

Gotta make you understand (想让你知道)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会向你告别)

Never gonna tell a lie and hurt you (我永远不会用谎言伤害你)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会向你告别)

Never gonna tell a lie and hurt you (我永远不会用谎言伤害你)

Never gonna give you up (我永远不会放弃你)

Never gonna let you down (我永远不会让你沮丧)

Never gonna run around and desert you (我永远不会抛弃你)

Never gonna make you cry (我永远不会让你哭)

Never gonna say goodbye (我永远不会向你告别)

00:00 / 03:32

1 Never Gonna Give You Up Rick Astley

更多使用方法可前往 Github 查看：Quick Start

Nickname

Website

0/500

OωO
|´・ω・) ノ
ヾ (≧∇≦*) ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ °ο°) ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ (´･･｀｡) ノ "
(ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;) っ
(,,´･ω･)ﾉ"(´ っ ω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)

😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣

颜文字
Emoji
Bilibili

0 comments

No comment

为 Hexo-Redefine 主题启用 MetingJs

AI 摘要

引入 JS 文件

Meting.js 之构建全局播放器

注入主题文件

我只是想在页面中插入播放器