Hexo 添加多平台音乐

前言

本文主要从APlayer播放器和外链两种方式添加音乐

多平台音乐播放APlayer - 支持https

写在开始

之前因为搭建好这个站点后，音乐播放也是用aplayer试过，但是自从将站点全面https后，每次使用aplayer播放音乐，小绿锁就消失了，这点就很不好，于是就放弃了。但是最近看到一篇文章中成功的添加了https支持，果断在自己的小站上使用，确实很好用

开始

APlayer无疑是最好用的，不仅支持https，还支持众多主流音乐平台的音乐播放
需要引入下面两个js文件

1、APlayer.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>

2、Meting.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>

使用

在需要使用音乐的地方插入一下代码即可使用

<div class="aplayer" data-id="29732992" data-server="netease" data-type="song" data-autoplay="true"></div>

效果如下:

<div class="aplayer" data-id="29732992" data-server="netease" data-type="song" data-autoplay="true"></div>

其中参数如下, 加粗表示必须填写

data-id: 歌曲/专辑/歌单ID
data-server: 音乐平台，支持以下参数
	netease(网易云音乐)
	tencent(qq音乐)
	xiami(虾米音乐)
	kugou(酷狗音乐)
	baidu(百度音乐)
data-type: 请求类型，有以下参数
	song(单曲)
	album(专辑)
	playlist(歌单)
	search(搜索)
data-mode: 播放模式
	random(随机)
	single(单曲)
	circulation(列表循环)
	order(列表)
data-autoplay: 自动播放
	false
	true

添加网易云音乐-通过外链的方式

在知道了页面的结构之后，你就可以将你的播放器添加在页面的任意位置，开始我是放在了首页，然后发现一上来就自动播放太吵了，于是就放在了侧边栏，想要听得朋友可以手动点击播放，
我们可以直接在网易云音乐中搜索我们想要插入的音乐，然后点击生成外链播放器

然后可以根据你得设置生成相应的html代码，将获得的html代码插入到你想要插入的位置即可

如果选择放到主页的话，就放到_layout.swig文件中去就行了
我放在了layout/_macro/sidebar.swig 文件下

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=450795499&auto=1&height=66">
</iframe>

然后就可以在侧边栏看见我的播放器了~