博客图片插入功能

hexo-abbrlink与hexo-asset-images插件冲突的解决办法

一、需求描述

目前，图片本地插入的三种主流实现方法，分别为：img路径方法插入图片、 ！[]()方式插入图片、通过{%%}插入本地图片
其中，！[]()方式插入图片是markdown的插入图片语句，语法为：

![图片加载失败的描述](图片链接)

这种格式，能够很好满足我使用Typora，实时预览的需求。
通常情况下，使用如下插件便可以很方便的完成相对路径的地址转换（实现途径自行查询）：

npm install hexo-asset-image --save

但是，由于笔者使用了hexo-abbrlink插件，改变了github中图片路径，导致github仓库中相对路径，无法查询到对应图片。

二、解决办法

首先，下载cheerio插件:

npm install cheerio

然后，在原有hexo-asset-images插件基础上修改，实现相对路径的变更

hexo-asset-images/index.js

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

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
    return str.split(m, i).join(m).length;
}

hexo.extend.filter.register('after_post_render', function(data) {
    var config = hexo.config;
    if (config.post_asset_folder) {
        var link = data.permalink;
        var beginPos = getPosition(link, '/', 3) + 1;
        // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
        var endPos = link.lastIndexOf('/') + 1;
        link = link.substring(beginPos, endPos);

        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() {
                // For windows style path, we replace '\' to '/'.
                var src = $(this).attr('src').replace('\\', '/');
                if (!/http[s]*.*|\/\/.*/.test(src)) {
                    // For "about" page, the first part of "src" can't be removed.
                    // In addition, to support multi-level local directory.
                    var linkArray = link.split('/').filter(function(elem) {
                        return elem != '';
                    });
                    var srcArray = src.split('/').filter(function(elem) {
                        return elem != '';
                    });
                    if (linkArray[linkArray.length - 1] == srcArray[0])
                        srcArray.shift();
                    src = srcArray.join('/');

                    var root = config.root && config.root.endsWith('/') ? config.root : '/'

                    var abbrlink = data.abbrlink;
                    if (abbrlink) {
                        if (src.indexOf(abbrlink) > -1) {
                            // 使用 hexo asset_img：{% asset_img 20190522103754.jpg %}

                            // root = /
                            // link = posts/
                            // abbrlink = d6d2f549
                            // src = d6d2f549/20190522103754.jpg
                            $(this).attr('src', root + link + src);
                        } else {
                            // 使用 markdown 标准语法：![图片](title/20190522103754.jpg)
                            // 或者 typora 其中一个用法：![图片](20190522103754.jpg)

                            // root = /
                            // link = posts/
                            // abbrlink = d6d2f549
                            // src = title/20190522103754.jpg
                            // 或者 src = 20190522103754.jpg
                            if (src.indexOf('/') > -1) {
                              src = src.substring(src.lastIndexOf('/') + 1);
                            }
                            $(this).attr('src', root + link + src);
                        }
                    } else {
                        $(this).attr('src', root + link + src);
                    }
                }
            });
            data[key] = $.html();
        }
    }
});

hexo-asset-images/package.json

{
  "name": "hexo-asset-image",
  "version": "0.1.0",
  "description": "Give asset image in hexo a absolutely path automatically",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "hexo",
    "iamge",
    "asset",
    "path"
  ],
  "author": "codefalling",
  "license": "MIT",
  "dependencies": {
    "cheerio": "^0.19.0"
  }
}

注意

• 在typora中进行图片插入时，图片名中间不能有空格，否则无法完成相对路径的自动转换。
• typora图片插入的相对路径，不要忘记设置。
• 使用该插件后，只能使用npm new "XXX"方式，生成.md文档。(自己向_post文件中拖拽和新建对应图片文件夹，是无效滴)
• 不同博客的github中的文件路径可能有所差别，可以在github相应博文.html页面中进行比对(如下)，从而对index.js和package.json中相对路径转换格式做出调整。