Hexo博客添加音乐插件

2019-12-03

此次集成的音乐插件是网易云官方插件, 博客为yilia主题, 为自己的博客添加一曲优美动听的背景音乐

网易云音乐: https://music.163.com/

1. 首先打开网易云音乐, 选择一首可以生成外链的歌曲, 例如这首: *wonderful tonight（Cover：方大同）

2. 点击生成外链播放器, 注意有些歌曲会有版权的限制

网易云为我们提供了iframe插件和flash插件共我们选择, 选择其中一种即可, 此处选择iframe插件

选择尺寸默认即可

播放模式: 自动播放

3. 复制生成外链接下的HTML代码

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

4. 打开yilia主题下的themes\yilia\layout_partial文件夹下的left-col.ejs文件

在下面代码中:

<nav class="header-nav">
	<div class="social">
		<% for (var i in theme.subnav){ %>
			<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a> 
         <%}%>
	</div>		
</nav>

插入如下代码:

<!-- 网易云音乐插件 -->
   <% if (theme.music && theme.music.enable){ %>
   	<div style="position:absolute; bottom:120px left:auto; width:85%">
       	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=1347027595&>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>
       </div>
<% } %>

插入之后:

插入时注意因为我加了一句中文注释 (如果不想加的话可以直接删除该注释), 可能会出现乱码问题, 可以把全文选中之后, 剪切, 更改编码方式为utf-8, 之后把原文粘贴上去即可

<nav class="header-nav">
	<div class="social">
		<% for (var i in theme.subnav){ %>
			<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
		<%}%>
    </div>
    <!-- 网易云音乐插件 -->
    <% if (theme.music && theme.music.enable){ %>
    	<div style="position:absolute; bottom:120px left:auto; width:85%">
        	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=1347027595&>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>
        </div>
	<% } %>
</nav>

我在此处加入了一些样式上的修改, 如果不喜欢的话也可以直接把音乐外链接生成的HTML代码直接放到合适的位置即可

效果如图:

5. 打开yilia主题下的themes\yilia\文件夹下的_config.yml文件

修改如下配置:

# 网易云音乐插件
music:
  enable: true
  # 网易云分享的ID
  id: 1077408
  autoplay: false  
  # 是否开启自动播放

以上就完成了yilia主题集成网易云音乐的播放插件

本文作者： 夏虫语冰
发布时间： 2019-12-03
最后更新： 2019-12-04
本文标题： Hexo博客添加音乐插件
本文链接： https://shiyongxu.github.io/2019/12/03/Hexo博客添加音乐插件/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！