Hexo博客中插入音乐

hexo 搭建的个人博客：Aileen-zl

1. 前言

正所谓没有逼格的博客不是好博客，而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器，当然也少不了这些吊炸天的功能。

2. 准备工作

准备工作当然是你得把自己的博客给搭建好了。在这里需要提一句，不管是搭建博客，还是后期写markdown的文章，都少不了打开各种格式文件的工具，要知道一个好的工具能让我们做事事半功倍。
修改主题文件里涉及到的各种文件，我都只使用了 sublime，这款软件不管是从界面简化程度、颜值、快捷键、还是软件大小都让我爱不释手，以至于最后我用markdown写博客的时候都在使用它，你可能会问：markdown写博客不需要边写边看渲染效果吗？其实这个渲染效果没必要随时看，只需要最后写好的时候看看，再对需要修改的地方进行微调就好，因为当非常熟悉了markdown的语法以及对应的实现效果之后，都不太去看最后渲染出来的效果。当然最初编写的时候我都是在csdn上写博客的时对markdown语法慢慢熟练起来，线下编写我也使用过MP、马克飞象等工具，但是顺手程度都感觉不如 sublime。如果实在想编写和渲染同时进行的话，可以推荐一款在线markdown编辑器：在线markdown编辑器优点我就不多说了，因人而异，自行体验。

3. 装插件

首先我们需要通过命令行安装以下两款插件（当然装一个就可以了，如果一个实现不了再装另一个），这两款插件我们都可以从hexo的官方网站上查询到：插件

hexo-tag-aplayer
hexo-tag-dplayer

安装方法：
在你本地安装博客的根目录下右击鼠标打开Git Bash ，运行如下两条命令来分别安装以上的两款插件：

npm install hexo-tag-dplayer
npm install hexo-tag-aplayer

运行之后如图所示：

此时你会在 blog/node_modules 目录下发现有两个aplayer 和 `dplayer 的文件夹。（这个blog文件是你在搭建博客时自定义命名的文件）

4. 添加音乐

在我的博客中我选择添加的是网易云音乐。首先我们打开网易云音乐的主页，然后搜索你喜欢的音乐，然后进入音乐的详情页面，点击 生成外链播放器 ：（如下图所示）

选择 iframe 插件，复制如下图所示的代码：

以我自己的博客为例吧：因为我想把这个播放器放在博客页面的左侧栏里，所以就把以上代码复制到主题文件夹下实现左侧栏的那个模板文件里，也就是 blog\themes\black-blue\layout\_partial\left-col.ejs 这个 left-col.ejs 文件，（需要值得注意的是，因为所使用的主题不同，可能文件也就不一样，但是大致原理就如刚才我所提到的：想放在哪个区域，就把代码复制到实现那块区域的模板文件里）。
为了使得页面更加美观，我给这块代码自定义加了 div，这样方便给播放器设定样式，只要稍微懂一点前端知识的筒子，都可以随心所欲的加 css样式。这里需要提一下，播放器设定好后，默认是：打开页面即播放音乐；如果不喜欢默认打开音乐的筒子，也可以通过把代码中的 auto=1 修改为 auto=0 来关闭它。

5. 实现效果

当然也可以进入我的博客去查看实现效果：Aileen-zl