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博客进阶-相册和独立域名

推荐阅读更多精彩内容