NexT主题添加相册功能

发表于

给博客添加一个相册页面

_config.yml

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

之后在主题_config.yml文件中对应位置menu里添加Photos: /photos/ || camera ，这样生成后就能在页面的对应页面选项中有该相册Tab。

json

在博客根目录下新建uploadPhotos文件夹，里面将会存放照片以及相关文件。

新建uploadPhotos/Images/文件夹，然后在其中存放需要在页面中展示的照片集。

新建uploadPhotos/tool.py文件，里面内容如下，主要功能是访问照片文件夹，获取每张照片的size和name，并生成对应的json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import os, shutil, json
from PIL import Image

path = "Images/"
files= os.listdir(path)

li = []
for f in files:
    img = Image.open(path+f)
    li.append("{}.{} {}".format(img.size[0],img.size[1],f))
    shutil.copy(path + f, "../source/photos/Images/")

f = open("../source/photos/photoslist.json", "w+")
print (json.dumps(li), file = f)

文件样例如下：

1
["3024.3026 IMG_0873.jpg", "1442.1442 IMG_2033.jpg"]

photo.js

新建themes/next/source/photos/photo.js文件，其中photos文件夹是自己创建的。

photos.js内容如下，主要功能是访问json文件内容，遍历每行数据，并在页面对应位置上放置代码，展示图片：

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
48
49
50
51
52
53
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:160px">' +
                    '<div class="ImageInCard" style="height:'+ 160 * imageY / imageX + 'px">' +
                      '<a data-fancybox="gallery" href="/photos/Images/' + imgNameWithPattern + '" data-caption="' + imgName + '">' +
                        '<img src="/photos/Images/' + imgNameWithPattern + '"/>' +
                      '</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
13
14
15
16
17
{% 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 %}

依旧是该文件中，添加page.type === "photos"两行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% elif page.type === 'categories' %}
  <div class="category-all-page">
    <div class="category-all-title">
        {{ _p('counter.categories', site.categories.length) }}
    </div>
    <div class="category-all">
      {{ list_categories() }}
    </div>
  </div>


{% elif page.type === 'photos' %}
    <div class="ImageGrid"></div>


{% else %}
  {{ page.content }}
{% endif %}

_config.yml

主题配置文件_config.yml中相关部分，进行相关的配置（lazyload、fancybox）：
首先确保_config.yml中Fancybox部分是否开启：

1
2
# Fancybox
fancybox: true

之后亦在该文件_config.yml的末尾部分，找到

1
2
3
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

在这个vendors的选项下面，有对应的fancybox、lazyload配置区域，填写相应的URL即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 2.1.3
  jquery:

  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js

  fancybox_css: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css

  # Internal version: 1.0.6
  # See: https://github.com/ftlabs/fastclick
  fastclick:

  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload: https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js

之后在_layout.swig中配置：

1
2
3
4
<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>