本文章首发于语雀!
通过各种高科技功能同步到Hajeekn 的博客


本文章为以前文章的重制版本,会详细说明

开始前言

首先,这篇文章所写的教程适用于大部分主题和网站
本篇文章会提供 HTML/YML 引用方法,可以将 HTML 引用方法转换成你主题所提供的自定义 head 方法

开始

首先打开你的 Butterfly 配置文件
一般为以下几个名称

  • _config.butterfly.yml(存在于根目录下)
  • butterfly.yml(存在于 source/_data 目录下)
  • _config.yml(存在于主题目录下)

找到 inject
在 head 部分粘贴以下内容

1
2
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"  media="defer" onload="this.media='all'">
- <meting-js server='tencent' type='playlist' id='3813658180' fixed='true'></meting-js>

在 bottom 部分粘贴以下内容

1
2
- <script async src="https://cdn.jsdelivr.net/npm/aplayer"></script>
- <script async src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>

HTML 引入方法:
在 head 添加

1
2
3
4
5
6
7
8
9
10
11
12
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
media="defer"
onload="this.media='all'"
/>
<meting-js
server="tencent"
type="playlist"
id="3813658180"
fixed="true"
></meting-js>

在/body 前添加

1
2
3
4
5
<script async src="https://cdn.jsdelivr.net/npm/aplayer"></script>
<script
async
src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"
></script>

其中server='tencent' type='playlist' id='3813658180' fixed='true'可以自定义
自定义方法可参照 MetingJS 官方 README
https://github.com/metowolf/MetingJS/blob/master/README.md
水完了,溜了溜了

说明

如果你要达到本博客的刷新不断歌(除主动刷新或刷新 JavaScript 脚本)
需要开启 Pjax 功能

Thanks for you