Hexo相册功能

心血来潮

想起用Hexo搭博客也有一段时间了，但写的东西还是不多，主要还是自己懒吧~Orz
这两天突然想到自己blog上还有一个功能没实现，就是这篇文章的主题了，相册功能。
放假了，所以比较懒，看的番也多，看着看着就喜欢上了（次元迷），找了好多的番里面的壁纸，所以就想。嗯哼，要怎么保存呢，放在本机上？（开玩笑，程序猿一定要备份是吧）所以就想放在blog上，就开始了折腾之路。
╮(╯▽╰)╭，这次折腾了一天，总算是搞好了。Otz

主要工作

存储站点

图片存储我采用七牛，不放在github上，这样访问速度快点，体验也好点。
至于七牛云嘛，我之前就有了，速度快，还有10G免费空间，我目前就把他当图床用了，之后再拓展吧，现在能力一般。（滑稽脸）

PS：如果你没有，可以去注册一个，或者托管在github上也行

上述工作搞定了之后呢，接着，在自己本地blog的根目录下新建一个文件夹photos，主要是用来放你想要上传的图片。

上传

接着把图片上传到七牛上，也就是你相应的存储空间。

在这之前，先安装七牛依赖，如下：

npm install qiniu -S

下面需要一个脚本，把图片上传到七牛，主要是node
在根目录下新建一个js文件，例如我是新建了photo.js，然后把下面的内容复制进去：

const fs = require("fs");
// 相册相对路径
const path = "./photos/";

var qiniu = require("qiniu");


//需要填写你的 Access Key 和 Secret Key
qiniu.conf.ACCESS_KEY = '***';
qiniu.conf.SECRET_KEY = '***';

//要上传的空间 你自己的
bucket = '***';

//构建上传策略函数
function uptoken(bucket, key) {
  var putPolicy = new qiniu.rs.PutPolicy(bucket + ":" + key);
  return putPolicy.token();
}

//构造上传函数
function uploadFile(uptoken, key, localFile) {
  var extra = new qiniu.io.PutExtra();
  qiniu.io.putFile(uptoken, key, localFile, extra, function (err, ret) {
    if (!err) {
      // 上传成功， 处理返回值
      console.log('upload success : ', ret.hash, ret.key);
    } else {
      // 上传失败， 处理返回代码
      console.log(err);
    }
  });
}

//读取文件后缀名称，并转化成小写
function getFilenameSuffix(file_name) {
  if (file_name == '.DS_Store') {
    return '.DS_Store';
  }
  if (file_name == null || file_name.length == 0)
    return null;
  var result = /\.[^\.]+/.exec(file_name);
  return result == null ? null : (result + "").toLowerCase();
}

//获取文件名后缀名
String.prototype.extension = function () {
  var ext = null;
  var name = this.toLowerCase();
  var i = name.lastIndexOf(".");
  if (i > -1) {
    var ext = name.substring(i);
  }
  return ext;
}

//判断Array中是否包含某个值
Array.prototype.contain = function (obj) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === obj)
      return true;
  }
  return false;
};

// 类型匹配
function typeMatch(type, filename) {
  var ext = filename.extension();
  if (type.contain(ext)) {
    return true;
  }
  return false;
}

fs.readdir(path, function (err, files) {
  if (err) {
    return;
  }
  var arr = [];
  (function iterator(index) {
    if (index == files.length) {
      fs.writeFile("./source/photo/output.json", JSON.stringify(arr, null, "\t"));
      return;
    }
    fs.stat(path + files[index], function (err, stats) {
      if (err) {
        return;
      }
      if (stats.isFile()) {
        var imgExt = new Array(".png", ".jpg", ".jpeg", ".bmp", ".gif"); //图片文件的后缀名
        if (typeMatch(imgExt, files[index])) {
          var suffix = getFilenameSuffix(files[index]);
          if (!(suffix == '.js' || suffix == '.DS_Store')) {
            //要上传文件的本地路径
            filePath = path + files[index];
            console.log(files[index]);
            //上传到七牛后保存的文件名
            key = files[index];
            //生成上传 Token
            token = uptoken(bucket, key);

            uploadFile(token, key, filePath);
            arr.push(files[index]);
          }
        }
      }
      iterator(index + 1);
    })
  }(0));
});

接着运行这个文件

node photo.js

根据代码内容，会在你的blog目录下 \blog\source\photo生成一个json文件（output.json），代表的是你上传的图片的名字

Tips: 如果你source没有photo文件夹，就新建一个，否则node运行会报错
每次上传一次图片就要运行一次，更新json文件的内容

工作原理

图片上传成功后，通过脚本请求，把图片展示到对应的页面中。
相册页面通过get请求，生成这些图片的url，并添加到相册页面中，展示出来。
在\blog\themes\yelee\source\js\目录下新建一个photos.js文件(在你对应的主题的资源目录下创建，例如我这里的主题是yelee)，用来发送get请求，拼接成图片url的地址。
代码如下：

/**
 * Created by water on 2017/1/19.
 */
define([], function () {
  return {
    page: 1,
    offset: 20,
    init: function () {
      var that = this;
      $.getJSON("/photo/output.json", function (data) {
        that.render(that.page, data);

        that.scroll(data);
      });
    },

    render: function (page, data) {
      var begin = (page - 1) * this.offset;
      var end = page * this.offset;
      if (begin >= data.length) return;
      var html, li = "";
      for (var i = begin; i < end && i < data.length; i++) {
        li += '<li><div class="img-box">' +
          '<a class="img-bg" rel="example_group" href="https://oc1gyfe6q.qnssl.com/' + data[i] + '?raw=true"></a>' +
          '![](https://oc1gyfe6q.qnssl.com/' + data[i] + '?raw=true)' +
          '</li>';
      }


      $(".img-box-ul").append(li);
      $(".img-box-ul").lazyload();
      $("a[rel=example_group]").fancybox();
    },

    scroll: function (data) {
      var that = this;
      $(window).scroll(function () {
        var windowPageYOffset = window.pageYOffset;
        var windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight;
        var sensitivity = 0;

        var offsetTop = $(".instagram").offset().top + $(".instagram").height();

        if (offsetTop >= windowPageYOffset && offsetTop < windowPageYOffsetAddHeight + sensitivity) {
          that.render(++that.page, data);
        }
      })
    }
  }
})

https://oc1gyfe6q.qnssl.com/这个是七牛存储的站点，如果你用github的话请相应更改

配置

最简单的配置是直接修改主题的下面的main.js文件内容，我是这样做的，在此目录下\blog\themes\yelee\source\js\main.js的最后面添加

 if ($(".instagram").length) {
    require(['/js/photos.js', '/js/jquery.fancybox.js', '/js/jquery.lazyload.js'], function (obj) {
      obj.init();
    });
  }

展示

到这里就已经差不多了，接着在\blog\source\photo新建一个index.md文件，把图片展示在相册页面中，也就是应用起来。
在这里图片的样式用了主题里面默认的，你也可以相应自己更改。
内容如下：

<!--
--- Created by water
--- 2017/01/19
-->
<!--相册布局-->
<div class="instagram">
    <section class="archives album">
        <ul class="img-box-ul"></ul>
    </section>
</div>

到这里基本完成了相册的部署，哎，真不容易。

效果展示

基本如下，看起来还是美滋滋的

总结

这次用了一天时间搞这个，虽然中间遇到很多问题，但还是逐步尝试解决了，多动手就能多积累经验。
一开始我还只是一直看看看，没有动手，到后来慢慢的开始编写，修改，测试，成功。
还是很值得的，毕竟实现了我要的功能，也学到了一些东西。
还是要多磨练，我开始慢慢明白

实践是检验真理的唯一标准

这句话。
噗呲。好吧，希望自己能坚持下去。
学习嘛，跟着自己的心来。现在的我，只是懂一些表层的东西，接下来我想会慢慢接触原理类的东西。也只是这么说说辣（滑稽）
goodbye！

参考的文章

Hexo折腾记——基本配置篇
hexo 相册的搭建
hexo博客进阶－相册和独立域名