如何在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