「hexo」开启音乐界面

git bash 依次执行以下命令

1
2
3

hexo new page music
npm install aplayer
npm install --save hexo-tag-aplayer

然后node_modules\hexo-theme-butterfly\layout\includes目录中修改layout.pug

head
  include ./head.pug
  link(rel="stylesheet" href="APlayer.min.css")
  div(id="aplayer")
  script(src="//i2.wp.com/cdn.jsdelivr.net/gh/radium-bit/res@master/live2d/autoload.js" async)
  script(src="//i2.wp.com/cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js" async)

创建aplayer.pug文件,复制以下代码

1
2
3

link(rel="stylesheet" type='text/css', href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css")
script(type='text/javascript', src="//i2.wp.com/cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js")
script(type='text/javascript', src="//i2.wp.com/cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js")

返回博客根目录，查看_config.yml在最后添加以下代码

#aplayer
aplayer:
  script_dir: js                      # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: css                         # Public 目录下样式目录路径，默认: 'assets/css'
  #cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  #style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  #meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  #meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  #externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同meting: true

最后,打开博客根目录\source\music\index.md使用以下格式

---
title: 我的歌单
date: 2022-10-26 16:14:00
cover: https://cdn.jsdelivr.net/gh/radium-bit/res@latest/Music.jpg
top_img: /image/top/default_top_img.jpg
type: "music"
---

<font color=#0c74d6 size=3 face="黑体">**无用的音乐**</font>

{% meting "2515921415" "netease" "playlist" %}