📝注意：如果没有特别标注，本文内容都建立在未安装 hexo-abbrlink 插件的前提下。

资源文件夹

全局资源文件夹

方法优劣：

  • ✅操作便捷

  • ❌难以对资源文件进行统一管理

文件层级：

1
2
3
4
5
source
 ├── _post
 |    └── title.md
 └── images
      └── image.jpg

比方说，如果你的 Hexo 项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。 然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹

个人更推荐此方法。

方法优劣：

  • ✅管理资源非常方便，便于后期对文章进行修改

  • ❌会有大量的文件夹

文件层级：

1
2
3
4
5
6
7
8
9
source
 ├── _post
 |    ├── title1
 |          └── image.jpg
 |    ├── title2
 |    ├── title3
 |    ├── title1.md
 |    ├── title2.md
 |    ├── title3.md

这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
2
3
# 修改 _config.yml 配置

post_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。 这个资源文件夹将会有与这个文章文件一样的名字。 将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

插入图片

使用标签插件（Tag Plugins）

  • ✅对 Hexo 自身兼容性好，图片能同时出现在文章和主页以及归档页中（landscape主题）

  • ✅最稳定，不会因为其它插件冲突导致图片不显示

  • ❌图片较多的情况下，操作复杂

  • ❌与其它 markdown 软件不兼容，无法预览

语法：

1
{% asset_img slug [title] %}

当启动文章资源文件夹时，如果需要向文章里添加一个 example.jpg ，且图像标题为 This is an example image，就可以这么写：

1
2
3
4
5
{% asset_img example.jpg This is an example image %}

# 文件名存在空格，就用双引号包起来。

{% asset_img "spaced asset.jpg" "spaced title" %}

渲染效果如下：

通过这种方式，图片将会同时出现在文章和主页以及归档页中（landscape主题）。

此外，使用标签插件（Tag Plugins）还有更多参数可以修改：

自定义类

1
{% asset_img post-image foo.jpg %}
1
<img src="/2020/01/02/hello/foo.jpg" class="post-image" />

自定义图片尺寸

1
{% asset_img foo.jpg 500 400 %}
1
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400" />

标题&替代文本

1
{% asset_img foo.jpg "lorem ipsum'dolor'" %}
1
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor" />

传统 Markdown

参照 Markdown 基本语法 的图片章节。

音频

aplayer：https://github.com/MoePlayer/hexo-tag-aplayer/tree/master

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

视频

直接用 HTML 的 <video> 标签

注意事项

  • hexo-abbrlink 插件会修改 permalink 参数，一些插件可能需要该参数，需注意兼容性问题。

  • 如果加载本地的音频和视频文件，使用 Hexo 预览时，Chrome 和 Safari 可能会出现无法加载或者加载错误的问题。使用 Firefox 能正常加载。

参考资料