问题说明

在文章中，Typora编写时显示的很正常，但推送上去后就不行了，图片集体挂掉，无法显示出来，后来才找到这个方法！
这个方法的核心是源文章使用的是 Typora 图片引用方式，但推送编译时就更改路径方式，使用本地引用方法。
hexo-asset-img 这个文件夹中的 index.js 也是遵循 JavaScript 语法，自己研究之后发现他是使用正则表达式来替换路径，也就是说先识别出 typora 下图片路径，然后替换成hexo能使用的路径就行了！

问题点：

使用时发现一直没有替换，最后一层层调出才发现，使用正则表达式时，“+”是有效字符，需要正则化才行，费了一早上才知道！

关于js正则匹配的问题，怎么加上一个”+”就匹配不上了？

这篇文章有说明：
+号在正则表达式中是有意义的，要转义

1
2
3
4
oldStr = oldStr.replace('+','\\+');

//使用这个才对-要不然多个+号还不行
fileName = fileName.replace(/\+/g,'\\+');	//转义所有+

1. 下载安装 Typora

https://typora.io/

2. 配置 Typora 图片路径

图片文件保存路径: ./${filename} 即保存到与 当前正在编辑的文件名 相同的同级文件夹下

下面三项依次为

  • 对本地位置的图片应用上述规则

  • 对网络位置的图片应用上述规则

  • 优先使用相对路径

建议都勾选上，至少要勾选上第一项

PS：使用 Ctrl+V 粘贴 即可复制图片到Typora图片文件夹

3. 配置 Hexo 图片文件夹

在 Hexo 根目录打开配置文件 _config.yml

搜索 post_asset_folder，false 改为 true

这样修改后，每次 ‘hexo new page’ 生成新文章，都会在文章文件同级目录创建一个与文章文件名同名的文件夹，我们就在这里存放此文章的图片。

PS: 这被称为 文章资源文件夹, 参考官方文档： https://hexo.io/zh-cn/docs/asset-folders

4. 开发 Hexo 转换图片路径 插件

注意：自己最后使用的是npm直接下载方式安装，不过这个方式也刚好可以学习插件开发了

现在，我们在 Typora下使用

1
![example](postname/example.jpg)

引用图片，享受实时预览，但需发布到 Hexo，使之发布后能正确加载我们的图片，还需要做以下转换:

1
![example](postname/example.jpg) --> {% asset_img example.jpg example %}

而这个转换我们需要在文章编译为html之前，在编译过程中转换为 这样的标签

PS: Hexo官方文档 - 相对路径引用的标签插件

4.1 创建文件夹 hexo-asset-img，初始化npm包

1
2
3
mkdir hexo-asset-img
cd hexo-asset-img
npm init

4.2 编写插件 index.js

创建 index.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
26
27
28
29
30
31
32
const log = require('hexo-log')({ 'debug': false, 'slient': false });

/**
 * md文件返回 true
 * @param {*} data 
 */
function ignore(data) {
    // TODO: 好奇怪，试了一下, md返回true, 但却需要忽略 取反!
    var source = data.source;
    var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
    return ['md',].indexOf(ext) > -1;
}

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");
    // hexo g
    data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}","g");

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

hexo.extend.filter.register('before_post_render',(data)=>{
    if(!ignore(data)){
        action(data)
    }
}, 0);

4.3 本地测试插件

  1. Hexo根目录下 package.json 中 dependencies添加一行 “hexo-asset-img”: “^1.0.0”,
  2. 将 hexo-asset-img文件夹复制到 Hexo根目录下 node_modules文件夹下

注意：二者缺一不可，笔者试过不修改 package.json ，但没成功加载插件

  • 重新生成文章
1
2
3
4
5
hexo clean
hexo g
hexo s # 本地预览

ps:也可以直接  hexo clean && hexo g && hexo s

PS：当然之后你还需要修正以前文章的图片路径

public/posts 生成结果如下图所示，成功

图片路径被转换成功

1
<img src="/posts/hexo-typora/image-2c872375cf8af43072ef10ed213b13d6.png" class="" title="image-20201128103300470">
  • 后话：
    所说的问题就出现在了这里，一直是以为没什么问题，然而，多次尝试发现图片地址并未被改变，以为插件不起作用，但文件夹确确实实生成了，无奈只能研究其中代码含义，才有前面说的结果。
    这里是作者列出详细步骤，实际上使用的话直接npm下载插件也行的了。

4.4 发布插件

注意: 你需要先登录 npm login

1
npm publish --registry https://registry.npmjs.org

5. 使用插件

1
npm install hexo-asset-img --save

关联 GitHub
yiyungent/hexo-asset-img: Hexo插件: 转换 图片相对路径 为 asset_img

https://github.com/yiyungent/hexo-asset-img

作者说明

起源

hexo-asset-image 已无效, 大概是从 Hexo 5 开始，并且此仓库已 archive

Q: 为什么使用本地图片 而不是网络图片 (图床) ?
A:

  1. 第三方图床不稳定, 容易丢失图片
  2. 自行搭建图床, 随着上传错误图片, 删除文章而没有删除关联图片 次数的增多, 未引用图片越来越多, 图床中也越来越多的无用冗余图片, 还不方便删除, 也容易误删除
  3. 本地图片 与 文章在一个文件夹, 易打包, 在无网络或网络较差时也能预览
  4. 本地图片 放在与 文章文件名同名文件夹内 方便管理

补充:
很多 markdown编辑器 提供粘贴图片到本地图片文件夹, 这些图片文件名通常不易读, 较长, 如果每次删除文章中的图片引用, 都手动去删除相应图片, 以及删除文章, 手动删除关联图片文件夹, 比较麻烦, 但不删除, 未引用图片又会越来越多, 因此 删除未引用图片工具 应运而生!

相关项目

.NET 自用 CLI | 工具集(清理未引用图片)

需要先在本地安装 .NET 6 SDK

然后 安装 coo 工具集

1
dotnet tool install -g coo

功能

1. mdimg

  1. 清理 md文件的未引用图片: 例如使用 Hexo, 采用本地图片文件 (图片放在md同名文件夹下) 等

"F:\Com\me\Repos\notebook\source\_posts" 为 Hexo文章目录, 本人图片与文章处于同一目录下

1
2
3
4
# 统计分析
coo mdimg "F:\Com\me\Repos\notebook\source\_posts"
# 统计分析 并删除未引用图片
coo mdimg -d "F:\Com\me\Repos\notebook\source\_posts"

补充:

  1. 所有图片数量=引用图片数+未引用图片数
    这个等式匹配不上 属于正常现象, 因为 匹配 所有图片 时, 目前仅匹配了 png,jpg,jpeg,gif, 而 你在md中引用的图片可能还有其它
    因此 所有图片数量<=引用图片数+未引用图片数
  2. Windows, macOS 不区分路径大小写, 但 Linux 区分大小写
    本工具匹配时, 忽略大小写, 因此不用担心 引用时, 大小写不一致 而导致工具以为 未引用此图片 而误删,
    因此工具 可能存在漏删, 但不会误删除引用图片
  3. 本工具通过检测 文章.md 中图片的相对路径引用, 并转换为绝对路径, 与目标目录的所有存在图片的绝对路径进行匹配, 来找出哪些图片未引用

2. cimg

  1. 清理 未引用图片 (mdimg 升级版)
    支持识别 md,html,htm

支持 相对路径: 相对于当前命令行执行所在路径

1
coo cimg -d --ignore-paths="IgnoreDir1,IgnoreDir2,images/1.png" "source/_posts"

--ignore-paths="IgnoreDir1,IgnoreDir2,images/1.png" 这些图片地址忽略, 不会被删除

补充

卸载 coo

1
dotnet tool uninstall -g coo

相关链接(侵删)

  1. Hexo + Typora + 开发Hexo插件 解决图片路径不一致
  2. gitee hexo-asset-img
  3. (这个方法过时-思路可参考)解决Hexo+Github+Typora图片无法正确显示的问题
=================我是分割线=================

欢迎到公众号来唠嗑: