Hexo更优雅的图片插入方式

2023-07-29 | 过程记录

前言

相比于使用图床，使用本地图片是更简单、更方便管理的方式，而且网络环境欠佳时也可以本地预览。这里记录了一种适用于Hexo的本地图片插入方式。

Hexo对本地图片的管理有两种方式，一种是全局资源文件夹，另一种是文章资源文件夹。大部分情况下，一张图片只会在某篇文章中使用，这时使用文章资源文件夹无疑是更好地选择。

使用文章资源文件夹首先要在配置文件中修改配置：

1 2	# _config.yml post_asset_folder: true

修改完成后，每次新建文章就都会自动新建一个与文章同名的资源文件夹了。

于是，在往文章资源文件夹放入图片example.jpg后，只需使用{% asset_img example.jpg This is an example image %}就可以往文章中插入图片了。

更进一步地，可以使用hexo-renderer-marked提供的功能，实现资源图片自动解析，开启方法为修改配置文件：

# _config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

这样，使用![](image.jpg)这样的Markdown格式就可以往文章中插入文章资源文件夹下的image.jpg图片了。

Typora有一个功能，可以粘贴图片到Typora时将自动图片复制到指定文件夹下，这样就可以快速插入图片了。

设置路径：文件-偏好设置-图像，将插入图片时的设置修改为“复制图片到指定路径”，值为./${filename}，代表当前文章的文章资源文件夹。下面还有三个选项：

保险起见可以都勾选上，至少勾上第1个。

配置完成后，只需要对着文章Ctrl+V就可以将图片复制到文章资源文件夹，同时插入到文章中。

但是，这时文章中插入的图片格式为![](文章资源文件夹/image.jpg)，而不是![](image.jpg)，也就是说，现在只能在Markdown编辑器中看到图片预览，hexo g后生成的博客中是看不到图片的！如果需要博客中能看见图片的话，需要将文章资源文件夹/批量替换为空。

到这里，其实图片插入已经很简单了，但问题显而易见，图片的显示在本地Markdown预览和部署后的博客上只能二选一。

哪里有困难，哪里就有办法，于是hexo-asset-img插件来了。

安装方法：

1 2	npm install hexo-asset-img --save # PS: 这个我运行了安装不上，提示证书过期（）

或安装最新开发版：

1	npm install git://github.com/yiyungent/hexo-asset-img.git#main

hexo-asset-img插件的作用是在文章编译为html之前，在编译过程中将![](文章资源文件夹/image.jpg)转换为{% asset_img image.jpg example %}这样的格式。

这样，文章无论是本地预览还是部署到博客上，图片都能正常显示了。