Hexo+Typera图片配置

兄弟们，真服了，搞个博客真麻烦

直入主题，主要是hexo的图片问题

要在 Hexo 和 Typora 中读取 assets 文件夹中的图片，可以按照以下步骤进行配置：

  1. 配置 Typora：

    • 打开 Typora，进入 偏好设置 -> 图像。
    • 设置图像保存路径为 ./${filename}，这样图片会保存在与当前编辑的 Markdown 文件同名的文件夹中。
    • 勾选 对本地位置的图片应用上述规则 和 优先使用相对路径。

  2. 配置 Hexo：

    • 打开 Hexo 根目录下的 _config.yml 文件。
    • 找到 post_asset_folder 选项，将其设置为 true。这样，每次创建新文章时，Hexo 会在文章文件同级目录创建一个同名的文件夹，用于存放该文章的图片。

  3. 使用插件：

    • 安装hexo-asset-image插件，确保图片路径在发布时正确转换。

      1
      npm install hexo-asset-image --save

    • 在_config.yml文件中添加以下配置：

      1
      post_asset_folder: true

    • 在文章中引用图片时，使用相对路径，例如：

      1
      ![图片描述](test/1.jpg)或者![图片描述](./test/1.jpg)

    • 比如我这里

      image-20241012172210610

  4. 生成和预览：

    • 运行以下命令生成和预览网站：

      1
      2
      3
      hexo clean
      hexo generate
      hexo server

  5. 我的错误：

    • 无法读取图片：打开F12,发现图片位置为localhost:4040/MyBlog/.io//test/1.jpg，再打开public文件夹，发现图片保存下来了，但是位置不对，经过F12测试发现图片位置应为localhost:4040/MyBlog/yy/mm/dd/test/1.jpg，这里yy/mm/dd为对应年月日，

    • hexo-asset-image出错：在网上搜了搜发现是这个插件的问题，应该是版本更新的问题，这里我测试它的src输出就是MyBlog/.io//test/1.jpg，然后这边我发现，直接删除掉前面的部分直接将src输出1.jpg，就能自动的输出MyBlog/yy/mm/dd/test/1.jpg，很神奇，不知道啥原因。

我的代码

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
72
73
74
75
76
'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('\\', '/');
          console.info&&console.info("initsrc", src);

          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('/');
            // console.info&&console.info("srcArray", srcArray);
            
            src=srcArray[1];
            $(this).attr('src', src);
            console.info&&console.info("src", src);
            // $(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();
    }
  }
});