hexo主題中添加相冊功能

博客已遷移至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/