分单曲嵌入和歌单嵌入两种方案,本文一并同时实现!
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为主。