我们分析一下，想要获取相册图片，首先得拿到图片得线上地址，其次，我们可以想到，既然我们的博客内容都放在了github得服务器，那么图片又何尝不能呢？
使用hexo搭建博客的同学都知道，github上会建立一个名为username.github.io的仓库，而且仓库只存储了整个项目的一部分（source文件夹的内容），而且貌似这个仓库有大小限制，总之就是说不能把图片放在这个仓库里。
我们再考虑另一个问题，假如我们有一天需要在另一台电脑写博客怎么办？所以博客备份就是需要的了。那么好，我们在Github 上再建一个仓库，用来存储整个博客项目的文件，假如某一天换个环境，直接全部down下来，就能拿到所有文章的源文件了，所以正好，我们可以在根目录下新建一个photos文件夹用来存放相册需要展示的图片文件了。
ok，分析结束，敲定技术方案：
存放照片 在博客的根目录下创建一个photos的文件夹，里面存放你想要展示的照片文件。然后把整个项目部署到github上，才能访问到图片的线上地址。
生成json文件 在根目录下创建一个nodejs文件tool.js，内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"use strict";
var fs = require("fs");
var path = "./photos/";
fs.readdir(path, function (err, files) {
if (err) {
return;
}
var arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("./source/photos/data.json", JSON.stringify(arr, null, "\t"));
console.log('get img success!');
return;
}
fs.stat(path + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
arr.push(files[index]);
}
iterator(index + 1);
})
}(0));
});
运行这个文件node tool.js，运行之后，会在/source/photos/目录下创建一个data.json文件，内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[
"IMG_0011.JPG",
"IMG_0019.JPG",
"IMG_0020.JPG",
"IMG_0022.JPG",
"IMG_0045.JPG",
"IMG_0099.JPG",
"IMG_0106.JPG",
"IMG_0191.JPG",
"IMG_0306.JPG",
"IMG_0438.JPG",
"IMG_0451.JPG",
"IMG_0648.JPG",
"IMG_0670.JPG",
"IMG_0842.JPG",
"IMG_1078.JPG",
"IMG_1239.JPG",
"IMG_1429.JPG",
"IMG_1634.JPG"
]
每次修改photos文件夹里的照片，都得运行一下这个js文件，以更新生成的data.json文件。
创建相册页面
hexo page photos1
2
3
4
5
6
<link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
<div class="instagram">
<section class="archives album">
<ul class="img-box-ul"></ul>
</section>
</div>
修改themes/yilia/js/photo.js：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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://github.com/xiaohang96/blog/blob/master/photos/' + data[i] + '?raw=true"></a>' +
'<img lazy-src="https://github.com/xiaohang96/blog/blob/master/photos/' + 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);
}
})
}
}
})
上述文件读取json文件，将图片的线上url拼接起来渲染在页面上，相册样式使用yilia主题提供。然后上传这些文件，根据自定义的路径访问url，就能看到相册了。那么，到这里就基本完成了相册的制作。
