0%

Hexo七牛同步插件使用笔记

同步插件

hexo-qiniu-sync是一款HEXO插件,可以在文档中嵌入存储在七牛云上的图片、JS、CSS类型的静态文件,可以不用手动上传文件到七牛云,在运行hexo s的时候插件自动将本地目录的文件同步到七牛云。

在HEXO主目录下运行以下命令进行安装,其插件配置请参考官方文档
npm install hexo-qiniu-sync --save

目前现状

  1. 七牛云支持多个空间,但是该插件目前只支持上传到一个指定的空间
  2. 站点资源文件不需要有缩略图,照片需要通过phototool.py工具生成缩略图,因此站点资源图片和照片分文件夹存储,比如照片:大阪一兰拉面排号.jpg 通过python工具会生成缩略图 大阪一兰拉面排号_small.jpg

调整地方

  1. 该插件默认在 博客根目录/static/下创建三个文件夹,分别为image, css, js,为了满足上述的需求,在static目录下再新建photo文件夹
  2. 经过实验发现,该插件可以将static下的任意文件夹的静态资源上传到七牛云,这个功能很赞,不需要对插件进行改造
  3. 调整python图片处理工具的配置即可实现照片和站点图片资源的区分开,指定工具只对photo目录的图片进行处理并写入json文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    config = {
    # github 存储图片的仓库(本地仓库基准目录)
    'github_img_host_base': 'D:\学习+笔记+资料\HEXO实验室日记\static\photo',
    # 会对这个目录下的所有文件夹进行遍历,相同目录生成_samll 的 缩略图
    'img_path': 'D:\学习+笔记+资料\HEXO实验室日记\static\photo',
    # cdn 前缀
    'cdn_url_prefix': 'https://pic.marslab.cn/photo/',
    # hexo 博客存放 photos 信息的 json 文件
    'photo_info_json': 'D:\学习+笔记+资料\HEXO实验室日记\source\photos\photoslist.json',
    }
    配置之后如下图:python小工具配置图

使用注意事项

由于采用上述方法将站点资源图片和照片区分开来,因此在使用的时候需要遵循以下规范:

1. 上传照片到摄影模块

  • 需要将照片存储到本地的static/photo目录
  • 通过python命名执行phototool.py小工具,自动生成摄影模块json数据 - photoslist.json
  • 通过hexo s命名即可将照片以及工具生成的缩略图上传到七牛云
  • 发布站点就可以发现新增的照片已经在摄影模块完美展示出来

2. 上传站点资源图片

  • 站点资源图片包括博文中的截图,该类截图不要生成缩略图,因此只需要将资源图片放到static/image
  • 其次通过七牛云标签 {% qnimg stawberry.jpg title:七牛云自动上传图片 alt:七牛云自动上传图片 'class:class1 class2' %} 即可在博文中显示该截图
  • 也是通过hexo s命名即可将照片以及工具生成的缩略图上传到七牛云
  • 发布站点就可以发现新增的照片已经在摄影模块完美展示出来