hexo利用插件简单的使用管理图片

由来

? 现在的环境用的时候并没有发现什么不妥,在搜索了下发现hexo使用图片有很多的不便,加上修改了hexo-asset-image插件,索性写下这篇文章,之前是参考那一篇文章不记得了。

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml文件中的 post_asset_folder 选项设为 true 来打开。

1
2
_config.yml
post_asset_folder: true

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

图片插件

官方的使用方式很麻烦,作为一个懒人肯定不能这干,于是有人开发了hexo-asset-image插件,使用方法就是通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。

修改 _config.yml下的post_asset_folder: true 将其改成true

用的时候只要

1
![a](a.jpg)

即可,插件会自动修改具体的路径

完整的目录结构是

1
2
3
4
5
hexo利用插件简单的使用管理图片
├── a.jpg
├── b.jpg
└── c.jpg
hexo利用插件简单的使用管理图片.md

插件不能正常的使用?

如果你使用的了官方的插件后发现图片地址没有正确的引用,例如

1
2
3
4
5
6
7
文章链接---https://nobige.cn/post/20170926-phpUniqueMark/
目录
20170926-phpUniqueMark
└── xiao20170926182609.jpg
20170926-phpUniqueMark.md
插件处理后的结果是
https://nobige.cn/post/20170926-phpUniqueMark/xiao20170926182609.png

则可以查看下《hexo-asset-image插件修改》里面有写怎么处理插件不能使用的错误

添加插件

修改package.json 在dependencies 添加

1
"hexo-asset-image": "https://github.com/JackCh3n/hexo-asset-image",

完整的样子

1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.8.0"
},
"dependencies": {
"hexo": "^3.7.1",
"hexo-asset-image": "https://github.com/JackCh3n/hexo-asset-image",
}
}

npm安装

嫌弃修改麻烦,怕出问题?那就用npm命令方式添加,在hexo根目录运行

npm install --save https://github.com/JackCh3n/hexo-asset-image

修改版Github地址:https://github.com/JackCh3n/hexo-asset-image

原版Github地址:https://github.com/xcodebuild/hexo-asset-image

参考

资源文件夹 | Hexo