本文出自我的个人主页文章:《♪ Music 如何在个人主页里插入音乐》
我的GitHub:https://github.com/youlookwhat
在自己的个人主页里插入喜欢的音乐有木有感觉很Cool呢,这里推荐四种形式:
- 1、MarkDown里插入单曲
- 2、MarkDown里插入歌单列表
- 3、MarkDown里插入歌单列表,宽度自适应且自动播放
- 4、新建菜单栏,以网页的形式插入
MarkDown里插入单曲
对应的字符串:
<object width="340" height="86" data="http://music.163.com/style/swf/widget.swf?
sid=445154960&type=2&auto=0&width=320&height=66"
type="application/x-shockwave-flash"></object>
注意删掉中间的换行符。
然后进入https://music.163.com/
搜索自己要添加的音乐然后找到id,替换即可。见下图:
MarkDown里插入歌单列表
对应字符串:
<object width="330" height="450" data="http://music.163.com/style/swf/widget.swf?
sid=108250019&type=0&auto=0&width=310&height=430"
type="application/x-shockwave-flash"></object>
与上面的步骤类似,找到要添加的歌单的id,更换即可:
MarkDown里插入歌单列表,宽度自适应且自动播放
border="0" width="600" height="330" src="http://music.163.com/outchain/player?type=0&id=572758458&auto=1&height=430">对应字符串:
<iframe frameborder="no" border="0" marginwidth="0"
marginheight="0" width="600" height="330" src="http://music.
163.com/outchain/player?
type=0&id=572758458&auto=1&height=430"></iframe>
操作一样,只是引入的字符串变了而已。
新建菜单栏,以网页的形式插入
这个有些许麻烦,以添加“云音乐”菜单为例:
主题_config.yml
配置
在主题文件夹的_config.yml
里,添加需要添加的网页
source
文件夹下
然后在主题文件夹的source
文件夹下,新建名为music.html
的网页
music.html
里的内容#
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
</head>
<body>
<div>
<object width="340" height="86" data="http://music.163.com/style/swf/widget.swf?sid=188900&type=2&auto=0&width=320&height=66" type="application/x-shockwave-flash"></object>
</div>
<hr />
<div>
<object width="330" height="450" data="http://music.163.com/style/swf/widget.swf?sid=108250019&type=0&auto=0&width=310&height=430" type="application/x-shockwave-flash"></object>
</div>
<hr />
<div>
<object width="330" height="450" data="http://music.163.com/style/swf/widget.swf?sid=19971812&type=0&auto=0&width=310&height=430" type="application/x-shockwave-flash"></object>
</div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="600" height="450" src="http://music.163.com/outchain/player?type=0&id=108250019&auto=1&height=430"></iframe></div></div></div>
</body>
</html>
里面内容的跟上面所述的基本一致,只是放在了网页而已,这种方式快捷,但是不易扩展,比如要添加图片不方便,建议以md文档的形式新建一个菜单栏。
更改菜单名
这样设置以后网页就可以正常开启了,只是菜单名默认为Menu.Music
,不太美观,为了和其他的名称效果一致,需要修改为对应的字符串。这时候在站点的配置文件里找到你之前设置过的显示的语言
然后找到对应的语言的文件夹内修改为自己想要的菜单名即可,示例请见:http://jingbin.me
End
是不是很简单呢,动起手来吧~
遇到什么问题可以联系我:
个人主页:http://jingbin.me
简书:Jingbin_