Hexo 文章图片管理

Hexo 等静态博客的缺点在于不能很好的插入图片，依托 Markdown 语法插入图片不可避免带来图床的选择问题。官方的解决是在新建文章时对应新建文章资源目录，将图片等静态资源放入资源文件夹，通过一个内建的标签插件插入。

1

{% asset_img slug [title] %}

这样的方式带来的问题是，引用的图片资源都会在部署目录，然后部署到静态服务器。众所周知如果将博客部署到 github pages 或是 coding pages，时间久了如果图片过多会达到项目容量的限制。如果是部署在自己的服务器则可以考虑这种方式。

更为通用的方式是利用云存储空间来存储图片，如七牛和又拍云等云存储服务。容量限制少且速度快。之前一直使用 Hexo 的七牛云同步插件，来进行图片的同步上传。但是此插件有 bug 会造成图片文件夹下图片丢失，作者久未更新。所以自己换了另一种方式来同步文章图片。

解决思路

在 _config.yml 中更改配置 post_asset_folder: true 启用静态文章目录生成。这样在新建文章时会产生新目录。

1

hexo n "test-post"  ## 新建文章，随后在 _posts 下产生 test-post 资源文件夹

将文章用到的图片如 test.png 放入 test-post 文件夹。

通过在 test-post.md 中用一个标签插入图片，渲染时根据站点配置转换为相应云存储链接前缀的图片地址。

使用云存储工具同步 _posts 下的文件，但忽略文章，只上传文章同名目录。

解决方案

标签插件

此方案的重点在于图片标签的转换，为此我写了一个插件：hexo-tag-imgurl。欢迎 Star，提出 Issue，提交 Pull request。

插件的使用示例如下：

1. 首先安装插件：

   在站点根目录下执行：

   1	npm i hexo-tag-imgurl --save

   之后配置云存储域名。在 _config.yml 中新增一个字段：

   1 2 3

   ## Imgurl ### Important: This value starts without a protocol and it doesn't end with '/'. imgurl: example.com/images ## 将此处域名改成你自己的

2. 在文章中使用如下标签插入：

   1	{% imgurl imagePath [class1,class2,classN] imgAttr %}

   举个例子，如果你的文章目录为 test-post，插入的图片为 test.png，并且你希望增加一个样式类名 full-image 和一些属性 alt 和 title，那么可以这样来写：

   1	{% imgurl test-post/test.png full-image alt:test title:test %}

   它将会被渲染为：

   1	<img src="//example.com/images/test-post/test.png" class="full-image" alt="test" title="test">`

   属性和样式类名都是可选的，且参数的位置顺序可以是无序。重要的是需要保持 imgurl 位于 % 后第一位。

   多个类名用逗号来分隔：

   1	{% imgurl alt:test test-post/test.png full-image,border,radius "title:test image" %}

   将会被渲染为：

   1	<img src="//example.com/images/test-post/test.png" class="full-image border radius" alt="test" title="test image">

   注意上述例子中如果属性值有空格，需要用引号来包裹属性的键值。

同步目录

七牛官方提供了命令行工具来进行同步 qshell。安装过程请查阅文档。

我们在 Hexo 根目录下新建一个配置文件 qiniu.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
   "src_dir"            :   "/home/rainy/Blog/source/_posts",
   "access_key"         :   "******",
   "secret_key"         :   "******",
   "bucket"             :   "rainylog-qiniu",
   "ignore_dir"         :   false,
   "key_prefix"         :   "images/",
   "overwrite"          :   false,
   "check_exists"       :   true,
   "check_hash"         :   true,
   "check_size"         :   false,
   "skip_suffixes"      :   ".md",
   "rescan_local"       :   true,
   "log_file"           :   "upload.log",
   "log_level"          :   "info"
}

根据文档来配置你需要的部分。

之后运行 qshell 来同步：

1

qshell qupload qiniu.json

同步成功会输出信息：

1
2
3
4
5
6
7

----------Upload Result----------
Total:   	 100
Success: 	 22
Failure: 	 0
Skipped: 	 78
Duration:	 9.628874363s
----------------------------------

整个流程就是如此，到这里就可以部署 Hexo。

配置提示

qshell 运行会产生日志等运行文件，如果用 git 来管理 Hexo 的源文件的话，需要在 .gitignore 里增加配置：

1
2
3

.qshell/
source/_posts/*
!source/_posts/*.md

忽略了 .qshell 目录和文章资源目录，防止 git 仓库引入图片突破仓库容量限制。

三方备份

为了以防万一，我还使用了 Dropbox 来进行文章目录 _posts 下的备份。

对于 Linux 来说，使用一个软链接即可。

1

ln -s ~/Blog/source/_posts ~/Dropbox/rainylog

-EOF-