Hexo -4- 向文章添加图片的方法

本文介绍Hexo编辑文章时添加图像的各种方法。

绝对路径本地引用

当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。

代码语言：javascript复制

![](/images/image.jpg)

此方法加载的图片既可以在首页内容中访问到，也可以在文章正文中访问到。

相对路径本地引用

图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过设置站点配置文件的 post_asset_folder: true来自动生成。

将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

代码语言：javascript复制

![](image.jpg)

标签插件语法引用

这种相对路径的图片显示方法在博文详情页面显示没有问题，但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

代码语言：javascript复制

# 本地图片资源，不限制图片尺寸
{% asset_img image.jpg This is an image %}
# 网络图片资源，限制图片显示尺寸
{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}

HTML语法引用

代码语言：javascript复制

<img src="SpellCheck.png" width="50%" height="50%" title="拼写检查工具Grammarly." alt="拼写检查工具Grammarly."/>

直接将![](image.jpg)替换上面的语法即可。

启用fancybox：点击查看图片大图

我这里使用的是Hexo的NexT主题，NexT主题中提供了fancybox的方便接口。

Usage：https://github.com/theme-next/theme-next-fancybox3 markdown用法：

代码语言：javascript复制

{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 600 600 "点击查看大图:vi/vim-cheat-sheet" %}

腾讯云开发者社区 hexo markdown

0 人点赞