Hexo maupassant主题音乐小工具

maupassant主题音乐小工具实现blog背景音乐的功能

自己研究的哈，我完全没有学过js脚本，经过我2小时的摸索，我发现可以在侧边栏添加音乐小工具，实现背景音乐的效果
灵感来源于官方Githup这句话：https://www.haomwei.com/technology/maupassant-hexo.html#功能配置

widgets - 选择和排列希望使用的侧边栏小工具。

效果图：

打开网页云音乐寻找外链播放器代码
随便搜索一首歌，我这里用小跳蛙

1
2

#网易云音乐HTML代码,把这段代码放到music.jade最下面
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=371362&auto=1&height=66"></iframe>

1 2	$ pwd Hexo_Blog/themes/maupassant/layout/_widget

#创建音乐侧边栏脚本
$ touch music.jade
$ cat music.jade
.widget
  .widget-title
    i(class='fa fa-external-music')= ' ' + __('music')
  - for (var i in theme.music)
    ul
    a(href='#{theme.music[i].url}' title='#{theme.music[i].title}' target='_blank') #{theme.music[i].title}
#网易云音乐HTML代码
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=371362&auto=1&height=66"></iframe>

因为上面一个js脚本用到了music字段(我不懂js脚本，姑且这样称呼吧)，“+ __(‘music’)”，这里的music字段是调用下面的配置文件中的music字段

#添加侧边栏标签
$ pwd
Hexo_Blog/themes/maupassant
$ cat languages/zh-CN.yml
reading_label: 正在查看 %s 下的文章
blog: 博客
albums: 相册
categories: 分类
tags: 标签
archive: 归档
links: 链接
about: 关于
recent: 最新文章
next: 下一页
previous: 上一页
notitle: 无题
blogroll: 友情链接
music: 音乐   #添加music字段汉字翻译
history: 历史
rss: 订阅
guestbook: 留言
home: 首页
recent_comments: 最近评论
Readmore: 阅读更多
belongsto: 分类于
contents: 文章目录
shareto: 分享到

#在主题配置文件_config.yml中添加侧边栏工具music，在这里配置了才表示启用这个工具
$ pwd
Hexo_Blog/themes/maupassant
$ head -39 _config.yml | tail
widgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.
  - search
  - category
  - tag
  - recent_posts
  - recent_comments
  - links
  - music    #添加music工具
music:

1
2
3

$ hexo clean    #修改配置文件后需要清空缓存，否则可能修改无效
$ hexo g
$ hexo d

本文出自”Jack Wang Blog”：http://www.yfshare.vip/2017/02/16/Hexo-maupassant主题音乐小工具/