Hexo-Butterfly 多图排版
1 前言
Butterfly 主题自带的照片墙排版方式可以对多图并排，但是要求预先对图片尺寸设计好，也就是不能自行修改图片尺寸，体验不好；网上流传的各种 html 标签的写法要么不能正常显示，要么不能实现多图并排。笔者在此引入一种可以实现多图并排、并能调整大小的方式。该方式通过构建外挂标签，实现多图并排。因为笔者之前使用 Next 主题样式是比较容易实现多图并排的，因此就从 Next 主题中找出了相关的文件。
2 多图并排的实现方式
2.1 创建 group-pictures.js
在themes/butterfly/scripts/tag/目录下创建group-pictures.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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137/* global hexo */
;
var LAYOUTS = {
2: {
1: [1, 1],
2: [2]
},
3: {
1: [3],
2: [1, 2],
3: [2, 1]
},
4: {
1: [1, 2, 1],
2: [1, 3],
3: [2, 2],
4: [3, 1]
},
5: {
1: [1, 2, 2],
2: [2, 1, 2],
3: [2, 3],
4: [3, 2]
},
6: {
1: [1, 2, 3],
2: [1, 3, 2],
3: [2, 1, 3],
4: [2, 2, 2],
5: [3, 3]
},
7: {
1: [1, 2, 2, 2],
2: [1, 3, 3],
3: [2, 2, 3],
4: [2, 3, 2],
5: [3, 2, 2]
},
8: {
1: [1, 2, 2, 3],
2: [1, 2, 3, 2],
3: [1, 3, 2, 2],
4: [2, 2, 2, 2],
5: [2, 3, 3],
6: [3, 2, 3],
7: [3, 3, 2]
},
9: {
1: [1, 2, 3, 3],
2: [1, 3, 2, 3],
3: [2, 2, 2, 3],
4: [2, 2, 3, 2],
5: [2, 3, 2, 2],
6: [3, 2, 2, 2],
7: [3, 3, 3]
},
10: {
1: [1, 3, 3, 3],
2: [2, 2, 3, 3],
3: [2, 3, 2, 3],
4: [2, 3, 3, 2],
5: [3, 2, 2, 3],
6: [3, 2, 3, 2],
7: [3, 3, 2, 2]
}
};
function groupBy(group, data) {
var r = [];
for (let count of group) {
r.push(data.slice(0, count));
data = data.slice(count);
}
return r;
}
var templates = {
dispatch: function(pictures, group, layout) {
var rule = LAYOUTS[group] ? LAYOUTS[group][layout] : null;
return rule ? this.getHTML(groupBy(rule, pictures)) : templates.defaults(pictures);
},
/**
* Defaults Layout
*
* □ □ □
* □ □ □
* ...
*
* @param pictures
*/
defaults: function(pictures) {
var ROW_SIZE = 3;
var rows = pictures.length / ROW_SIZE;
var pictureArr = [];
for (var i = 0; i < rows; i++) {
pictureArr.push(pictures.slice(i * ROW_SIZE, (i + 1) * ROW_SIZE));
}
return this.getHTML(pictureArr);
},
getHTML: function(rows) {
var rowHTML = rows.map(row => {
return `<div class="group-picture-row">${this.getColumnHTML(row)}</div>`;
}).join('');
return `<div class="group-picture-container">${rowHTML}</div>`;
},
getColumnHTML: function(pictures) {
var columnWidth = 100 / pictures.length;
var columnStyle = `style="width: ${columnWidth}%;"`;
return pictures.map(picture => {
return `<div class="group-picture-column" ${columnStyle}>${picture}</div>`;
}).join('');
}
};
function groupPicture(args, content) {
args = args[0].split('-');
var group = parseInt(args[0], 10);
var layout = parseInt(args[1], 10);
content = hexo.render.renderSync({text: content, engine: 'markdown'});
var pictures = content.match(/<img[\s\S]*?>/g);
return `<div class="group-picture">${templates.dispatch(pictures, group, layout)}</div>`;
}
hexo.extend.tag.register('grouppicture', groupPicture, {ends: true});
hexo.extend.tag.register('gp', groupPicture, {ends: true});
该文件来自themes/next/scripts/tags/group-pictures.js。
2.2 创建 group-pictures.styl
在themes/butterfly/source/css/_tags目录下创建group-pictures.styl文件，并写入：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.post-body .group-picture img {
margin: 0 auto;
padding: 0 3px;
}
.group-picture-row {
margin-bottom: 6px;
overflow: hidden;
}
.group-picture-column {
float: left;
margin-bottom: 10px;
}
.page-post-detail .post-body .group-picture-column {
// float: none;
margin-top: 10px;
// width: auto !important;
img { margin: 0 auto; }
}
该文件来自themes/next/source/css/_common/scaffolding/tags/group-pictures.styl。
2.3 使用方法
更多的使用效果见：
布局格式可参考下图（个别布局顺序有出入）：
warning:1
![]()
在用markdown语法添加本地路径的图片时，注意()内要先写个空格，即( /images/xxx.png)，不然有可能会提示Markdown Image Path does not exists!。虽然这个并不影响图片的显示。
使用模板：1
2
3
4{% gp 2-1 %}
<img src="..." width = xxx alt="box-x" align=center />
<img src="..." width = xxx alt="box-y" align=center />
{% endgp %}
gp 2-1 即2张图按第1种格式排版。
默认大小，gp 2-2 或者 gp 2-0
自定义大小并调整位置使双图间无缝隙，gp 2-2 或者 gp 2-0
gp 2-1
默认大小，gp 2-2 或者 gp 2-0
1 | {% gp 2-0 %} |
自定义大小，gp 2-2 或者 gp 2-0
1 | {% gp 2-0 %} |
gp 2-1
1 | {% gp 2-1 %} |
gp 3-1
gp 3-2
gp 3-3
gp 3-1
1 | {% gp 3-1 %} |
gp 3-2
1 | {% gp 3-2 %} |
gp 3-3
1 | {% gp 3-3 %} |
gp 4-1
gp 4-2
gp 4-3
gp 4-4
gp 4-1
1 | {% gp 4-1 %} |
其他格式的代码你一定会自己写啦
微信支付
支付宝
