本文介绍 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; 这个变量自行修改原来的图片路径

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}

修改之后，就可以正常加载图片了

可能的问题

如果你跟我一样使用 vercel 部署的话，可能会在 vercel 上失效
我们禁止 vercel 的 build 即可，也就是删除他的 build 命令内容，让他直接使用我们本地生成的 public 的文件 (注意把 public 文件夹 push 到 github 上). 这样就可以所见即所得

参考文章: https://blog.csdn.net/zino00/article/details/122730090