Hexo+Github实现相册功能

Hexo+Github实现相册功能

• 最终效果请看这里：http://lawlite.me/photos/

一、说明

1、关于

• 我使用的主题是hexo-theme-yilia，其中实现相册功能的方案是同步instagram上面的图片，但是现在instagram被禁，不能使用了
• 下面是通过自己的方式实现了相册功能，其中的样式还是使用该主题提供的

2、方案

• 在github上新建一个仓库，主要用于存储图片，可以通过url访问到，也方便管理
• 将要放到相册的图片处理成json格式的数据，然后进行访问，这里json的格式需要配合要使用的样式，所以需要处理成特定格式的json数据，下面会给出
• 图片裁剪，因为相册显示的样式最好是正方形的的图片，这里使用脚本处理一下
• 图片压缩，相册显示的图片是压缩后的图片，提高加载的速度，打开后的图片是原图。

二、实现

1、github操作

• 建立一个用于存储相册的仓库，我这里建立了名为Blog-Back-Up的仓库
  
• 关于git的命令行操作和配置不再给出

2、博客操作

• 在博客的source文件夹下建立一个photos文件夹
• 将样式文件放到photos文件夹下，样式文件我都放到了github上：https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy
• 修改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