hexo 文章内插入附件插入图片终极解决方案

发表于 2022-04-09

在用MarkDown进行文章撰写的时候，本地的图片插入相对比较方便，但是类似HEXO这样把MarkDown文件转成静态网页文件再发布，因为牵扯到链接图片文件的路径问题，有点麻烦。如何方便实现在HEXO中插入图片呢？

HEXO官方解决方案

少量图片的简便办法

对于零星少量的图片使用，可以在网站根目录下的source文件夹中建立一个images文件夹，将所需要的图片文件复制到此文件夹，使用MarkDown中![i/image.jpg](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../image.jpg)的方式访问使用。

大量或者规律性使用图的办法

对于大量或者规律性使用图片的，HEXO提供了另外一种结构化的图片资源管理。就是将_config.yml配置文件中post_asset_folder: false 改为 post_asset_folder: true。这个开关打开后，每次hexo new命令会生成一个同名同位置的文件夹，用以存放图片资源。当然这个文件夹中也可以存放类似图片这样需要位置引用的资源。在HEXO发布的时候，这个文件夹中的内容会随同文章内容一并上传发布。这样也可以使用MarkDown中![i//image.jpg](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../image.jpg)的方式访问使用。

相对路径访问图片等资源问题和解决办法

通过常规的MarkDown语法和相对路径引用图片或其它资源相对方便，但是这些包含相对位置引用资源的文章在首页，或者存档页面不能正常显示。HEXO 3开始核心代码中加入了相对路径引用的标签插件，用以解决这个问题。（在HEXO 3之前许多开发者开发类似插件，现在被官方更新后核心代码采用了）。

1
2
3

{% asset\_path slug %}  
{% asset\_img slug \[title\] %}  
{% asset\_link slug \[title\] %}

示例

网站根目录source文件夹图片MarkDown常规引用。![Source Image](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../img-in-source.jpg)

Source Image

本文同名文件夹图片MarkDown常规引用。![Post Image](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../img-in-post.jpg)

使用标签插件的引用。{ % asset_img img-in-post.jpg Post Image % }

Post Image

hexo默认的资源文件夹 – `source/images/`

hexo默认的图片和附件方法很不好用，举例其中稍好的方法如下：

在source/imamges/下放置图片，

文章内引用格式如下：

![alt](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../img1.png)

hexo g或者部署到服务器时，其对应的链接是domain.com/imamges/img1.png

hexo想在`source/_post/`下放置图片或附件

更改根目录下_config.yml

skip_render:
 - "_posts/imamges/**/*"

# 包含资源文件夹 -->public/_posts/i/**
include:
 - "_posts/imamges/**/*"

文章内引用格式如下：

![alt](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../_posts/images/img1.png)

hexo g或者部署到服务器时，其对应的链接是domain.com/_posts/imamges/img1.png

hexo资源文件夹功能post_asset_folder – 图片的相对引用

图片的相对引用Hexo 搭建个人博客（五）Hexo 资源文件夹_15wylu的博客-CSDN博客_hexo source文件夹

hexo 文章资源文件夹功能post_asset_folder非常的不好用

开启方法是，更改根目录下_config.yml

1	post_asset_folder: true

开启 post_asset_folder 后，假如如创建一篇名为 “hello_post” 的文章并引用一张图片，它的文件目录结构如下：

$ tree source/_posts 
source/_posts
├── hello_post
│   └── example.png
└── hello_post.md

即使用hexo的new post功能，会自动生成一个和文章同名的资源文件夹（如上的hello_post/）

三种相对引用的写法及其效果：

![example](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../example.png)

Hexo 官方文档关于 markdown 的示例写法，图片不能在主页正常显示，但在文章中能正常显示。此外，这种相对引用写法在绝大数 markdown 编辑器的预览视图中都无法正常显示图片（Typora 通过设置 Use Image Root Path 可以解决，它会在文件头添加 typora-root-url: xxxx）。
{% asset_img example.png example %}

Hexo 官方推荐使用标签的写法，图片能在主页和文章中正常显示，但是不能在 markdown 编辑器的预览视图中预览图片。
![example](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../assetsTest/example.png)

几乎所有的 markdown 编辑器都支持的相对引用的写法，在markdown 编辑器的预览视图中都能正常显示图片，但在主页和文章中无法正常显示。

综上所述，post_asset_folder非常的不好用，推荐使用插件来解决图片问题

hexo-relative-link去除文章链接(站内链接)的`.md`后缀，例如：

安装 hexo-relative-link插件

1	npm install hexo-relative-link

假设文章内链接如下：

1	[hello](/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../hello)

则渲染为domain.com/hello/index.html,而不是domain.com/hello.md

hexo-relative-link解决插入图片和附件的问题：

安装 hexo-relative-link插件

1	npm install hexo-relative-link

更改根目录下_config.yml

1
2
3

# hexo-relative-link 见 https://www.npmjs.com/package/hexo-relative-link
# ../images/img1.png  <--> arc:"/hello_my_post/../../images/img1.png"  <--> source/images/images/img1.png <--> localhost:5000/images/img1.png
post_asset_folder: true

设置内部链接类型为插入基于当前笔记的相对链接，简称相对链接

(typora或者obsidian都有这项设置)

假设一种情况是，在hello_my_post.md内插入一张图片名为img1.png，插入附件名为pdf1.pdf，具体如下：

在source/_posts/内放置文章,source/_posts/hello_my_post.md
在source/imamges/目录下放置图片，source/imamges/img1.png
在source/pdf/目录下放置图片，source/pdf/pdf1.pdf

图片在hello_my_post文章内引用格式动如下：

(hello_my_post.md内)

![alt](https://webdav-1309345210.file.myqcloud.com/images/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../img1.png)


[pdf alt](https://webdav-1309345210.file.myqcloud.com/assert/hexo-%E6%96%87%E7%AB%A0%E5%86%85%E6%8F%92%E5%85%A5%E9%99%84%E4%BB%B6-%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88/../../pdf/pdf1.pdf)

链接会被渲染为

<img data-src="/hello_my_post/../../images/Pasted%20image%2020220409114954.png" alt="">

src="/hello_my_post/../../pdf/pdf1.pdf"

其中/hello_my_post/../是插件自动添加的前缀，

../images/img1.png是原本的链接，../pdf/pdf1.pdf是原本的链接

这样，在网站就能正常显示图片和附件了，它们对应的url是

1
2
3

`../images/img1.png` <--> `domain.com/imamges/img1.png`

`../pdf/pdf1.pdf` <--> `domain.com/pdf/pdf1.pdf`

这样的好处是，typora或者obsidian 配置附件优先使用相对路径，拖动文件、图片到 typora或者obsidian 就可以自动生成链接，这个链接不用修改就可以直接发布到 hexo 博客了 ^_

hexo-relative-link想要引用在`source/_post/`下放置的图片或附件

上面所述的图片和附件都放置在source/的子目录中，如果想在source/_post/下放置图片或附件，还需要更改根目录下_config.yml，具体如下：

假设source/_post/images下放置了你想引用的图片，

更改根目录下_config.yml

skip_render:
 - "_posts/imamges/**/*"

# 包含资源文件夹 -->public/_posts/i/**
include:
 - "_posts/imamges/**/*"

其他设置同上

参考、引用、致谢

本文链接： http://iworld2u.com/2020/03/02/How-to-insert-images-in-hexo/

HEXO官方解决方案

少量图片的简便办法

大量或者规律性使用图的办法

相对路径访问图片等资源问题和解决办法

示例

hexo默认的资源文件夹 – source/images/

hexo想在source/_post/下放置图片或附件

hexo资源文件夹功能post_asset_folder – 图片的相对引用

hexo-relative-link去除文章链接(站内链接)的.md后缀，例如：

hexo-relative-link解决插入图片和附件的问题：

hexo-relative-link想要引用在source/_post/下放置的图片或附件

参考、引用、致谢

hexo默认的资源文件夹 – `source/images/`

hexo想在`source/_post/`下放置图片或附件

hexo-relative-link去除文章链接(站内链接)的`.md`后缀，例如：

hexo-relative-link想要引用在`source/_post/`下放置的图片或附件