Butterfly主题博客之添加相册和音乐页

一、插件的安装与配置

1.安装hexo-tag-aplayer插件

执行命令：

npm install --save hexo-tag-aplayer

2.配置插件

找到项目文件夹根目录下的 _config.yml文件，添加如下代码：

aplayer:
  meting: true
  asset_inject: false

之后打开 _config.butterfly.yml文件，进行修改，这是为了引入刚才下载的插件。

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

二、音乐页面

1.创建页面

如果还没有创建音乐页面，那就用以下命令创建：

hexo new page music

运行之后就会在source文件夹下生成一个music文件夹

打开music文件夹下的index.md文件，添加如下代码：

{% meting "17375390739" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

server：netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

type：song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。添加单曲选的歌曲，歌单选择playlist，可以自行尝试。

id：就是在网页版上自己歌单的ID号，但是需要注意的是歌单中不能包含VIP音乐，不然无法播放。建议使用网易云音乐。

有关 {% 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	播放器风格色彩设置

2.全局吸底Aplayer模式

在 _config.butterfly.yml文件中修改如下：

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="17375390739" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div>

其中里面的参数都可以根据自己需要进行修改

如果想切换页面时，音乐不会中断，就在_config.butterfly.yml文件中 pjax修改为true

pjax:
 enable: ture
 exclude:

3.效果展示

三、相册页面

1.创建页面

执行如下命令：

hexo new page Gallery

就会在项目文件夹的/source下生成/Gallery/index.md文件。

注意：”Gallery” 名字一定要跟之前创建的导航栏中的名字一样，不然无法跳转。

这时就可以点击首页导航栏中的“照片”进入，此刻还什么都没添加，所以只是空白页。

2.图库集合页

图库集合页相当于对照片进行分类的一个页面，在/Gallery/index.md中

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

这里面每个galleryGroup中设置的内容如下：

• name：图库名字
• description：图库描述
• link：链接到对应相册的地址
• img-url：图库封面的地址

也可以这样设置：

{% galleryGroup '壁纸' '好看的壁纸，侵删' '/Gallery/MyImages' https://my-blogimages.oss-cn-qingdao.aliyuncs.com/typora-image/20251030155451012.jpg %}

设置好之后如下图所示

3.图库子页面

点击上一个创建的图库集合页，就会跳转到这个页面，里面存放着各自分类下的照片。也跟之前一样，需要创建一个新的页面

hexo new page MyImages

但是现在/source/MyImages/index.md与/source/Gallery/index.md 是平级的，所以要将/MyImages整个文件夹复制到/Gallery里面去，这样就可以实现跳转了。

然后在/MyImages/index.md中进行设置：

{% gallery %}
![](https://my-blogimages.oss-cn-qingdao.aliyuncs.com/typora-image/20251030163939451.jpg)
{% endgallery %}

效果如下：