最终效果请看这里:https://linbei.top/photos
说明
关于
- 我使用的主题是hexo-theme-yilia,其中实现相册功能的方案是同步instagram上面的图片,但是现在instagram被禁,不能使用了
- 下面是通过自己的方式实现了相册功能,其中的样式还是使用该主题提供的。
方案
- 在github上新建一个仓库,主要用于存储图片,可以通过url访问到,也方便管理
- 将要放到相册的图片处理成json格式的数据,然后进行访问,这里json的格式需要配合要使用的样式,所以需要处理成特定格式的json数据,下面会给出
- 图片裁剪,因为相册显示的样式最好是正方形的的图片,这里使用脚本处理一下
- 图片压缩,相册显示的图片是压缩后的图片,提高加载的速度,打开后的图片是原图。
实现
github操作
- 建立一个用于存储相册的仓库,我这里建立了名为BlogPicturep的仓库
- 关于git的命令行操作和配置不再给出
博客操作
- 在博客的source文件夹下建立一个photos文件夹
- 如果是通过hexo new 的方式创建的记得把index.md文件删掉,我试过不删掉就渲染不出来。
- 将样式文件放到photos文件夹下,样式文件我都放到了github上:https://github.com/hanlinbei/hanlinbei.github.io/tree/master/photos 在github上一般很难下载单个文件夹,在这里我可以推荐一个gitzip的谷歌浏览器插件,可以右键很方便的把文件打包成一个压缩包下载,不必下载整个项目。整个项目很难下载得下来。
- 修改ins.js文件,主要是里面的render函数
- 其中的url对应到你的github放图片的地址
var render = function render(res) {
var ulTmpl = "";
for (var j = 0, len2 = res.list.length; j < len2; j++) {
var data = res.list[j].arr;
var liTmpl = "";
for (var i = 0, len = data.link.length; i < len; i++) {
var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];
var type = data.type[i];
var target = src + (type === 'video' ? '.mp4' : '.jpg');
src += '';
liTmpl += '<figure class="