Hexo - 03. 本地图片插入

这里只讲本地图片插入，静态文件中包含图片文件，发布到服务器方式。

图片插入

编辑MD文件我使用 Visual Studio Code。当前版本是 1.80.1
VSCode自带MD文件编辑预览功能。也可以直接把图片文件复制到MD文件中。
我一般使用截图工具(snipaste)截图复制，这样图片就直接存到剪切版里，在粘贴到MD文件中，这样就不用另存文件了。

资源文件夹配置

为了方便管理图片，每个文章中使用的图片分开保存是有必要的。
打开配置文件 _config.yml ,找到post_asset_folder 值改为 true。
这样hexo new post的时候在_posts目录下每个文章都会生成一个同名的文件夹，用于保存图片。
在生成静态文件时，文章会保存到public/年/月/日/文章名/ 目录下，关联图片也全部保存到同一个目录下。

如果post_asset_folder 值为 false 图片不会移动过去。

引用图片

复制图片到VSCode 会生成以下Markdown语法代码。

![Alt text](image.png)

图片会进入到跟MD文件同级目录下。
这时候在编辑器预览是正常显示图片，因为路径是正确的。
但是执行 hexo g 生成静态文件，再访问 http://localhost:4000/ 发现图片无法正常显示。

网页上检查img元素，发现图片的src路径是 /image.png，生成静态时候会强制改为根目录绝对路径。
post_asset_folder 为 true的时候，生成静态后文章和图片是在一起的，同一个日期目录下。
所以必须使用相对路径引用图片。

查看官方文档发现了解决方法。使用标签插件

{% asset_img image.png Alt text %}

图片必须要放到文章同名的目录下。
VSCode 预览是无法识别这个语法的。但是在生成静态后网页上是正常显示的。
虽然问题解决了，但是每次手动修改图片引用标签很麻烦，还无法预览效果。
下面讲一下怎么解决这个问题。

修改图片保存路径

首先要解决图片复制粘贴到MD文件时候，保存路径问题。
图片直接保存到文章同名目录下，插入的代码中路径也要改变。
这个问题在VSCode设置里可以找到解决方法。

找到Markdown copy file设置，点击add item添加下面内容
item - /source/**/*
value - ${documentBaseName}/${fileName}

大致意思是 item指定规则目录下进行复制粘贴时候按value规则进行保存文件。
${documentBaseName}是文章名，${fileName}粘贴过来的文件名。

设置后在复制图片到MD文件时候，图片就能正常保存到同名目录中，而且目录不存在的话也会自动生成目录。

使用hexo-asset-image插件

想要让MD默认图片引用代码能正常工作，需要安装一个插件，hexo-asset-image插件

#下面方法安装后，没有正常运行，版本太低。
npm install hexo-asset-image --save

# 用下面方法安装后，正常运行了。
npm install https://github.com/CodeFalling/hexo-asset-image --save

图片引用代码改回默认的语法

![Alt text](post_title/image.png)

重新启动hexo s服务，访问 http://localhost:4000/ 图片显示正常了。
以后图片直接复制粘贴到MD文件中，默认生成的图片引用代码就能正常工作了。

清理缓存

如果安装插件，更改配置后，图片还是不能正常显示，可以尝试清理缓存。

hexo clean

这会清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现站点的更改无论如何也不生效，可能需要运行该命令。

蓝天白云