做了一晚上，终于把自己的Blog给部署上Github了，用的icarus Theme。作为一个爱听歌的肥宅没有点音乐怎么行呢，然后给自己的Blog加了个网易云播放器～
自己动手，丰衣足食
用网易云新建歌单外链的时候提示“由于版权保护，无法生成外链。”，于是乎看了生成外链与歌单的链接格式。
歌单链接
生成外链
然后就得出生成外链播放器的方法为
http://music.163.com/#/outchain/0/<playlist-id>/
照葫芦画瓢
查看icarus内widght的写法，然后来学习如何写一个部件吧～，部件的路径为themes/icarus/layout/widget，先看看最简单的links.ejs 和 recent_posts.ejs 吧～1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<% const links = get_config_from_obj(widget, 'links'); %>
<% if (links !== null) { %>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
<%= __('widget.links') %>
</h3>
<ul class="menu-list">
...
</ul>
</div>
</div>
</div>
<% } %>
1 | <% if (site.posts.length) { %> |
get_config_from_obj(widget, 'links');这函数是从config.yml从widget节点下获取links子元素，__('widget.links')是从languages中的语言文件拿出widget.links对应的语言变量。EJS的语法可以查看EJS docs，其他基础的不多作解释了～
看完两个部件的模板文件，得出部件的结构如下1
2
3
4
5
6
7
8<div class="card widget">
<div class="card-content">
<h3 class="menu-label"> <!-- 部件标题 -->
</h3>
<div> <!-- 小部件内容 -->
</div>
</div>
</div>
好了，确定结构后就开始敲代码吧！
先在themes/icarus/layout/widget做一个cloudmusic.ejs部件模板～1
2
3
4
5
6
7
8
9
10
11
12
13
14<% const playlistid = get_config_from_obj(widget, 'playlist-id'); %>
<% if (playlistid !== null) { %> <!-- 判断config.yml中有没有playlistid -->
<div class="card widget">
<div class="card-content">
<h3 class="menu-label">
<%= __('widget.cloudmusic') %> <!-- 获取语言文件 -->
</h3>
<!-- 网易云外链播放器 -->
<!-- style="width: 100%; height: 60vh;" 100%宽度，60vh高度 = 60%页面可视高度-->
<iframe id="cloudmusic" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%; height: 60vh;"
src="//music.163.com/outchain/player?type=0&id=<%= playlistid %>&auto=1&height=430"></iframe>
</div>
</div>
<% } %>
在zh-CN.yml添加上对应的翻译～（我找谷歌娘翻译好11种语言的网易云音乐了¯\_(ツ)_/¯）1
2
3
4
5
6
7
8
9...
widget:
follow: '关注我'
recents: '最新文章'
links: '链接'
tag_cloud: '标签云'
catalogue: '目录'
cloudmusic: '网易云音乐'
...
最后在_config.yml中添加上部件～1
2
3
4
5
6
7
8
9
10
11
12widgets:
-
...
-
# Widget name
type: cloudmusic
# Where should the widget be placed, left or right
position: right
# Netease music playlist id
playlist-id: '150560845'
-
...
最后hexo s运行本地服务器就看到在博客右边多了刚刚做的网易云小部件了～Icarus这个主题每个部件基本都是一个card的元素，可以说是管理部件模板什么的很方便了～
