admin 管理员组

文章数量: 887021

Hexo

效果预览：/

如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。 这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。
例如 ：
如果使用插件，在markdown中要这样写

{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

其会被渲染为

<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

1.安装音乐插件

安装插件

npm install --save hexo-tag-aplayer

在主题配置文件_config.yml中custom下引入插件依赖的js和css。

custom_js:- //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖- //cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js  #/APlayer依赖
custom_css:- //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

然后在网站的根目录下的配置文件_config.yml中填上以下代码：

# aplayer
aplayer:  meting: true  asset_inject: false

2.建立音乐页面

使用命令创建音乐界面，比如命名为playlist。

hexo new page playlist

打开网站根目录source\playlist\index.md根据hexo-tag-aplayer文档书写即可。
自建或者用别人的歌单.html#stat=y_new.profile.create_playlist.click&dirid=3 按照一下格式书写即可。

{% meting "7724497259" "tencent" "playlist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

有关

{% 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 播放器风格色彩设置
关于如何设置自建的 Meting API 服务器地址，以及其他 MetingJS 配置，请参考章节自定义配置

…更多参数可以参考Aplayer文档

3.添加音乐页面到导航菜单内即可

  menu:- { key: "音乐", link: "/playlist/", icon: "iconfont icon-music" }

本文标签： Hexo

版权声明：本文标题：Hexo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687850314h149075.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。