资源文件夹

全局资源文件夹

资源是指 source 文件夹中非文章文件,例如图片、CSS 或 JavaScript 文件。例如,如果你只需要在 Hexo 项目中添加少量图片,最简单的方法是将它们保存在 source/images 目录中。然后,你可以使用 ![](/images/image.jpg) 访问它们。

文章资源文件夹

对于需要定期提供图片和其他资源的用户,以及希望在每个文章的基础上分离资源的用户,Hexo 还提供了一种更有效的方式来管理资源。这种稍微复杂但非常便捷的资源管理方法可以通过在 _config.yml 中设置 post_asset_folder 为 true 来开启。

_config.yml
post_asset_folder: true

开启资源文件夹管理后,每次使用 hexo new [layout] <title> 命令创建新文章时,Hexo 都会创建一个文件夹。这个资源文件夹将与文章关联的 Markdown 文件具有相同的名称。将所有与你的文章相关的资源放到关联的文件夹中,你就可以使用相对路径引用它们,从而实现更轻松便捷的工作流程。

用于相对路径引用的标签插件

使用正常的 Markdown 语法和相对路径引用图片或其他资源可能会导致在归档页或索引页上显示错误。社区创建了插件来解决 Hexo 2 中的这个问题。然而,随着 Hexo 3 的发布,几个新的 标签插件 被添加到核心。这些插件使你能够更轻松地在文章中引用你的资源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

例如,如果启用了文章资源文件夹,并且你将一张名为 example.jpg 的图片放到你的资源文件夹中,如果你使用常规 ![](example.jpg) Markdown 语法(使用相对路径)引用它,它 *不会* 出现在索引页上(但是,它将在文章本身中按预期工作)。

因此,正确引用图片的方法是使用标签插件语法而不是 Markdown 语法。

{% asset_img example.jpg This is an example image %}
{% asset_img "spaced asset.jpg" "spaced title" %}

这样,图片就会出现在文章内部、索引页和归档页上。

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新选项,允许你在 Markdown 中嵌入图片,而无需使用 asset_img 标签插件。

要启用它

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

启用后,资源图片将自动解析到其对应文章的路径。例如,“image.jpg”位于“/2020/01/02/foo/image.jpg”,这意味着它是“/2020/01/02/foo/”文章的资源图片,![](image.jpg) 将被渲染为 <img src="/2020/01/02/foo/image.jpg">