Hexo的abbrlink和asset-img图片路径兼容性冲突问题的解决方案

本文介绍Hexo的abbrlink插件和hexo-asset-img的图片兼容问题的解决方案

abbrlink简介

简而言之, 因为blog的目录比较深, 要是配上中文标题, 路径就会特别长, abbrlink就是把这个长路径通过crc的校验算法, 转化成固定的数字串, 把长路径缩短成短路径, 实现SEO优化

举例如下
原来是
https://blog.ericjuice.cn/posts/很长很长的日期/很长很长的名字.html

缩短后
https://blog.ericjuice.cn/posts/dda8c81b.html

安装方式可以参考这篇知乎文章

abbrlink与asset-img的冲突

在之前的blog里我们介绍了Hexo使用vscode优雅地向markdown插入html标签的图片

使用hexo-asset-img插件, 可以实现把本地图片资源放到博客文章的同名子目录下, hexo渲染的时候就会把他弄到html的同目录下. 改一下js之后就可以在本地和远程都成功预览

但是abbrlink添加之后, 由于博客目录变了(crc算法导致的), 源文件中引用的图片路径就不可用了, 为了兼顾图片的优雅插入和abbrlink的SEO优化, 我们要改动一下js了.

解决方法

找到博客安装目录的\node_modules\hexo-asset-img\index.js

找到function action(data)
修改如下

注意: 如下的修改是配合我之前的<img>格式的图片, 如果你不是这种格式, 请根据 var abbrlink = data.abbrlink;这个变量自行修改原来的图片路径

function action(data) {
    var reverseSource = data.source.split("").reverse().join("");
    var fileName = reverseSource.substring(3, reverseSource.indexOf("/")).split("").reverse().join("");

    // ![example](postname/example.jpg)  -->  {% asset_img example.jpg example %}
    // var regExp = RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g");

    // 上面是原来的，下面是我的。把src="test/1.png"替换为src="1.png"
    var regExp = RegExp("src=\"" + fileName + '/', "g");//匹配“当前文件名/”

    // hexo g
    // data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}","g");

    var abbrlink = data.abbrlink;
    // 适配abbrlink插件，实现test/1.png替换为link/1.png
    data.content = data.content.replace(regExp, "src=\"./"+abbrlink+"/","g");

    // log.info(`hexo-asset-img: filename: ${fileName}, title: ${data.title.trim()}`);
    
    return data;
}