【个人博客】Hexo与Typora的灵魂联动

写在前面

众所周知，Typora是最受欢迎的Markdown编辑器之一，而基于Hexo框架的博客文章也是使用markdown语法写的，因此在编写Hexo文章时使用Typora就是自然而然地选择了。

但是，直接使用二者时却总有一些不对劲。其主要原因是Typora和Hexo对于图片路径的识别不太一样，因此编辑时使用的图片路径和网站中能看到的图片路径是不同的。因此如何能方便而灵活的将两者结合在一起还是需要一个“调教”的过程的。

抬头设置

首先，我们去查看一下博客根目录下的root/scaffolds/post.md文件，可以在其中定义一些希望文章具备的属性，比如文章的标签、分类、封面等属性。设置好后，使用hexo初始化你的文章时，就可以在文件中自动生成这些信息了。

image-20240101162626712

图片设置

  1. 将__config.yml 中的 post_asset_folder 设置为 true，这样每次创建文章的时候会生成同名的文件夹，可以将图片等资源文件放进去。

  2. 使修改Typora 中设置——图像——复制到指定路径，将其改为./${filename}，之后，我们在Typora中插入图片时，图片会自动复制到第一步设置中typora-root-url路径之下，也就是每次创建文章时生成的同名文件夹。

image-20240101155857737

hexo-assset-image

到了这一步还没成功，你会发现，尽管一切看起来很顺利，但是，网站中的图片链接是xxx.com/picture.png，回去翻翻public文件夹发现你静态文件中的图片事实上是在/abbrlink/picture.png路径下的，简单来说，就是我们希望在网站的xxx.com/abbrlink/picture.png路径中访问到正确的图片。这一目标就需要hexo-asset-image插件的帮助了。

使用也很简单，直接npm下载安装该插件就可以了。

1
npm install hexo-asset-image --save