Hexo-QQ音乐排行-Netlify CMS

小城故事

发布于 2023-02-27 16:17:57

1K0

文章被收录于专栏：XC's Blog 日常笔记XC's Blog 日常笔记

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`

配置

\_config.butterfly.yml`或者`\themes\butterfly\_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)文档中加入

# 配置参考文档：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)文档中加入

# 配置参考文档：https://github.com/MoePlayer/hexo-tag-aplayer#meingjs-support-new-in-30
# 音乐列表ID：8037641642（必填）
# 服务：tencent（必填）
# 类型：playlist（必填）
{% meting "8037641642" "tencent" "playlist" %}

如何在整站配置？

修改文件themes\butterfly\layout\includes\layout.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://d33wubrfki0l68.cloudfront.net/5997a40576f3beca7bbbd86fe79a795e9d520d8e/87f88/themes/screenshots/landscape.png
meting: true # 配合使用 !page.meting 
---

{% meting "8037641642" "tencent" "playlist" "theme:#f7630c" "storagename:QQ新歌排行榜" %}

还有一种整站配置方法

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来做到这一点。

首先，我们来了解一下配置完之后可以做到哪些事情？

在线新建，编辑，预览，删除博客文章
支持文章草稿，工作流
支持对博客图片的管理
支持在线修改博客配置，例如对首页顶部图的修改，友链的修改

🎈 图片预览

配置完的界面

在线对文章进行编辑，修改

工作流

对媒体资源的管理

对其他页面的修改

在线修改博客首页、文章页、归档页等页面的顶部图

在线添加、编辑友链页面

🔗 在线演示

为了更加直观，做了一个已经配置完毕的博客，你可以在线体验上述功能 👉点我查看

📃 简单说明

下面我将会以hexo+fluid 主题做演示，并配置fluid 主题的友链功能，达到在线编辑预览友链的目的，但此方法不仅仅只适用于fluid 主题的友链功能，其他各类主题也可以通过此方法达到在线修改配置的目的，只要你配置完成，几乎可以修改所有配置项。包括但不限于以下类型的文件yml、yaml、toml、json、md、markdown、html具体请查看 👉Netlify cms文档。

🔧 具体配置

Netlify cms使用的前提条件是你必须将博客部署到Netlify上。因为网上有很多部署教程，这里不再重复。

具体可以查看：

👟 准备工作

在部署完成后，你需要开启Identity

进入设置中

将Registration preferences修改为Invite only此项为是否开启注册，默认是开启注册。修改为Invite only后表示仅受邀请的用户可以注册，当然此项你可以在自己注册完毕之后再行修改。

下滑找到Git Gateway并开启。

至此准备工作完成

🎨 修改博客配置

在博客根目录中找到_config.yml并修改，这一步是跳过文件夹渲染，不然后面会出错 skip_render: admin/*Copy

在博客source文件夹中，创建admin文件夹，并新建两个文件index.html和config.yml

在index.html中添加以下内容

<!doctype html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="x-UA-Compatible" content="IE=Edge">
        <meta name="apple-mobile-web-app-status-bar-style" content="white" />
        <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
        <title>魔王の领地</title>
    </head>

    <body>
        <script defer="true" src="https://cdn.jsdelivr.net/npm/netlify-cms@2/dist/netlify-cms.js"></script>
    </body>

</html>Copy

在config.yml 中添加以下折叠内容

点我查看

请注意，这里我对fluid 主题进行了配置，例如banner_img、index_img等项目，不能正常使用请删除，如果你不是fluid 主题请根据实际情况对source\admin\config.yml配置进行修改，如果你和我一样是fluid主题，还需要将主题配置文件（/_config.fluid.yml）中的相对应的字段及其内容一并注释掉才能使其生效，类似于这样

并且创建source\_data\fluid_config.yml，将相关配置复制粘贴到里面（请根据此配置去主题配置文件中注释掉相对应的字段）

点我查看

请保持这样的格式，当然如果你对yml语法非常了解也可以自行修改 🤣

links:
  items:
    - title:  # 博客名称
      intro:  # 博客描述
      link:   # 博客链接
      avatar: # 博客logoCopy

🤣 完成

说一下为什么不推荐直接修改根目录下的_config.fluid.yml因为通过Netlify cms在线修改配置文件后，仅会保留你已经在source\admin\config.yml中配置的选项，没有配置的选项会默认清空，按主题默认配置进行，你当然可以将所有选项进行配置，但是没必要，所以推荐通过source\_data\fluid_config.yml仅复制粘贴需要的选项进行修改配置。

至此Netlify cms配置就算完成了，只要推送代码，等待片刻，通过你部署在Netlify上的域名，加/admin/即可访问你的博客后台。