close
此代码对应颜色为：
close

Ka Tou Space

二十三年前、この腐敗した世界に堕とされた...

为Huno主题添加相册功能

• 分类: Tech Blog • 标签: Hexo, Static Website

本博客基于Hexo博客框架，主题为Huno。Huno主题默认未实现相册功能，因此我们需自行编写相册以实现在博客网站中展示图片集的功能。本博客最终实现的相册界面如下所示：

Screenshot

本博客参考此文章：hexo主题中添加相册功能。

一、新建相册页面

打开Git Shell，输入以下指令，即可在source文件夹中生成photo文件夹。

1
hexo new page "photo"

接着打开photo文件夹中的index.md文件，修改内容如下：

1
2
3
4
5
6
7
8
9
---
title: 画廊
date: 2017-01-14 14:10:06
comments: false
---
-------------------------------------
<link type="text/css" href="/css/jquery.fancybox.css" rel="stylesheet">
<div class="instagram"><section class="archives album"><ul class="img-box-ul"></ul></section></div>
</br>

同时需要在主题目录的_config.yml文件中的menu下配置相册菜单。

二、编辑相册CSS样式

要使图片以美观的形式展现在网页上，需要利用CSS样式对其外观进行设定。在上一部分修改index.md文件的过程中我们已经引用了CSS样式，现在我们需要对所引用的样式进行设定。

进入主题目录打开source/css，新建instagram.css文件，编辑该文件内容如下：

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.galleryimage{
  object-fit: cover;
}
.instagram {
  position: relative;
  min-height: 500px;
}
.instagram .open-ins {
  display: block;
  padding: 10px 0;
  position: absolute;
  right: 28px;
  top: -75px;
  color: #333;
}
.instagram .open-ins:hover {
  color: #657b83;
}
.instagram .year {
  display: inline;
}
.instagram .album h1 em {
  font-style: normal;
  font-size: 14px;
  margin-left: 10px;
}
.instagram .album ul {
  padding-top: 17px;
  clear: both;
  width: 100%;
  text-align: left;
  margin: 0 0 0 0;
}
.instagram .album li {
  list-style: none;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 5px;
  margin-bottom: -10px;
  height: 0;
  width: 25%;
  position: relative;
  padding-bottom: 25%;
}
.instagram .album li:before {
  display: none;
}
.instagram .album div.img-box {
  position: absolute;
  width: 90%;
  height: 90%;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);
}
.instagram .album div.img-box img {
  width: 100%;
  height: 100%;
}
.instagram .album div.img-box .img-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0px;
  width: 100%;
  margin: -5px;
  padding: 5px;
  background: rgba(204,204,204,0.8);
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);
  -webkit-transition: all 0.15s ease-out 0.1s;
  -moz-transition: all 0.15s ease-out 0.1s;
  -o-transition: all 0.15s ease-out 0.1s;
  -webkit-transition: all 0.15s ease-out 0.1s;
  -moz-transition: all 0.15s ease-out 0.1s;
  -ms-transition: all 0.15s ease-out 0.1s;
  -webkit-transition: all 0.15s ease-out 0.1s;
  -moz-transition: all 0.15s ease-out 0.1s;
  -ms-transition: all 0.15s ease-out 0.1s;
  transition: all 0.15s ease-out 0.1s;
  opacity: 0.2;
  cursor: pointer;
  display: block;
}
.instagram .album div.img-box .img-bg:hover {
  opacity: 0;
}
@media screen and (max-width: 600px) {
  .instagram .album ul {
    margin-left: 0;
    text-align: center;
  }
  .instagram .album li {
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    text-align: center;
  }
  .instagram .album div.img-box {
    margin: 0;
    width: 90%;
    height: 90%;
  }
}

三、设定相册图片源

首先在博客项目根目录新建photos文件夹，将所需要展示的图片全部放入该文件夹中。然后在source\photo文件夹中新建一个tool.js文件，内容如下：

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
"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));
});

该文件的作用是把所有在根目录photos文件夹中所有图片的名称放在新生成的source\photo文件夹中output.json文件中。因此每次添加新图片时，都要执行以下指令：

1
node tool.js

四、生成相册HTML代码

进入主题目录打开source/js，新建photo.js文件，输入以下代码：

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
54
define([], function () {
    return {
        page: 1,
        offset: 25,
        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++) {
                var name = data[i].substring(0, data[i].length - 4);
                li += '<li><div class="img-box">' +
                    '<a class="fancybox" rel="article0" title='+ name +' href="http://123.206.207.125/photos/' + data[i] + '?raw=true">' +
                    '<img class="galleryimage" src="http://123.206.207.125/photos/' + data[i] + '?raw=true" />' +
                    '</a>' +
   	   	    '</li>';
            }
            //html = '<section class="archives album">' +
            //    '<ul class="img-box-ul">' + li + '</ul>' +
            //    '</section>';
            $(".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);
                }
            })
        }
    }
})

其中123.206.207.125为本人腾讯云服务器的IP地址，即存储图片的服务器IP地址。本页面中一次最多显示25张照片。

为了在页面中引入photo.js，需要打开photo文件夹中的index.md文件，在最后一行加入以下代码：

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

同时，需要在主题目录内的source/js/main.js中添加以下代码：

1
2
3
4
5
if($(".instagram").length) {
    require(['/js/photo.js', '/js/jquery.fancybox.js', '/js/jquery.lazyload.js'], function(obj) {
      obj.init();
    });
  }

至此相册功能构建完成。

分享到： QQ空间 新浪微博 腾讯微博 微信 更多