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 和一些属性 alttitle,那么可以这样来写:

    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–