【Hexo】hexo-asset-image在hexo6.3.0下的使用以及与abbrink插件的修改

问题描述

Hexo-asset-image已经在2020年archived了，但Hexo还在更新，所以笔者在hexo6.3.0下使用该插件时便出现了图片引用出错的问题。

原因分析：

在查看其index.js时，发现该插件还是scr属性标签，但hexo6.3.0中已经改为 data-scr，所以在使用原插件时，这部分会直接跳过，从而会使图片的引用路径处理出错。

 $('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)
            || /^\s*\/uploads|images\//.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();
    }
  }

所以需要将其中的'src'全部替换为 ’data-scr‘

使用abbrink插件的修改：

由于在abbrink插件是后创建的，所以hexo-asset-image并未考虑abbrink修改的路径，不过改起来也很简单，只要添加abbrlink属性并将原有link替换掉就可以了

例如我的_config.yml中是这样设置permalink的

permalink: posts/:abbrlink.html

于是在hexo-asset-image的index.js中的这个部分（大约在58行）

$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);

修改为

$(this).attr('data-scr', config.root + 'posts/' + abbrlink + '/'+ src);
console.info&&console.info("update link as:-->"+config.root 'posts/' + abbrlink + '/'+ src);

也就是把原有的link替换成posts/abbrink/

笔者遇到的问题到这里就解决了，希望对你也有所帮助(´▽`ʃ♡ƪ)