<Hexo博客与Typora编辑器同时实现图片的便捷插入与预览>

我很少写博客，不是为其他，是因为懒，尤其是懒得在博客中插入图片。诶呀，你看看啊，正常情况下，要在博客中插入图片，主要有如下几步：

  1. 获得要插入的图片，另存在博客目录下（可以存到source下的image中，也可以通过hexo new article命令事先获得文章图片存储目录）
  2. 在typora编辑器下，输入命令! [名字](路径/名称.jpg)插入图片，预览可以查看结果
  3. 诶这时候上传网页预览？早啦，把路径改成网页读取路径（如果在文章图片存储目录则直接把路径删掉），然后网页中就能显示出来了

你瞅瞅，插一张图片就多麻烦，而一篇文章中多多少少也有个十来张图片吧（以前我写空间日志的时候最起码也有这么多，虽然空间日志的图片插入同样麻烦……）

所以，如何能和写word文档一样，插入图片直接拖动，插完直接预览呢？

诶，我今天还真找到方法了，主要有如下几步：

  1. Typora设置。点击文件->偏好设置->图像，配置插入图片问复制到指定路径，底下三个勾都选，如下图所示。

    image-20220611231725568

  2. Hexo配置。在根目录下，进入bash命令框，输入npm install hexo-image-link --save安装插件。

  3. 更改根目录下_config.yml配置，找到post_asset_folder，改为true。

  4. 写文章前，**在根目录bash命令框中输入hexo new 文章题目**，可以自动在post文件夹中生成文章题目.md与文章题目图片存储目录了。

  5. 这样就配置成功了。写文章之前，现在你可以把图片像word编辑一样拖动到typora直接预览，该过程不需要输入什么图片插入指令呀存储路径呀啥的，也不需要专门去对图片进行转存；直接网页端预览，图片可以正常显示。

简单讲讲原理吧，hexo new 文章题目命令后，网页端图片存储相对路径直接指到图片存储目录中，而typora路径还需要对该路径进行指定，这是两者相对路径的区别，而hexo-image-link插件可以在预览时自动对路径进行剪辑使其符合网页端预览的要求。

此外，第一步偏好设置后，拖动图片时typora可以自动将图片转存到同名目录下（正好就是上述hexo生成的图片存储目录），还能自动对路径进行更改，这些都不需要额外配置了。

然后我就可以专注于博客内容而不必担心博客格式了！换言之，写博客markdown文件现在就和写word文件一样简单。emmmm，可能还要方便，毕竟typora结合markdown语法，可以自动输入格式，还能边写边预览。就像下面这样。

image-20220611233321372

有什么不懂的地方欢迎在留言区里交流哦！