如何在Hexo中實現自適應響應式相冊功能

用最清晰簡潔的方法整合一個響應式相冊


效果

技術選型

• 因爲我選用的主題使用了fancyBox做爲圖片彈出展現的框架，查看後表示很不錯，能知足須要
  http://fancyapps.com/fancybox/3/
• 圖片加載可能會太慢，因此還須要一個圖片延遲加載插件 Lazyload
• 想使用瀑布流做爲展現，粗略瞭解了下，便使用開源的MiniGrid，緣由是它很小巧也恰好知足需求(ps:它的文檔讓我看了很捉急,不完善的文檔是個大坑)

相冊文件夾

按照Hexo官方給的建議

資源（Asset）表明 source 文件夾中除了文章之外的全部文件，例如圖片、CSS、JS 文件等。比方說，若是你的Hexo項目中只有少許圖片，那最簡單的方法就是將它們放在 source/images 文件夾中。而後經過相似於 ![](/images/image.jpg) 的方法訪問它們。
對於那些想要更有規律地提供圖片和其餘資源以及想要將他們的資源分佈在各個文章上的人來講，Hexo也提供了更組織化的方式來管理資源。這個稍微有些複雜可是管理資源很是方便的功能能夠經過將 config.yml 文件中的 post_asset_folder 選項設爲 true 來打開。

post_asset_folder: true

而後就能夠在文件夾source下新建一個相冊文件夾Images,將照片放入這個文件夾

相冊頁面

咱們須要一個相冊頁面以加載全部照片

---
title: 相冊
noDate: 'true'
---
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
<script src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script>

<div class="ImageGrid"></div>

<script src="/js/photo.js"></script>

這裏使用noDate來自定義一些HTML數據，加載一些JS文件(minigrid在bootcss中仍是1.*的版本，只好使用它推薦的cdn了)，其中photo.js是自定義的，用來加載照片，稍後提到。
如今，咱們就有一個相冊頁面了，接下來的問題是怎麼批量加載那些照片。

腳本

你們能夠集思廣益，我是用的是一個教程中的腳本改的，與其思路一致。
在博客主文件夾下新建tool.js：

"use strict";
    const fs = require("fs");
    const sizeOf = require('image-size');
    const path = "./source/Images";
    const outputfile = "./source/Images/output.json";
    var dimensions;

    fs.readdir(path, function (err, files) {
        if (err) {
            return;
        }
        let arr = [];
        (function iterator(index) {
            if (index == files.length) {
                fs.writeFile(outputfile, JSON.stringify(arr, null, "\t"));
                return;
            }

            fs.stat(path + "/" + files[index], function (err, stats) {
                if (err) {
                    return;
                }
                if (stats.isFile()) {
                    dimensions = sizeOf(path + "/" + files[index]);
                    console.log(dimensions.width, dimensions.height);
                    arr.push(dimensions.width + '.' + dimensions.height + ' ' + files[index]);
                }
                iterator(index + 1);
            })
        }(0));
    });

每次在相冊中更新照片後都要在控制檯node tool.js一下，以便更新數據。
它會生成一個json文件，帶有每張照片的長寬及文件名。
須要它的寬高是由於咱們須要它知足瀑布流樣式。
output.json樣式相似於：

[
    "3120.4160 發票.jpg",
    "516.516 頭像.jpg",
    "402.180 錄音.jpeg",
    "720.758 截圖1.jpg",
    "720.978 截圖2.jpg"
]

photo.js

photo ={
    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 += '<div class="card">' +
                    '<div class="ImageInCard">' + 
                      '<a data-fancybox="gallery" href="/Images/' + data[i] + '">' +
                        '<img src="/Images/' + data[i] + '"/>' +
                      '</a>' +
                    '</div>' +
                    '<div class="TextInCard">'+data[i].split('.')[0]+'</div>' +
                  '</div>' 

        }

        $(".ImageGrid").append(li);
        $(".ImageGrid").lazyload();
        this.minigrid();
    },

    minigrid: function() {
        var grid = new Minigrid({
            container: '.ImageGrid',
            item: '.card',
            gutter: 12
        });
        grid.mount();
        $(window).resize(function() {
           grid.mount();
        });
    }

}

photo.init();

js文件也能夠放在Images文件夾下，只須要將相冊頁面加載的<script src="/js/photo.js"></script>改爲<script src="/Images/photo.js"></script>便可。

css

這個樣式是我本身寫的，你們能夠按照本身的想法自行更改：

.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto;text-align: center;}
.card {width:160px;height:260px;overflow: hidden;}
.ImageInCard {height:185px}
.ImageInCard img {height:100%;width: auto;padding: 0 0 0 0; }
.TextInCard {height:75;background-color: #fff;}

自動構建

我是使用travis-ci自動構建的。（用過之後表示很雞肋）
若是你也使用了這個的話，在travis.yml中的script或者before_script,添加一句node tool.js,就能夠將相冊腳本也加入自動構建：

script:
  - node tool.js
  - hexo g