工具使用--第3节 HEXO美化之添加虾米音乐播放器

先看看效果图：

1. 获取播放器链接

我用浏览器打开虾米播播网址：
[http://www.xiami.com/widget?widget_from=42036317]

这里可以制作三款应用，分别是歌曲播放器列表，唱片墙，歌曲播放器（单曲）；这些都可以，这里只介绍第一种歌曲播放器列表。
点击下方的立即制作，进入制作页面：

自行添加音乐，然后下面就会出现播放器的代码：

我们复制中间的HTML代码；

2. 添加到NEXT主题

进入NEXT主题目录，如下图路径（\themes\next\layout_custom）：

我们以记事本的方式打开该目录下的sidebar.swig文件，这就是NEXT主题的侧边栏文件，打开之后应该是空白文件，我们把上面复制的HTML代码粘贴到这里面就好了；

3. 生成部署

在hexo的根目录下运行：

hexo s -g

生成网站并运行网站，如图所示：

接下来我们打开http://127.0.0.1:4000/就能看到我们添加的音乐播放器：

你也可以运行

hexo d -g

来将网站部署到github上，效果相同；
具体效果可以打开我的个人博客来看看:http://amuuncle.site/

项目源码可以访问我的码云

>>>我的私人博客<<<

工具使用--第3节 HEXO美化之添加虾米音乐播放器相关推荐

Hexo全局添加APlayer音乐播放器
本人博客相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具基于 Yilia 主题全局添加 APlayer 音乐播放器编辑文件 hexo-t ...
手把手教你做音乐播放器（八）桌面小工具（上）
第8节桌面小工具桌面小工具是可以放置在主界面的.快速控制应用的小助手.例如我们的音乐小工具,它可以帮助用户在桌面上就完成音乐的暂停.播放.切换等操作,而不需要启动应用本身. 在安卓系统中,我们也常 ...
【Android工具】高端DLNA音乐播放器Hi-Fi Cast 来自play
好久没分享安卓手机上好用的应用了,今天分享一个DLNA音乐播放器,这款软件不仅界面高大上,重点是他支持DLNA功能,可以实现随时播放音乐,而不占用设备的存储空间(只占用一个设备的存储空间) 说到DLN ...
第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
linux作为生产力工具_适用于Linux的顶级音乐播放器，可保护隐私的社交媒体替代品，打印技巧，生产力工具等
linux作为生产力工具上周,凯文·桑尼(Kevin Sonney)的开源工具系列受到读者的欢迎,有关建立敏捷团队 ,保护隐私的社交媒体替代品以及Linux的开源音乐播放器的文章也受到了读者的欢迎. ...
cantata测试工具_我如何构建和维护开源音乐播放器Cantata
cantata测试工具这是与开发和维护开源音乐播放器的开发人员进行的一系列对话的第三部分. Craig Drummond是Cantata的开发者和维护者, Cantata是一种开源音乐播放器,充当M ...
hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...
hexo博客插入音乐播放器
搭建好自己的博客之后,想要在博客中添加音乐播放器.需要hexo-tag-aplayer插件. 使用Git Bash进入本地hexo的文件夹.输入以下命令(异常或网络太慢可以考虑将npm换成cnpm) ...
Hexo主题插入音乐之aplayer音乐播放器
原文首发自:https://wiki.hushhw.cn/posts/a84d1ef1.html 今天折腾的点是给博客中插入音乐,找到的具体可行的方案有: 使用音乐平台提供的插件体验很差使用hex ...