| hexo

hexo-markdown图片路径设置-通用

[toc]

一、Markdown图像（截图/复制图）路径设置

工具：Typora

官网：https://typora.io/

1.文件-偏好设置

image-20201216171315068

2.偏好设置-图像

image-20201216171559060

如上图，插入图片时：复制到指定路径

路径填写：./${filename}

勾选以下3项功能

  • 对本地位置的图片应用上述规则
  • 对网络位置的图片应用上述规则
  • 优先使用相对路径

3.关闭偏好设置

image-20201216172048094

4.将截图复制到markdown中

可以看到图片路径为如下格式：![图片文件名]+(文档名/图片文件名.png)

image-20201216172147595

二、更改hexo格式转换文件

1.找到marked.js文件

路径：node_modules\marked\lib\marked.js

2.打开marked.js编辑

找到如下代码部分，该代码块为 hexo g时，转换markdown的语法逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
Renderer.prototype.image = function(href, title, text) {
  href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
  if (href === null) {
    return text;
  }

  var out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};

本次操作中将该部分注释掉，并替换为以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Renderer.prototype.image = function(href, title, text) {
  href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
  if (href === null) {
    return text;
  }
  
  if (href.substr(0,7)=="http://" || href.substr(0,8)=="https://") {
  var out = '<img src="' + href + '" alt="' + text + '"';
    out += ' title="' + title + '"';
  } else {
  var out = '<img src="'+'../' + href + '" alt="' + text + '"';
    out += ' title="' + title + '"';
  }
  if (title) {
    out += ' title="' + title + '"';
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};

即，在hexo d后 将markdown图片路径(非http或https网页路径)前添加“../”字符，转换为github中文件路径（此部分可能会由于不同的主题而有所不同，请根据主题生成后的路径格式进行修改）

3.查看生成的index.html文件中img格式

未更改前markdown中路径：

image-20201216190102646

未更改前渲染出的index.html img路径格式：

image-20201216190724822

未更改前渲染出的index.html img路径web显示：

image-20201216190813849

更改后渲染出的index.html img路径格式：

image-20201216185950343

更改后渲染出的index.html img路径web显示：

image-20201216191010281

以上，分享完毕，希望可以帮助到各位😁

ESC