Fork me on GitHub

Hexo NexT主题下添加相册模块

发表于 | 分类于

图片

新建相册页面

首先新建相册页面hexo new page photos,将会在source/下创建photos/index.md，在其中添加type: photos。

_config.yml

在主题_config.yml文件中对应位置menu里添加Photos: /photos/，这样生成后就能在页面的菜单栏中出现相册选项。

json

在博客根目录下新建uploadPhotos文件夹，里面将会存放照片以及相关js文件。
新建uploadPhotos/Images/文件夹，然后在其中存放需要在页面中展示的照片集（在GitHub中新建相册库，并上传图片）。
新建uploadPhotos/tool.js文件，里面内容如下，主要功能是访问照片文件夹，获取每张照片的size和name，并生成对应的json文件：
命令：Git Bash中键入 node tool.js生成json。
注：若出现Error: Cannot find module 'image-size'问题，请在Git Bash中键入对应命令npm install image-size进行安装。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
"use strict";
    const fs = require("fs");
    const sizeOf = require('image-size');
    const path = "Images";
    const output = "../themes/next/source/photos/photoslist.json";
    var dimensions;
    fs.readdir(path, function (err, files) {
        if (err) {
            return;
        }
        let arr = [];
        (function iterator(index) {
            if (index == files.length) {
                fs.writeFile(output, 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));
    });

json文件样例如下(图片宽度.图片高度+空格+图片名.图片格式):

1
2
3
4
5
6
7
8
[
	"440.556 IMG_0101.jpg",
	"440.613 IMG_0102.jpg",
	"440.612 IMG_0103.jpg",
	"440.612 IMG_0104.jpg",
	"200.245 IMG_0105.jpg",
	"440.610 IMG_0106.jpg",
]

photo.js

新建themes/next/source/photos/photo.js文件，其中photos文件夹是自己创建的.
photos.js内容如下，主要功能是访问json文件内容，遍历每行数据，并在页面对应位置上放置代码，展示图片（其中图片链接为自个GitHub相册库中图片的链接）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
photo ={
    page: 1,
    offset: 20,
    init: function () {
        var that = this;
        $.getJSON("/photos/photoslist.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, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        for (var i = begin; i < end && i < data.length; i++) {
           imgNameWithPattern = data[i].split(' ')[1];
           imgName = imgNameWithPattern.split('.')[0]
           imageSize = data[i].split(' ')[0];
           imageX = imageSize.split('.')[0];
           imageY = imageSize.split('.')[1];
            li += '<div class="card" style="width:330px">' +
                    '<div class="ImageInCard" style="height:'+ 330 * imageY / imageX + 'px">' +
                      '<a data-fancybox="gallery" href="https://github.com/asdfv1929/BlogPhotos/blob/master/Images/' + imgNameWithPattern + '?raw=true" data-caption="' + imgName + '">' +
                        '<img src="https://github.com/asdfv1929/BlogPhotos/blob/master/Images/' + imgNameWithPattern + '?raw=true"/>' +
                      '</a>' +
                    '</div>' +
                    // '<div class="TextInCard">' + imgName + '</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();

photos.swig

新建themes/next/layout/photos.swig文件，其内容模仿tag.swig中内容（直接复制粘贴），然后将其中的tag全部替换为photos。

photos.css

新建themes/next/source/photos/photos.css样式文件，内容如下：

1
2
3
4
5
.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto; text-align: center;}
.card {overflow: hidden;transition: .3s ease-in-out; border-radius: 8px; background-color: #ddd;}
.ImageInCard {}
.ImageInCard img {padding: 0 0 0 0;}
.TextInCard {line-height: 54px; background-color: #ffffff; font-size: 24px;}

page.swig

修改themes/next/layout/page.swig文件，添加下面代码中中间page.type === “photos”那两行。

1
2
3
4
5
6
7
8
9
10
11
12
{% block title %}{#
#}{% set page_title_suffix = ' | ' + config.title %}{#
#}{% if page.type === "categories" and not page.title %}{#
  #}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === "tags" and not page.title %}{#
  #}{{ __('title.tag') + page_title_suffix }}{#
#}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#
#}{% else %}{#
  #}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#
#}{% endblock %}

_layout.swig

在主题_layout.swig文件末尾，添加内容：

1
2
3
4
5
6
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script type="text/javascript" src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script>
<link rel="stylesheet" href="/photos/photos.css">
<script type="text/javascript" src="/photos/photo.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

整个过程结束，查看图片是否以瀑布流的方式呈现。

总结

  • 在花了两天的时间来实现相册模块，网上查阅了很多博文，期间碰到很多问题都一一解决了。期间花费时间最长的一个问题是图片无法加载，后来发现是图片链接地址写错，真的是坑。将照片存放在一个新的github仓库中，单个照片的链接居然跟外层的链接不一样。我还以为是其他地方出了问题，一直在改其他地方。

  • 参考链接博主给了我很大帮助，在此表示感谢。

参考链接

Hexo NexT主题内添加相册功能