提升 hexo 的图片插入体验

摘要

对于习惯使用本地 Markdown 编辑器编辑博客，用 hexo 发布的用户。会碰到一个麻烦的问题，在发布前需要修改本地图片的引用链接。这样的操作，一方面修改链接增加了操作的步骤。另一方面修改链接后不方便本地浏览。因此为了解决这个问题，本文以 Typora 作为例子，提出保持插入本地图片，无需为发布再修改本地图片引用链接操作方法。步骤如下：

使用 hexo clean 命令清除缓存。
新建文件，复制下面代码段的代码到根目录下的 scripts 文件夹中。
修改 Typora 的插入图片规则为./images/。
设置 /source/_posts/images 软链到 /source/images/

前言

个人搭建博客网站是十分麻烦的，从前甚至从购买服务器安装操作系统开始，其中要碰到的麻烦不言而喻。hexo 和 github pages 的出现解决了这个问题。使得个人零成本，方便的建站。Markdown 的出现使得人们可以低成本的编写具有优良结构文章。而不必编写繁琐的 HTML。本文使用 Typora 作为例子，它是一款优秀的 markdown 编辑器。此外有名的 markdown 编辑器还有 Vnote，Marktext 等等。使用这些编辑器在插入本地图片时候，会按照用户给定的方式生成地址。但是这样生成的地址是难以在 hexo 中直接发布的，需要进行一定的修改，那么问题就来了。修改后的地址 markdown 编辑器中不显示图片，不方便后期修改。并且，每次发布都要修改是十分麻烦的，为了解决这个问题，提出了以下操作方法。

操作步骤

清理缓存

hexo 默认不对已经生成过 HTML 的 Markdown 文章，再生成一次 HTML。所以需要清理缓存。复制好的代码会修改，生成的 HTML。所以需要清除缓存一次。

1	hexo clean

复制代码

下面这代码依赖cheerio ，如果没有安装过使用npm install cheerio --save安装。复制下面代码段的代码到根目录下的 scripts 文件夹中新建 js 文件中（命名任意）。这段代码来自 hexo-asset-image 插件，笔者个人修改一部分。

'use strict';
var cheerio = require('cheerio');

hexo.extend.filter.register('after_post_render', function(data) {
    var config = hexo.config;
    var toprocess = ['excerpt', 'more', 'content'];
    for (var i = 0; i < toprocess.length; i++) {
        var key = toprocess[i];

        var $ = cheerio.load(data[key], {
            ignoreWhitespace: false,
            xmlMode: false,
            lowerCaseTags: false,
            decodeEntities: false
        });

        $('img').each(function() {
            if ($(this).attr('src')) {
                var src = $(this).attr('src').replace('\\', '/');
                if (src.slice(0, 7) === 'images/') {
                    $(this).attr('src', '/' + src)
                }
            }
        });
        data[key] = $.html();
    }
});

修改 Typora 的插入图片规则

在偏好设置->图片->复制到指定路径。修改 Typora 的插入图片规则为./images/。

软链接

设置 /source/_posts/images 软链接到 /source/images/。

原理和方法

yanyinhong 的文章 ^1 中提到了三种插入图片的方式，这三种不论是哪一种，都无法在本地实时预览，都需要在上传前修改本地图片的链接。第一种方法，把图片放入到/source/images文件夹中，在文件中/images/image name引用，可以在首页和文章观看。第二种方法，图片可以在文章出现，但不能在首页中出现。第三种方法，是 hexo 的插件语法，个人看法：这样破坏了 Markdown 文件的易读性。

应用场景最全面第一种方法。要让插入到图片保存到/source/images/中，可以将 Typora 的保存图片规则设置为插入到../images/，然后解决第二问题，规则为../images 生成的 img 的 src 属性也是../images ，而我们需要的是/images/image name的形式，使用脚本修改生成标签的属性，将上文的修改链接部分的代码修改如下。

1 2	if(src.slice(0,8) === '../images'){ $(this).attr('src',src.slice(2));

将上述操作完成后，在本地和云端都可以正常预览图片。然而将本地图片默认保存到上级目录并不符合一般人的习惯。并且 Typora 不能为文件夹单独配置图片插入规则。所以，通过软链接的方式将文章修改到本目录的 images。

总结

尽管操作步骤很多，对于新手也很容易出错。但是设置完成之后只需要按照平常的使用方法使用 Typora 就可以了。有点磨刀不误砍柴工的感觉。 hexo-asset-image 这个插件我在 ETRD 中的博客看到的^2。笔者并没有学习过 hexo 的脚本或者插件开发，所以修改的代码可能有 Bug。也请在评论区中告诉我。预览效果请参考:
https://rothleer.github.io/2019/11/21/%E6%B5%8B%E8%AF%95%E6%96%87%E7%AB%A0/