在hexo中使用图片

在hexo中使用图片

第一步：安装 hexo-asset-image :

1
cnpm install --save hexo-asset-image

直接安装即可，如没有报错，就直接进行第二步。

1
2
3
4
5
6
cnpm install hexo-asset-image --save
✔ Installed 1 packages
✔ Linked 17 latest versions
✔ Run 0 scripts
Recently updated (since 2021-03-28): 1 packages (detail see file /home/user/blog/node_modules/.recently_updates.txt)
✔ All packages installed (23 packages installed from npm registry, used 3s(network 3s), speed 123.09kB/s, json 18(42.74kB), tarball 378.36kB)

楼主在执行后无法hexo -d，我明明装了deployer，但是还是报错，因此重新安装hexo-deployer-git：

1
cnpm install --save hexo-deployer-git

提示找不到git

1
2
3
user@user-W65KJ1-KK1:~/blog$ hexo d
INFO  Validating config
ERROR Deployer not found: git

重新安装 deploy 模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
user@user-W65KJ1-KK1:~/blog$ cnpm install --save hexo-deployer-git
⠹ [0/1] Installing domelementtype@^2.0.1platform unsupported hexo-deployer-git@2.1.0 › hexo-fs@2.0.1 › chokidar@3.5.1 › fsevents@~2.3.1 Package require os(darwin) not compatible with your platform(linux)
[fsevents@~2.3.1] optional install error: Package require os(darwin) not compatible with your platform(linux)
✔ Installed 1 packages
✔ Linked 77 latest versions
[1/1] scripts.postinstall hexo-deployer-git@2.1.0 › hexo-util@1.9.1 › highlight.js@^9.13.1 run "node deprecated.js", root: "/home/user/blog/node_modules/_highlight.js@9.18.5@highlight.js"
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  Verion 9 of Highlight.js has reached EOL.  It will no longer
  be supported or receive security updates in the future.
  Please upgrade to version 10 or encourage your indirect
  dependencies to do so.

  For more info:
  
  https://github.com/highlightjs/highlight.js/issues/2877
  https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md
 
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
[1/1] scripts.postinstall hexo-deployer-git@2.1.0 › hexo-util@1.9.1 › highlight.js@^9.13.1 finished in 377ms
✔ Run 1 scripts
deprecate hexo-deployer-git@2.1.0 › hexo-util@1.9.1 › highlight.js@^9.13.1 Support has ended for 9.x series. Upgrade to @latest
Recently updated (since 2021-03-28): 3 packages (detail see file /home/user/blog/node_modules/.recently_updates.txt)
✔ All packages installed (80 packages installed from npm registry, used 2s(network 2s), speed 924.7kB/s, json 78(211.08kB), tarball 1.66MB)

估计是因为deploy模块的版本过低，太久没更新了。

第二步：修改node_modules/hexo-asset-image/index.js中的内容

全部替换成下列内容（摘自Ericam_ 大神：[https://blog.csdn.net/xjm850552586]）

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
hexo new post 测试

可以看到_post目录下不仅创建了测试.md，还多出了与该文件同名的目录。

这个目录是用来存储该篇文章的图片资源的，直接将图片扔里边，在文章中用markdown插入图片的方法写。

也就是：

1
![图片的description，可任意填](ai.png)

可还行？

1