添加网易云音乐插件

网易云音乐代码实现方法

作者: Duter2016 | 2019-09-16 | 阅读
「编辑」 「本文源码」

分单曲嵌入和歌单嵌入两种方案,本文一并同时实现!

1.网易云音乐单曲插件

在_includes目录下创建cloud-music.html,具体代码如下:


<!-- 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>

2.网易云音乐歌单插件

在_includes目录下创建cloud-music-full.html,具体代码如下:


<!-- 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>

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项目MetingJS项目。在jekyll上的代码实现,参考MetingJS项目页面。

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


版权声明:本文由 Duter2016 在 2019年09月16日发表。本文采用CC BY-NC-SA 4.0许可协议,非商业转载请注明出处,不得用于商业目的。
文章题目及链接:《添加网易云音乐插件》




  相关文章:

「游客及非Github用户留言」:

「Github登录用户留言」:

TOP