Hexo优雅的书写文章-插入图片

睡着の黑色素2024-10-042024-10-06

引言

在完成了博客搭建、发布文章后，如果我们想在文章中插入图片，该怎么做呢？
在使用网上的方法上传图片之后，我仍然遇到“图片无法显示”的问题，查阅官方文档并自己实践后，终于解决了，现将几种插入图片方法的步骤整理如下。

实现

方法一：全局资源文件夹

将所有文章的资源统一用一个全局资源文件夹管理。
此方法的优点是比较简便，并且当多篇文章需要引用同一资源时，也比较方便。缺点是当文章很多时，各个文章的图片都在同一文件夹，不便管理。

方法二：文章资源文件夹

对于每篇文章，使用一个文件夹管理资源。
此方法的优点是，当文章很多时，便于结构化管理。缺点是，比方法一麻烦一点。

范例

方法一：全局资源文件夹

在hexo文件夹下的source目录下，新建一个文件夹叫images(名字随意)，将要插入的图片放在该文件夹中。
md文档内，使用![图片](图片链接地址 "图片title")的格式，圆括号内的链接地址写(/images/name.jpeg)。
这里的 / 指的是根目录，对于hexo，资源文件的根目录就是source。

例如，在md文档中写：![图片](/images/20.jpeg "甘雨")
同时将“20.jpeg”这个图片文件放在hexo文件夹/source/images下，则图片可以上传到博客。

方法二：文章资源文件夹

如下：

修改hexo文件夹中的_config.yml文件

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

建一篇新文章

1.1在终端cd到hexo文件夹，hexo new [layout] <title> 命令创建一篇新文章，此时会在hexo文件夹的source目录下，自动创建一个文件夹和.md文件。
注：这句命令中的layout可暂时不写，使用默认的。title就是你的新文章的名字。如果文章名中有空格，务必将整个文章名用双引号引起来。如果文章名中没有空格，可以加双引号，也可以不加。
例如，执行hexo new "如何发布文章到hexo博客上(含插入图片的方法)"
会在source/_post文件夹下生成一个”如何发布文章到hexo博客上(含插入图片的方法).md”文件。
1.2可以将所有与该文章有关的资源（包括图片）放在关联文件夹中
1.3通过相对路径来引用图片资源。
例如，将“1.jpeg”这个图片资源放在该文件夹中，并在.md文件中像这样引用图片：![图片](1.jpeg)，这个方法在资源较多时方便管理。