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

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

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

效果图

image

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

image

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
1
2
3
4
5
6
7
8
9
10
11
#创建音乐侧边栏脚本
$ 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字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#添加侧边栏标签
$ 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: 分享到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#在主题配置文件_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主题音乐小工具/