/jekyll-now/ link-fin
#APlayer #MetingJS
#感谢 DIYgod
#网上很少涉及Jekyll引用Aplayer 或是 MetingJS 插件的， 有的也是用CDN。 这篇主要介绍将.js 文件安装在本地 以及在 .md 中的使用。
-
Aplayer 本地单曲 和 本地歌单 的两个插件应该能合二为一， 我差两个条件句。
-
MetingJS 本地歌单 的插件 还没写
-
iOS 6.1.3 浏览器不适配 Aplayer html歌词显示 和 MetingJS
APlayer
APlayer https://github.com/DIYgod/APlayer
# 代码 # https://aplayer.js.org/#/home
- 旧版 1.2.0 : https://cdn.jsdelivr.net/npm/aplayer@1.2.0/dist/APlayer.min.css
https://cdn.jsdelivr.net/npm/aplayer@1.2.0/dist/APlayer.min.js
- 新版 2 1.10.1 : https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
# 例子 # https://blog.nicelee.top/blog/2018/10/23/music-player/
在_includes目录下创建APlayer.html，具体代码如下：
<!-- require APlayer -->
<link rel="stylesheet" href="/ipa picture/css/APlayer.min.css">
<div id="player1" apname="{{ page.apname }}" apartist="{{ page.apartist }}" apurl="{{ page.apurl }}" apcover="{{ page.apcover }}" aplrc="{{ page.aplrc }}" class="aplayer1"></div>
<script src="/ipa picture/js/APlayer.min.js"></script>
<!-- APlayer 加载参数 -->
<script type="text/javascript">
var getDom1=document.getElementsByClassName("aplayer1");
for(var i=0;i<getDom1.length;i++){//遍历网页中所有播放器
var ap1 = new APlayer({
element: getDom1[i],
narrow: false,
autoplay: false,
showlrc: true,
lrcType: 3,
music: [{
name: getDom1[i].getAttribute("apname"),
artist: getDom1[i].getAttribute("apartist"),
url: getDom1[i].getAttribute("apurl"),
cover: getDom1[i].getAttribute("apcover"),
lrc: getDom1[i].getAttribute("aplrc")
}]
});
ap1.init();
}
</script>
在_includes目录下创建APlayer-full.html，具体代码如下：
<!-- require APlayer -->
<link rel="stylesheet" href="/ipa picture/css/APlayer.min.css">
<div id="player2" apname1="{{ page.apname1 }}" apartist1="{{ page.apartist1 }}" apurl1="{{ page.apurl1 }}" apcover1="{{ page.apcover1 }}" aplrc1="{{ page.aplrc1 }}" apname2="{{ page.apname2 }}" apartist2="{{ page.apartist2 }}" apurl2="{{ page.apurl2 }}" apcover2="{{ page.apcover2 }}" aplrc2="{{ page.aplrc2 }}" class="aplayer2"></div>
<script src="/ipa picture/js/APlayer.min.js"></script>
<!-- APlayer 加载参数 -->
<script type="text/javascript">
var getDom2=document.getElementsByClassName("aplayer2");
for(var i=0;i<getDom2.length;i++){//遍历网页中所有播放器
var ap2 = new APlayer({
element: getDom2[i],
mini: false,
autoplay: false,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
lrcType: 3,
music: [
{
name: getDom2[i].getAttribute("apname1"),
artist: getDom2[i].getAttribute("apartist1"),
url: getDom2[i].getAttribute("apurl1"),
cover: getDom2[i].getAttribute("apcover1"),
lrc: getDom2[i].getAttribute("aplrc1")
},
{
name: getDom2[i].getAttribute("apname2"),
artist: getDom2[i].getAttribute("apartist2"),
url: getDom2[i].getAttribute("apurl2"),
cover: getDom2[i].getAttribute("apcover2"),
lrc: getDom2[i].getAttribute("aplrc2")
}
]
});
ap2.init();
}
</script>
在需要添加音乐的博文的md文件开头的配置项添加apxxxx: xxxxxx 或apxxx1: xxxxxx ，apxxx2: xxxxxx：
apname: 暧昧
apartist: 王菲
apurl: /ipa picture/6/王菲 - 暧昧.mp3
apcover: /ipa picture/6/王菲 - 暧昧.jpg
aplrc: /ipa picture/6/王菲 - 暧昧.lrc
apname1: 偿还
apartist1: 王菲
apurl1: /ipa picture/6/王菲 - 偿还.mp3
apcover1: /ipa picture/6/王菲 - 偿还.jpg
aplrc1: /ipa picture/6/王菲 - 偿还.lrc
apname2: 如风
apartist2: 王菲
apurl2: /ipa picture/6/王菲 - 如风.mp3
apcover2: /ipa picture/6/王菲 - 如风.jpg
aplrc2: /ipa picture/6/王菲 - 如风.lrc
APlayer 本地单曲插件
在需要嵌入音乐单曲的地方添加以下代码：
{% include APlayer.html %}
不要忘记在需要添加本地单曲的博文的md文件开头的配置项添加apxxxx: xxxxxx：
---
layout: post # 使用的布局（不需要改）
title: /jekyll-now/ link-fin # 标题
apname: 暧昧
apartist: 王菲
apurl: /ipa picture/6/王菲 - 暧昧.mp3
apcover: /ipa picture/6/王菲 - 暧昧.jpg
aplrc: /ipa picture/6/王菲 - 暧昧.lrc
---
APlayer-full 本地歌单插件
在需要嵌入音乐歌单的地方添加以下代码：
{% include APlayer-full.html %}
不要忘记在需要添加本地歌单的博文的md文件开头的配置项添加apxxx1: xxxxxx 以及 apxxx2: xxxxxx：
---
layout: post # 使用的布局（不需要改）
title: /jekyll-now/ link-fin # 标题
apname1: 偿还
apartist1: 王菲
apurl1: /ipa picture/6/王菲 - 偿还.mp3
apcover1: /ipa picture/6/王菲 - 偿还.jpg
aplrc1: /ipa picture/6/王菲 - 偿还.lrc
apname2: 如风
apartist2: 王菲
apurl2: /ipa picture/6/王菲 - 如风.mp3
apcover2: /ipa picture/6/王菲 - 如风.jpg
aplrc2: /ipa picture/6/王菲 - 如风.lrc
---
MetingJS
MetingJS https://github.com/metowolf/MetingJS
# 代码 # https://github.com/metowolf/MetingJS
- 旧版 1.2.0 : https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
- 新版 2 : https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
# 例子 # https://github.com/Duter2016/Duter2016.github.io
-include : https://github.com/Duter2016/Duter2016.github.io/blob/master/_includes/aplayer.html
_post : shttps://raw.githubusercontent.com/Duter2016/Duter2016.github.io/master/_posts/2021-03-01-2021%E5%B9%B43%E6%9C%88%E6%AD%8C%E5%8D%95%E6%AC%A3%E8%B5%8F.md
MetingJS 音乐单曲/音乐歌单 链接 本地单曲 四缺一插件 （缺少本地歌单插件）
1.CDN 下载Aplayer 的 min.css + min.js CDN 下载MetingJS 的 min.js
2.我进入了 /ipa picture/ 文件夹， 新建一个 css 文件夹， 把 min.css 放入 /ipa picture/css
我进入了 /ipa picture/js/ 文件夹 （之前为了预览pdf建立的js）, 把两个 min.js 放入 /ipa picture/js/
3.我进入了_includes/ 文件夹，新建一个MetingJS.html ：
<!-- require APlayer -->
<link rel="stylesheet" href="/ipa picture/css/APlayer.min.css">
<script src="/ipa picture/js/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="/ipa picture/js/Meting.min.js"></script>
<!-- MetingJS 加载参数 -->
<meting-js
server="{{ page.meserver }}"
type="{{ page.metype }}"
id="{{ page.meid }}"
autoplay="false"
theme="#CC0000"
list-max-height="340px"
preload="none">
</meting-js>
<meting-js
auto="{{ page.meauto }}">
</meting-js>
<meting-js
name="{{ page.mename }}"
artist="{{ page.meartist }}"
url="{{ page.meurl }}"
cover="{{ page.mecover }}"
lrc="{{ page.melrc }}">
</meting-js>
4.在需要嵌入音乐单曲/音乐歌单 链接 本地单曲 的地方添加以下代码：
{% include MetingJS.html %}
5.不要忘记在需要添加音乐单曲/音乐歌单 链接 本地单曲 的博文的md文件开头的配置项添加mexxxx: xxxxxx ：
---
layout: post # 使用的布局（不需要改）
title: /jekyll-now/ link-fin # 标题
meserver: netease # 音乐平台netease/tencent/kugou/xiami/baidu
metype: playlist # 音乐类型song/playlist/album/search/artist
meid: 6639500509 # 音乐song/playlist/album id
meauto: https://y.qq.com/n/yqq/song/002BzycH3SOe0Z.html # auto_options_music link, support: netease, tencent, xiami
mename: 爱与痛的边缘
meartist: 王菲
meurl: /ipa picture/6/王菲 - 爱与痛的边缘.mp3
mecover: /ipa picture/6/王菲 - 爱与痛的边缘.jpg
melrc: /ipa picture/6/王菲 - 爱与痛的边缘.lrc
---
诗词歌赋
青玉案 元夕 辛棄疾
東風夜放花千樹，更吹落，星如雨。
寶馬雕車香滿路，鳳簫聲動，玉壺光轉，一夜魚龍舞。
蛾兒雪柳黃金縷，笑語盈盈暗香去。
眾裏尋他千百度，驀然回首，那人卻在，燈火闌珊處。
增加了音乐栏
1.先进入_includes 新建一个music.html插件：
<!-- require APlayer -->
<link rel="stylesheet" href="/ipa picture/css/APlayer.min.css">
<div id="aplayer"></div>
<script src="/ipa picture/js/APlayer.min.js"></script>
<!-- APlayer 加载参数 -->
<!-- <script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer'),
preload: 'none',
lrcType: 3,
audio: {
name: '暧昧',
artist: '王菲',
url: '/ipa picture/6/王菲 - 暧昧.mp3',
cover: '/ipa picture/6/王菲 - 暧昧.jpg',
lrc: '/ipa picture/6/王菲 - 暧昧.lrc'
}
});
</script> -->
<!-- APlayer-full 加载参数 -->
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: false,
mini: false,
autoplay: false,
theme: '#b7daff',
loop: 'all',
order: 'list',
preload: 'none',
volume: 0.7,
mutex: true,
lrcType: 3,
listFolded: false,
listMaxHeight: 90,
storageName: 'aplayer-setting',
audio: [
{
name: '暧昧',
artist: '王菲',
url: '/ipa picture/6/王菲 - 暧昧.mp3',
cover: '/ipa picture/6/王菲 - 暧昧.jpg',
lrc: '/ipa picture/6/王菲 - 暧昧.lrc'
},
{
name: '偿还',
artist: '王菲',
url: '/ipa picture/6/王菲 - 偿还.mp3',
cover: '/ipa picture/6/王菲 - 偿还.jpg',
lrc: '/ipa picture/6/王菲 - 偿还.lrc'
},
{
name: '如风',
artist: '王菲',
url: '/ipa picture/6/王菲 - 如风.mp3',
cover: '/ipa picture/6/王菲 - 如风.jpg',
lrc: '/ipa picture/6/王菲 - 如风.lrc'
},
{
name: '爱与痛的边缘',
artist: '王菲',
url: '/ipa picture/6/王菲 - 爱与痛的边缘.mp3',
cover: '/ipa picture/6/王菲 - 爱与痛的边缘.jpg',
lrc: '/ipa picture/6/王菲 - 爱与痛的边缘.lrc'
}
]
});
</script>
2.再回到项目主页新建music.md 文件(可以参考about.md)：
---
layout: page
title: Music
permalink: /music/
---
{% include music.html %}
3.然后去_layouts文件夹 打开default.html 将：
<nav>
<a href="{{ site.baseurl }}/">Blog</a>
<a href="{{ site.baseurl }}/about">About</a>
</nav>
改为：
<nav>
<a href="{{ site.baseurl }}/">Blog</a>
<a href="{{ site.baseurl }}/about">About</a>
<a href="{{ site.baseurl }}/music">Music</a>
</nav>
Starry Night - Vincent van Gogh
周一见
Written on March 21, 2021