hexo-asset-image插件修改

Posted on Edited on In Views:

hexo-asset-image错误

问题

? 在昨天修改了下文章后发现图片不能加载???我以为是缓存的问题,在换过浏览器后依旧如此,又看了下图片的链接地址,感觉可能是图片插件的问题

? 在本地搭建了个Hexo后发,又尝试之前的博客文章(之前有遇到应为字符的问题导致不能正常的编译的情况)又证实不是文章的问题,bitbucket是真的慢.

重现

本地hexo正常的编译，出现开头的图片

hexo-asset-image错误

看了下源码是通过字符串截取的方式获取文章的标题

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
62
63
64
65
66
67
68
69
'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;
}

hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    var beginPos = getPosition(link, '/', 3) + 1;
    var appendLink = '';
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
    if(/.*\/index\.html$/.test(link)) {
      // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
      // image in xxtitle/ will go to xxtitle/index/
      appendLink = 'index/';
      var endPos = link.lastIndexOf('/');
    }
    else {
      var endPos = link.lastIndexOf('.');
    }
    link = link.substring(beginPos, endPos) + '/' + appendLink;

    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)
            || /^\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();
    }
  }
});

打印了几个处理后的结果

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
文章链接---https://nobige.cn/post/20170926-phpUniqueMark/
截取开始位置---18
截取截至位置---14
处理后的链接---.cn//
update link as:-->/.cn//xiao20170926182609.png
update link as:-->/.cn//xiao20170926182742.png
update link as:-->/.cn//xiao20170926183236.png
update link as:-->/.cn//xiao20170926182609.png
update link as:-->/.cn//xiao20170926182742.png
update link as:-->/.cn//xiao20170926183236.png
文章链接---https://nobige.cn/post/20170926-0902jqueryLearn/
截取开始位置---18
截取截至位置---14
处理后的链接---.cn//
文章链接---https://nobige.cn/about/index.html
截取开始位置---18
截取截至位置---23
处理后的链接---about/index/
update link as:-->/about/index/a.jpg
update link as:-->/about/index/a.jpg
文章链接---https://nobige.cn/categories/index.html
截取开始位置---18
截取截至位置---28
处理后的链接---categories/index/
文章链接---https://nobige.cn/tags/index.html
截取开始位置---18
截取截至位置---22
处理后的链接---tags/index/

截取开始的位置是没有问题的 https://nobige.cn/ 长达18个字符

有问题的是截止的位置，代码中的判断语句是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if(/.*\/index\.html$/.test(link)) {
  // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
  // image in xxtitle/ will go to xxtitle/index/
   /**
   * 如果是 about 之类的单个页面图片的地址是
   * 文章链接是 https://nobige.cn/about/index.html
   * 图片地址是 https://nobige.cn/about/a.jpg
   * 所以要将index.html处理掉
   */
    
  appendLink = 'index/';
  var endPos = link.lastIndexOf('/');
}
else {
    //否则的情况不懂，可能是插件开发者的permalink 不同？
  var endPos = link.lastIndexOf('.');
}

根据我的情况修改

我的permalink: post/:year:month:day-:urlname/

1
2
3
4
5
6
if(/.*\/index\.html$/.test(link)) {
      var endPos = link.lastIndexOf('/');
      link = link.substring(beginPos, endPos) + '/';
    }else{
      link = link.substring(beginPos);
    }

又看到本插件是支持多级目录的，但是实际使用情况中并没有使用多级目录的习惯，现将其删除

最终结果

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
62
63
64
65
66
67
68
69
70
71
'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;
}

hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    //获取开始位置 第三个 / 的位置 例如 https://nobige.cn/post/20170926-phpUniqueMark/ 前两个刚好是协议/
    var beginPos = getPosition(link, '/', 3) + 1;

    /**
     * 对 about 页面进行特别的处理 index.html
     * about页面地址：   about/index.html
     */
    if(/.*\/index\.html$/.test(link)) {
      var endPos = link.lastIndexOf('/');
      link = link.substring(beginPos, endPos) + '/';
    }else{
      link = link.substring(beginPos);
    }
    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 '/'.
          // 对于windows系统进行反斜杠处理
          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();
    }
  }
});

其他

? 其实在之前我还想过将其通过config.url 来替换空字符，但是本地测试的默认环境是有带端口的，不保证别人就一定是80端口，之后又想到判断link最后10个字符，但是substr 在这里不能支持负数？最终改称现在的情况。不保证修改版的插件在你的环境上也是可以正常的使用，或者是极个别特殊的情况，就没有提交了，而是自己创了一个库。

? 截止写稿的前10分钟（10:40），发现有修改版本，我以为是修复了bug但是测试了下还是没有解决我遇到的问题。

? 其实我也是很奇怪为什么之前都是可以挣正常的使用但是这次就抱错了呢?看了下发现6.2号有一次修改，难道是这个问题？

修改版Github地址：https://github.com/JackCh3n/hexo-asset-image

原版Github地址：https://github.com/xcodebuild/hexo-asset-image

使用方法/优势

参考《hexo利用插件简单的使用管理图片》