Hexo中常用插件的安装与使用

hexo-asset-image插件的安装与使用

为何引入该插件？

在我们没有安装相关插件的情况下，我们在博文中需要引入图片时，按照通常思维引入图片的正常路径是：图片所在的位置相对于博客网站根目录内的source文件夹的路径。但运行网站后发现无法正常显示图片，查询相关资料后了解到在博文中引入图片前，首先需要在博客网站根目录内的_posts文件夹下建立一个与博文文件同名的文件夹，例如博文文件的名称是hello-world.md，那么文件夹的名称就是hello-world；然后，把需要引用的图片就放在该文件夹下，例如图片的名称是hello.jpg；最后我们在博文中引用这张图片时这样书写：![](hello-world/hello.jpg)，但运行网站后发现还是无法正常显示图片，于是又经过查询发现正确引用路径应为![](hello.jpg)。如果熟悉 Markdown 语法，我们会发现这个引用路径有反常规。

这时，我们会有个疑问：为什么在引用图片的时候不需要加入图片所在文件夹的路径呢？

原来，这是因为Hexo在渲染的时候，会把博文文件hello-world.md按照时间渲染为 public/2020/01/01/hello-world下的index.html网页文件，而且会把对应文件夹下的静态资源，比如图片hello.jpg也拷贝到public/2020/01/01/hello-world下。

所以，我们在书写博文时，博文和图片虽然不在统一的文件夹下，但最终它们被渲染后，是处于同一个文件夹的，那么我们在博文中引用图片时，就得把它们当作在同一个文件夹来处理，即引用图片时去掉文件夹路径。

我们或许会觉得这样引用图片有点难受，这时我们可以引入hexo-asset-image插件来帮我们处理。

安装该插件并配置开启后，我们就可以在博文里按照常规引用方式来引用图片。

hexo-asset-image插件的工作原理

hexo-asset-image插件的工作原理很简单，实际上他是帮我们完成了一个字符串替换的流程，使我们在博文中引用图片时书写的正常路径转换为 Hexo 渲染时使用的路径。

hexo-asset-image插件的安装与使用步骤

第一步：修改博客网站的根配置文件_config.yml

1
2
3

#Writing

post_asset_folder: true  //由false改为true

第二步：在博客网站的根目录打开并运行Git控制台，键入命令如下

1

npm install hexo-asset-image --save

备注：等待一段时间后，再通过Git控制台键入hexo new "001.md"命令来生成博文文件时，我们会发现在/source/_posts文件夹内除了001.md文件还有一个同名的文件夹001。

第三步：在博文001.md中引入图片时,例如001.jpg，先把图片001.jpg复制到001这个文件夹中，然后在博文001.md中需要引入图片的位置按照Markdown语法格式输入：

1

![这是图片001](001/001.jpg)

第四步：检查有无出现错误，通过Git控制台键入命令hexo g生成博客页面后，进入public\2020\01\01\index.html文件中查看相关字段，发现html标签内的语句是<img src="2020/01/01/001/001.jpg">，而不是<img src="001/001.jpg>，说明图片路径转换正确，最后打开网页验证是否正确加载，一般情况下不会出现错误。

APlayer音乐播放器插件的安装与使用

写在前面

在个人的站点上，如果有音乐播放的功能，那么读者可以一遍阅读文章，一边欣赏音乐，是一件很愉快的事情。下面就以我的博客网站为案例，分享增加Aplayer音乐播放器插件的步骤。

安装步骤

第一步：打开GitHub上的APlayer下载地址，下载APlayer插件。

第二步：将下载好的APlayer插件压缩包解压到本地磁盘指定位置，把根文件夹内的dist文件夹复制到\themes\hexo-theme-icarus-master\source目录中（对应自己主题文件的位置，我的主题是icarus）。

第三步：打开dist文件夹，新建music.js文件并打开，粘贴如下代码。

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

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: false,
    autoplay: false,
    audio: [
      {
        name: "逆追风少年",
        artist: '吴奇隆',
        url: '../music/index/吴奇隆-追风少年.mp3',  //音乐文件的路径
        cover: '../music/index/zhuifengshaonian.jpg',  //音乐封面图片的路径，注意要适当修改图片分辨率
      },
      {
        name: '起风了',
        artist: '买辣椒也用券',
        url: '../music/index/买辣椒也用券-起风了.mp3',
        cover: '../music/index/qifengle.jpg',
      },
      {
        name: '白兰鸽巡游记',
        artist: '丢火车乐队',
        url: '../music/index/丢火车乐队-白兰鸽巡游记.mp3',
        cover: '../music/index/bailangexunyouji.jpg',
      }
    ]
});

备注：因为是我们的个人博客网站，音乐不易过多，3~4首即可。

第四步：到了这一步，APlayer音乐播放器有多种实现方式，常见的两种实现方式如下

（1）将APlayer音乐播放器放置在博客网站的右下角展示

修改\themes\hexo-theme-icarus-master\layout\layout.ejs的layout.ejs文件如下，放在</body>标签上方即可。

1
2
3
4
5
6
7

<!-- 音频播放 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
</body>
</html>

（2）通过Git控制台创建一个音乐播放页面，创建过程可以参考我的文章Hexo博客主题之Icarus的设置与美化（基础）里面的内容，然后将页面内容修改如下即可。

1
2
3
4
5

<!-- 音频播放 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

备注：通过Git控制台依次键入命令hexo clean->hexo g->hexo server打开博客网站即可查看效果。

APlayer音乐播放器插件的使用效果

点击这里即可查看

文章参考（1）：hqweay的个人博文

文章参考（2）：Hans在路上的个人博文