Hexo添加相册

最终效果请看这里：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="