心血来潮
想起用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>' +
'' +
'</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！
