博客已迁移至http://lwzhang.github.io。
基本上所有的hexo主题默认都没有实现相册功能，一方面相册功能的需求较少，毕竟hexo主要是写博客用的；另一方面实现相册功能比较麻烦，比如说：
-
图片放哪里，放在
source文件夹中，需要解析成静态文件，图片一旦多的话就会解析的非常慢 -
怎么批量获取图片
url(文件名)，图片那么多，不可能一个一个的手动输入图片url -
等等
所以需要找到一个好的解决方法。
注意：本博客使用的是yilia主题，该主题作者litten有实现了相册功能，但他是同步instagram的图片，我会用不同的方法实现一个相册功能。
新建一个页面
hexo new page "photo"
执行上面命令，会在source文件夹中生成photo文件夹，打开photo文件夹中的index.md文件，修改内容如下：
title: 相册
noDate: 'true'
---
<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>
相册的样式使用该主题作者的相册样式，如果大家使用其他主题，样式可以自己实现。
图片位置
图片不能放在source文件中，因为需要编译成静态文件，非常慢，那放在哪好呢？一般我们会把博客备份到github，这样可以在不同电脑上写博客。那么我们也可以把相册一起上传到github，所以，在博客根目录下建一个放置图片的文件夹photos，这样你上传再多的图片都可以。
获取图片
原生js不能很好的处理文件，所以用js并不能获取图片的文件名。虽然js不能处理文件，但是nodejs可以啊。在sourcephoto文件夹中新建一个tool.js文件，内容如下：
"use strict";
const fs = require("fs");
const path = "../../photos";
fs.readdir(path, function (err, files) {
if (err) {
return;
}
let arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("output.json", JSON.stringify(arr, null, " "));
return;
}
fs.stat(path + "/" + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
arr.push(files[index]);
}
iterator(index + 1);
})
}(0));
});
tool.js的作用是把所有的图片名称放在一个json文件中。运行node tool.js就会在sourcephoto下创建一个output.json文件。每次你要添加新图片时，都要运行node tool.js。
有了这个json文件，接下来就要用到js生成html代码了。
生成html代码
在yourBlog hemesyiliasourcejs(yourBlog为你的博客根目录，将yilia替换为你使用的主题)文件夹下新建一个photo.js的文件夹。为什么在这里建呢？因为编译之后会出现在publicjs文件夹中，博客使用的js都在这。
photo.js代码如下：
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/lwzhang/blog/blob/master/photos/' + data[i] + '?raw=true"></a>' +
'<img lazy-src="https://github.com/lwzhang/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);
}
})
}
}
})
其中https://github.com/lwzhang/blog/blob/master/photos/' + data[i] + '?raw=true是上传至github的图片链接。
因为不可能一次性将所有的图片都插入到页面中，所以我做了分页功能，一次加载20张图片。
引入photo.js最直接的方法是在index.md文件中引入：
title: 相册
noDate: 'true'
---
<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>
<script src="/js/photo.js"></script>
如果大家和我用的是同一主题，在yourBlog hemesyiliasourcejsmain.js文件末尾增加如下代码：
if($(".instagram").length) {
require(['/js/photo.js', '/fancybox/jquery.fancybox.js', '/js/jquery.lazyload.js'], function(obj) {
obj.init();
});
}
如果不是，看大家使用的主题有什么限制了。
生成静态文件
别忘了要在主题的配置文件_config.yml的menu下添加一个相册的菜单：
menu:
首页: /
归档: /archives
随笔: /tags/随笔
相册: photo
最后运行hexo g生成静态文件。就可以在本地查看或者上传github查看相册功能了。
相册功能就完成了。
大家可以看一下我的个人博客相册功能：http://lwzhang.github.io/photo/