Hexo-QQ音乐排行-Netlify CMS
- 在 aplayer 上面增加了页面跳转、刷新会接着上一句继续播放、页面关闭其它页面继续播放功能
- 正在播放音乐的页面关闭后，下次打开浏览器也会接着上一句继续播放
- 发布了 npm 包 aplayer2
准备
- 获取音乐列表ID
- 打开
QQ音乐PC客户端并登录，依次点击【音乐馆】【排行】【新歌榜】【批量操作】【全选】【添加到】【添加到新歌单】【输入歌单名并保存】 - 在左侧创建的歌单找到【歌单名】并单击，点击【分享】【复制链接https://c.y.qq.com/base/fcgi-bin/u?__=f346JO4t】
- 打开浏览器粘贴到地址栏https://y.qq.com/n/yqq/playlist/8037641642.html，音乐列表ID就是`8037641642`
- 打开
配置
代码语言：javascript复制_config.butterfly.yml`或者`themesbutterfly_config.yml
# Inject the css and script (aplayer/meting)（******此处修改******）
aplayerInject:
enable: true
per_page: true
CDN:
# aplayer（******此处修改******）
aplayer_css: //cdn.jsdelivr.net/npm/aplayer2/dist/APlayer.min.css
aplayer_js: //cdn.jsdelivr.net/npm/aplayer2/dist/APlayer.min.js
meting_js: //cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js在_config.yml最下面添加
# 音乐
aplayer:
meting: true
asset_inject: false在任意(.md)文档中加入
代码语言：javascript复制# 配置参考文档：https://github.com/MoePlayer/hexo-tag-aplayer#meingjs-support-new-in-30
# 音乐列表ID：8037641642（必填）
# 服务：tencent（必填）
# 类型：playlist（必填）
{% meting "8037641642" "tencent" "playlist" %}在_config.yml最下面添加
# 音乐
aplayer:
meting: true
asset_inject: false在任意(.md)文档中加入
代码语言：javascript复制# 配置参考文档：https://github.com/MoePlayer/hexo-tag-aplayer#meingjs-support-new-in-30
# 音乐列表ID：8037641642（必填）
# 服务：tencent（必填）
# 类型：playlist（必填）
{% meting "8037641642" "tencent" "playlist" %}如何在整站配置？
修改文件themesbutterflylayoutincludeslayout.pug
if !page.meting // !page.meting 加上后，可以单独页面关闭音乐；改为 page.meting ，可在页面中单独开启
div#aplayerBox(
class="aplayer aplayer-tag-marker meting-tag-marker"
data-id="8037641642"
data-server="tencent"
data-type="playlist"
data-mode="circulation"
data-autoplay="false"
data-mutex="true"
data-listmaxheight="340px"
data-preload="auto"
data-theme="#f7630c"
data-storagename="QQ新歌排行榜"
data-fixed="true"
)---
title: hexo-butterfly播放QQ新歌排行榜音乐
date: 2020-12-29
tags:
- music
categories:
- hexo
excerpt: 在 aplayer 上面增加了页面跳转播放、页面关闭其它页面继续播放功能、发布了 npm 包 aplayer2
cover: https://img.yuanmabao.com/zijie/pic/2023/02/27/r1vsbnu34m3.png
meting: true # 配合使用 !page.meting
---
{% meting "8037641642" "tencent" "playlist" "theme:#f7630c" "storagename:QQ新歌排行榜" %}
还有一种整站配置方法
代码语言：javascript复制inject:
bottom:
- <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>Hexo Netlify CMS
我们都知道，hexo是一个静态部署博客的框架，优点在于速度快，成本低（无需服务器），缺点在于繁琐，你每次更新文章都需要去改代码，再部署推送，修改配置也是如此，你不能像WordPress一样直接在后台修改配置并使它生效。
不过有很多教程可以让你无需繁琐的部署，只管推送代码，通过GitHub Actions，travis-ci，vercel，Netlify等都可以便捷的进行博客的部署，只管写代码然后推送就好，类似的教程有非常多，在此就不再重复介绍。那么，我们是否可以在此基础上，更加便捷的进行静态博客的写作和管理？答案是可以的。
我们可以通过将博客部署到Netlify，并使用Netlify cms来做到这一点。
首先，我们来了解一下配置完之后可以做到哪些事情？
- 在线新建，编辑，预览，删除博客文章
- 支持文章草稿，工作流
- 支持对博客图片的管理
- 支持在线修改博客配置，例如对首页顶部图的修改，友链的修改
