前言
一直没有时间来整理下博客搭建的一些事情,现在补上一篇,给 Hexo Next 博客添加一个相册功能,使用瀑布流的方式。
原理说明
- 使用 github 作为仓库存储图片文件(图床)
- 使用 jsdelivr 进行图片 CDN 加速
优点
此种方式的优点是免费,不需要购买其他的对象存储产品;并且使用的是 github 作为图床,图片不会丢失。
早期的博文使用的是七牛云的免费存储,结果后来被他们删掉了。。。结果造成文中的一些图片链接都是 404,有兴趣的可以翻一翻我早期的博客。
缺点
由于采用的是 github 仓库存储图片,但是 github 对单仓库有 50MB 的大小限制,所以单仓库可能不能够存储太多的文件;
解决方法就是建立很多的图片仓库(稍微有点费劲,不过是行得通的);另外上传的单张图片大小最好不要太大。
还有个缺点就是得折腾啊,且看我后文。
各位可以参考下我的相册瀑布流: 摄影
开始搭建相册瀑布流
开始之前,需要简单介绍一下,我参考的是 Hexo NexT 博客增加瀑布流相册页面 这篇文章,文中涉及到的脚本主要都是 js 实现;与他不同的是,由于我对 js 的掌握远远不及我对 Python 的掌握,故部分脚本我采用了 Python 实现。
所以在开始操作之前,你可以根据自己的技能,选择不同的方式。如果你擅长 python,那么跟着我来吧。
新建 photo 页面
去到博客根目录:
1 | mkdir -p source/photos |
然后进入 photos 目录:
1 | cd source/photos |
把下面的粘贴保存:
1 | --- |
修改 Next 主题配置文件
添加了 photos 页面后,需要在 next 配置文件中修改:
1 | vim themes/next/_config.yml |
找到 menu 项,填入如下:
1 | photos: /photos || fas fa-camera-retro |
比如我的是这样的:
1 | menu: |
完成之后还需要修改一下这个文件:
1 | vim themes/next/languages/zh-CN.yml |
找到 menu 项,加入如下一行:
1 | photos: 摄影 |
比如我的是这样的:
1 | menu: |
OK,到这里应该能看到这个 摄影 页面了,你可以现在本地测试一下看:
1 | hexo s -g |
添加 js 脚本
首先需要在 source 目录下新建一个 js 目录,用来保存自定义的一些 js 脚本;
1 | mkdir -p source/js |
然后新建 mygrid.js 文件,粘贴下面的一段代码:
1 | // 获取网页不含域名的路径 |
或者你可以直接在我的博客上找到: rebootcat.com/mygrid.js
1 | wget https://rebootcat.com/js/mygrid.js -O source/js/mygrid.js |
新建图片信息文件
我们再次回到 photos 目录,创建文件 photoslist.json:
1 | vim source/photos/photoslist.json |
然后输入如下的内容:
1 | [ |
OK, 到现在应该你能从博客上看到这两张图片了:
1 | hexo s -g |
本地测试一下,如果你能看到在博客的 摄影 页面看到这两张图片,那么说明你的配置没问题,你可以进行接下来的操作了;如果你不能正确显示,说明前面的步骤出了问题,自己研究调试一下;如果你还不能解决,欢迎联系我。
使用 python 脚本生成 photoslist.json
上面可以看到,photoslist.json 存放的是图片的信息,mygrid.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链接。
前面已经提到,我们的图片是使用了 github 作为图床(仓库),然后使用 jsdelivr 进行 cdn 加速。所以我们应该准备好图片文件,然后上传到仓库。
新建 github 仓库,用来存放图片文件
在 https://github.com 上创建图片仓库。
当仓库容量超过 50MB 之后需要重新再新建一个仓库
本地克隆仓库,然后把图片放入仓库,上传(这里以我的仓库为例)
1 | git clone git@github.com:smaugx/MyblogImgHosting_2.git blogimg_2 |
生成 photoslist.json 文件
编写 python 脚本或者直接从我的网站下载:
1 | wget https://rebootcat.com/js/phototool.py -O phototool.py |
脚本如下:
1 | #!/usr/bin/env python |
这里重点需要关注的是:
1 | config = { |
简单解释一下这个脚本:
- github_img_host_base: 这个目录也就是本地的仓库目录,绝对路径(上面克隆的仓库对应的本地文件夹路径)
- img_path: 我单独新建了 rebootcat/photowall 目录存放瀑布流图片,对应本地的路径
- cdn_url_prefix:jsdelivr cdn url 前缀,只需要更改成你自己的github 用户名以及仓库名
- photo_info_json: photoslist.json 路径
上面几个参数一定要配置对了。
那么简单解释一下脚本的功能:
脚本会递归的查找 img_path 目录下的图片,然后进行一定的压缩(99%),这里的压缩目的并非真的是压缩,而是为了去除一些敏感信息,比如 GPS 信息。注意这里会覆盖掉原始图片。然后会生成图片的缩略图,同时根据上面的几个配置参数,生成两个 cdn url,一个对应的是原始图片的 cdn url,一个是缩略图的 cdn url.
然后执行:
1 | python phototool.py |
脚本执行完,就会增量生成 photoslist.json,可以先打开检查下对不对,或者把里面的 cdn url 复制出来从浏览器看能不能访问。
注意需要把本地图片仓库推送到远程。
这个 phototool.py 脚本你可以随便放在哪里,当你更新图片之后重新执行一遍就可以了。当然你也可以像我一样,跟网站源码直接放一起,所以你可以看到,我直接放到了 js 目录。
更新图片
把新图片放到本地仓库,然后执行:
1 | python phototool.py |
检查一下 photoslist.json 文件对不对,然后发布博客:
1 | hexo d -g |
发布之后,记得把本地图片仓库推送到远端,不然 jsdelivr 无法访问到。
至此,一个相册瀑布流就制作完成了!
The End
由于我是采用回忆的方式来写的博文,所以文中可能会有一些小的修改或者配置我忽略了,不过问题不大,大家如果碰到问题了可以自行研究一下,能解决的。
采用 github 作为图床来存放大量的瀑布流图片墙,方案是没问题的,只不过可能由于仓库容量的限制,需要在 github 上构建多个图片仓库。
对于我来说,github 图片仓库主要用来存放博文中涉及到的图片。至于图片墙,我再另想办法吧。
Blog:
2020-09-19 于杭州
By 史矛革