---
layout:     post
title:      添加网易云音乐插件
subtitle:   网易云音乐代码实现方法
date:       2019-09-16
author:     Duter2016
header-img: img/post-bg-ios10.jpg
catalog: true
tags:
    - Blog
---

**分单曲嵌入和歌单嵌入两种方案，本文一并同时实现！**
## 1.网易云音乐单曲插件
在_includes目录下创建cloud-music.html，具体代码如下：

```
{% raw %}
<!-- cloud music -->
<!-- 单曲嵌入， auto=1 可以控制自动播放与否，当值为 1 即打开网页就自动播放，值为 0 时需要访客手动点击播放 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
        src="//music.163.com/outchain/player?type=2&id={{ page.music-id }}&auto=0&height=66">
</iframe>
{% endraw %}
```

## 2.网易云音乐歌单插件
在_includes目录下创建cloud-music-full.html，具体代码如下：

```
{% raw %}
<!-- cloud music full -->
<!-- 歌单嵌入, auto=1 可以控制自动播放与否，当值为 1 即打开网页就自动播放，值为 0 时需要访客手动点击播放 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450
        src="//music.163.com/outchain/player?type=0&id={{ page.music-idfull }}&auto=0&height=430">
</iframe>
{% endraw %}
```

## 3.网易云音乐单曲及歌单同时嵌入
将整个cloud-music.html和cloud-music-full.html嵌入_layouts目录下的post.html，具体位置可以放在正文开头:
 在post.html找到类似如下代码段1和代码段2：
 
 代码段1
 ```
 <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">
 ```
 
 代码段2(把[]替换为{})
 
```
  [[ content ]]
```

在代码段1和代码段2之间添加如下代码(**把[]替换为{}**)：

```
                        <!-- 在正文开头添加网易云音乐插件 -->
		                <!-- cloud music -->
                                [% if page.music-id %]
                                   [% include cloud-music.html %]
                                [% endif %]
		    
		                 <br>
		    
		                <!-- cloud music full -->
                                [% if page.music-idfull %]
                                   [% include cloud-music-full.html %]
                                [% endif %] 
```
## 4.在博客文章中嵌入单曲或歌单

在需要添加音乐的博文的md文件开头的配置项添加music-id: xxxxxx 或music-idfull: xxxxxx ，即添加如下代码：

```
music-id: xxxxxx        # 网易云音乐单曲嵌入
music-idfull: xxxxxxx        # 网易云音乐歌单嵌入
```
“xxxxxxx”填写网易云单曲或歌单生成外链播放器的曲目或歌单的具体id，两个id只填一个或两个都填都可以。  

添加完整后为：

```
---
layout:     post   				    # 使用的布局（不需要改）
title:      My First Post 				# 标题 
subtitle:   Hello World, Hello Blog #副标题
date:       2019-09-16 				# 时间
author:     Duter2016	    		# 作者
header-img: img/post-bg-2019.jpg 	#这篇文章标题背景图片
catalog: true 						# 是否归档
music-id: 1359xxxxxx        # 网易云音乐单曲嵌入
music-idfull: 293xxxxxxx        # 网易云音乐歌单嵌入
tags:								#标签
    - 生活
---
```

OK！使用愉快！

### PS.补充一个Aplayer实现方法

使用Aplayer这个方法是“罗莎之鹰”建议的。这个方法可以使版权歌曲在外链页面也能正常播放。

实现上，使用了[Aplayer项目](https://github.com/MoePlayer/APlayer)和[MetingJS项目](https://github.com/MoePlayer/hexo-tag-aplayer)。在jekyll上的代码实现，参考[MetingJS](https://github.com/MoePlayer/hexo-tag-aplayer)项目页面。

目前本站单曲是网易官方原代码和Aplayer混用，歌单以Aplayer为主。