解决Hexo+Typora无法同时显示相对路径图片问题

一、设置Typora

设置如下图：

image-20240124175708919

image-20240124175800640

二、安装和简单魔改hexo-asset-image插件

在hexo项目根目录使用指令安装hexo-asset-images插件

1
npm hexo-asset-images --save

或者：

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

然后设置hexo项目根目录_config.yml配置:

image-20240124180053459

然后设置_config.yml中的post_asset_folder配置属性为true

image-20240124180140249

这是正常的配置流程，但是！！！！！！！！！！！！！！！！！！

==注：==这里hexo-asset-images有个bug，就是你打包笔记之后会发现他会直接把你的对应相对路径的图片文件夹名称给忽略掉。

比如，我写一个笔记，Test.md，然后我在里面粘贴了一张xxx.png图片，那么通过我之前Typora的设置，那么他会自动在与笔记文件同级目录下新建一个与文件名称相同的目录并在这个目录下再新建一个images文件夹（也就是Test/images/xxx.png)然后会自动把我刚才复制的图片自动复制存到这个目录下面，并且这个md的引用路径也是相对于这个图片的相对路径。但是我们在编译的时候这个插件会忽略掉这个Test路径变成类似于images\xxx.png的路径，而且我们md内的引用路径并没有变，路径引用任然是Test/images/xxx.png所以，当我们用网站打开时任然无法查看（不得不说，这插件设计的确实太不合理了）。

所以，为了解决这个问题，只能改插件的源码。

首先找到 /node_modules/hexo-asset-image/index.js 这个文件：

image-20240124181226907

然后将它的内容替换为如下内容：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'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;
}
     
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
       var link = data.permalink;
   if(version.length > 0 && Number(version[0]) == 3)
      var beginPos = getPosition(link, '/', 1) + 1;
   else
      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(){
       if ($(this).attr('src')){
           // For windows style path, we replace '\' to '/'.
           var src = $(this).attr('src').replace('\\', '/');
           if(!/http[s]*.*|\/\/.*/.test(src) &&
              !/^\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 != '' && elem != '.';
             });
             if(srcArray.length > 1)
               srcArray.shift();
             src = srcArray.join('/');
             $(this).attr('src', config.root + link + src);
             console.info&&console.info("update link as:-->"+config.root + link + src);
           }
       }else{
           console.info&&console.info("no src attr, skipped...");
           console.info&&console.info($(this));
       }
      });
      data[key] = $.html();
    }
  }
});

如果没效果的话可以试试下面另一个改版：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
'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;
}
     
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
       var link = data.permalink;
       console.info("debugTest-> "+link)
   if(version.length > 0 && Number(version[0]) == 3)
      var beginPos = getPosition(link, '/', 1) + 1;
   else
      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(){
       if ($(this).attr('src')){
           // For windows style path, we replace '\' to '/'.
           var src = $(this).attr('src').replace('\\', '/');
          //  console.info(src);
           
           var srcSplit=src.split('/images/');
          if(srcSplit.length<1) return; //如果图片文件长度不符合规范则直接return

          //判断是否为本地src资源
          if(srcSplit[srcSplit.length-1].includes(config.url.replaceAll("http://","").replaceAll("https://",""))){
            $(this).attr('src', "/"+config.root + srcSplit[srcSplit.length-1].replaceAll("http://","").replaceAll("https://",""));
            console.info&&console.info("update link as:-->"+"/"+srcSplit[srcSplit.length-1].replaceAll("http://","").replaceAll("https://",""));
          }else{
            $(this).attr('src', config.root + link +"images/"+ srcSplit[srcSplit.length-1]);
            console.info&&console.info("update link as:-->"+config.root + link +"images/"+ srcSplit[srcSplit.length-1]);
          }
       }else{
           console.info&&console.info("no src attr, skipped...");
           console.info&&console.info($(this));
       }
      });
      data[key] = $.html();
    }
  }
});

然后就可以解决无法同时在 Typora 和 Web 上看到图片的问题了。