前言
HEXO本身不自带相册功能,结合 Hexo Next 博客添加相册瀑布流 给next主题添加了相册功能,感谢林夕水共作者Smaug,由于作者图床基于github,本文则基于七牛云实现相册功能,希望对你有所帮助。
效果图
在继续往下阅读之前,先看看效果图是不是你想要的。本文结合fancybox实现更友好的查看效果。
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。

图床准备
本文使用七牛云作为仓库存储图片文件(也称图床),你也可以使用其他的对象云或者github,比如上述文章使用的github来做为图床。
使用七牛云作为图床存储图片,为了长期使用,需要做一些事情:
- 需要先申请一个属于自己的域名,并且需要ICP备案
- 使用一个二级域名来绑定七牛云的空间,比如pic.marslab.cn绑定的是七牛云的marslab空间,并且根据七牛云的配置提示做相应的域名解析
- 给该二级域名申请SSL证书,使用 https://pic.marslab.cn 来访问图片
- 配置好之后,可以使用自定义域名访问图片,如图:
图片准备
为了方便Hexo next主题博客本地图片上传到七牛云,可以采用Hexo七牛同步插件
在你的hexo主目录下运行以下命令进行安装:
npm install hexo-qiniu-sync –save
添加插件配置信息到 _config.yml 文件中,具体每个配置的含义请自行百度。
1 | qiniu: |
上述配置正确之后,通过hexo s
命名即可将本地文件
注意不仅限于图片(位于博客主目录下static\imgage, static\js, static\css
)上传到七牛云服务器。
搭建相册功能
新建photo页面
在 博客根目录\source\
下新建 photos文件夹
然后进入photos目录
,新建index.md
文件
然后将下面的内容粘贴到index.md
中,其中已经将fancybox
的js和css引入进来。
1 | --- |
修改Next主题配置文件
添加了 photos 页面后,需要在 next 配置文件
中修改:themes/next/_config.yml
找到 menu 项,填入如下:photos: /photos || fas fa-camera-retro
添加之后的是这样的:
1 | menu: |
完成之后还需要修改一下这个文件:themes/next/languages/zh-CN.yml
找到 menu 项,加入如下一行:photos: 摄影
比如是这样的:
1 | menu: |
JS配置
将下面几个js文件下载好之后放在根目录/source/photos/ 下面:
图片信息文件
再次回到 photos 目录
,创建文件 photoslist.json
:
然后输入下面的内容:
1 | [ |
到这里应该能看到这个 摄影
页面了,你可以现在本地测试一下看:hexo s -g
本地测试一下,如果你能看到在博客的 摄影 页面看到这两张图片,那么说明你的配置没问题,你可以进行接下来的操作了;如果你不能正确显示,说明前面的步骤出了问题,自己研究调试一下;如果你还不能解决,欢迎联系我。
使用 python 脚本生成 photoslist.json
上面可以看到,photoslist.json
存放的是图片的信息,photo.js 解析 photoslist.json
这个文件,然后在 photos 页面添加 dom.
所以核心的部分在于 photoslist.json 文件,我们可以分析下这个文件:
1 | 1080.1920;WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114_small.jpeg |
photoslist.json 保存的是一个 list,list 中每一行是一张图片的信息,包括原始图片大小、文件名、原始图片cdn链接、缩略图cdn链接
。
上面已经准备好七牛云作为图床,接下来使用py脚本自动生成json文件。
下载phototool.py存入 博客根目录/source/photos
下面,可以为电脑任意地方都行
。
这里重点需要关注的是配置:
1 | config = { |
简单解释一下这个脚本:
github_img_host_base
: 这个目录也就是本地的仓库目录,绝对路径img_path
: 存放瀑布流图片,对应本地的路径cdn_url_prefix
:自定义域名访问图片的前缀地址photo_info_json
: photoslist.json 路径
然后执行:python phototool.py
需要注意如果电脑没有安装python环境,需要百度搜索安装下环境,然后安装PIL组件:pip install -i http://mirrors.aliyun.com/pypi/simple/ pillow
上述指定国内源快速安装

如果需要更新图片:
- 只需要把新图片放到本地的文件夹,然后执行
- python phototool.py
- 检查一下 photoslist.json 文件对不对,然后发布博客:
- hexo d -g
结束语
由于我是采用回忆的方式来写的博文,所以文中可能会有一些小的修改或者配置我忽略了,不过问题不大,大家如果碰到问题了可以自行研究一下,能解决的。