如何给自己的网站添加音乐播放器

FloatSheep

发布于 2022-04-25 17:21:17

2.4K0

发布于 2022-04-25 17:21:17

文章被收录于专栏：yetonwooyetonwoo

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

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

开始前言

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

开始

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

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

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

- <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 部分粘贴以下内容

- <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 添加

<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 前添加

<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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度