博客已遷移至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可以啊。在source\photo文件夾中新建一個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, "\t"));
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就會在source\photo下創建一個output.json文件。每次你要添加新圖片時，都要運行node tool.js。
有了這個json文件，接下來就要用到js生成html代碼了。
生成html代碼
在yourBlog\themes\yilia\source\js(yourBlog為你的博客根目錄，將yilia替換為你使用的主題)文件夾下新建一個photo.js的文件夾。為什么在這里建呢？因為編譯之后會出現在public\js文件夾中，博客使用的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\themes\yilia\source\js\main.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/