总结 / 试图阅读相册的代码（模板四）

发表于
“太难为我了。”

总述 相册功能增加的文件&修改

文件位置："F:\1-blog\MyWeb\source\gallery"

1
2
3
4
5
6
7
8
9
- img (相册封面文件夹)
  - sample.jpg （相册封面）
- sample （一个暂定名为sample的相册）
  - img （相册sample的原图存放点）
    - s （相册sample的缩略图存放点，若省略则以文件名-s.jpg的格式命名缩略图）
      - sample.jpg （缩略图）
    - sample.jpg （原图）
  - index.md 
- index.md （相册主界面配置文件）

修改：
config.yml添加了导航栏中的画廊图标。
建立gallery.styl文件，使其被引用。

相册主界面配置文件index.md

文件位置："F:\1-blog\MyWeb\source\gallery\index.md"

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
<center>！相册描述【此行可删除】</center> 
<!--center居中标签--> 
<center>自定义分隔符【此行可删除】</center> 
<div class="gallery-page"> 
  <!--div标签可定义文档中的分区或节，把文档分割为独立的、不同的部分，它的内容自动地开始一个新行。--> 
  <!--为该层div标签中的内容匹配名为"gallery-page"的一类格式--> 
	<div class="gallery-list"> 
    <!--为该层div标签中的内容匹配名为"gallery-list"的一类格式--> 
		<div class="gallery-column"> <!--第一列开始-->
      <!--为该层div标签中的内容匹配名为"gallery-column"的一类格式--> 
			<div class="gallery-item">
        <!--为该层div标签中的内容匹配名为"gallery-item"的一类格式--> 
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a> <!--a标签为超链接，其href属性指示链接的目标--> 
        <!--a标签包裹一张图片，指向gallery/img文件夹下的某张图。该图作为相册封面图。--> 
				<p>- ！相册1 -</p><!--p标签为段落标签，它生成一个段落--> 
			</div>
			<div class="gallery-item">
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a>
				<p>- ！相册2 -</p>
			</div>
		</div><!--第一栏（column）到此结束，该栏定义了两个相册-->
		<div class="gallery-column"><!--第二栏开始-->
			<div class="gallery-item">
				<a href="sample"><img src="img/sample.jpg">
				</a>
				<p>- 相册名 -</p>
			</div>
		</div><!--第二栏结束，含有一个相册-->
		<div class="gallery-column"><!--第三栏开始-->
			<div class="gallery-item">
				<a href="sample"><img src="img/sample.jpg">
				</a>
				<p>- 相册名 -</p>
			</div>
			</div>
		</div><!--第三栏结束，含有一个相册-->
	</div><!--列表结束，含有三栏-->
</div><!--页面结束-->
<center>自定义分割线【此行可删除】</center>

相册内部界面配置文件index.md

文件位置："F:\1-blog\MyWeb\source\gallery\sample\index.md"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: -画廊/-
date: 2018-10-25 04:20:09
comments: false
---
<center>相册内容</center>
<center>.+†+.</center>
<div class="gallery-page">
	<div class="img-list">
		<div class="img-column">
			<a href="img/sample.jpg" target="_Blank"><img src="img/s/sample.jpg"></a>
		</div>
		<div class="img-column">
			<a href="img/sample.jpg" target="_Blank"><img src="img/s/sample.jpg"></a>
		</div>
		<div class="img-column">
			<a href="img/sample.jpg" target="_Blank"><img src="img/s/sample.jpg"></a>
	</div>
</div>
<center>.+ﾟ♪ﾟ+.ｏ.+ﾟ♪ﾟ+.ｏ.+ﾟ♪ﾟ+.ｏ.+ﾟ♪ﾟ+.ｏ.+ﾟ♪ﾟ+.ｏ.+ﾟ♪ﾟ+.</center>

样式文件gallery.styl

要应用样式，首先复制代码，建立gallery.styl文件，我将其放在"F:\1-blog\MyWeb\themes\next\source\css\_common\components\gallery.styl"。
并在"F:\1-blog\MyWeb\themes\next\source\css\_common\components\index.styl"中增加引用：

1
2
3
4
5
……
@import 'back-to-top';
@import 'reading-progress';
@import 'gallery';  #新增
……

文件位置："F:\1-blog\MyWeb\themes\next\source\css\_common\components\gallery.styl"

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
/*gallery*/
/*gallery-page的样式，只规定了顶部距离*/
/*这是一个类选择器，类名为gallery-page，花括号中配置这一类下的元素遵循何种属性*/
.gallery-page {
	margin-top: 50px;
}
/*img-list及gallery-list两个类的样式*/
/*用的Flex 布局*/
.img-list,
.gallery-list {
  display: -webkit-flex; /* Safari */
	display: flex; /* 指定为flex布局 */
	flex-direction: row; /* 项目的排列方向，row（默认值）：主轴为水平方向，起点在左端。 */
	flex-wrap: wrap; /* flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行。 */
	align-items: flex-start;/* 项目在交叉轴上如何对齐，flex-start：交叉轴的起点对齐。 */
  justify-content: space-around;/*项目在主轴上的对齐方式，space-around：每个项目两侧的间隔相等。*/

}

/*img-column类的样式*/
.img-column {
	display: flex;
	flex-direction: column-reverse;/* 主轴为垂直方向，起点在下沿。 */
}

/*规定所有img-column和gallery-column类下a标签的样式*/
.img-column a,
.gallery-column a {
	border-bottom: 0px;/*设置底部边框样式*/
}
.gallery-item {
	margin-bottom: 50px;/*设置元素的下边距*/
}
.gallery-item p {
	margin: 25px auto 10px;
	max-width: 200px;
	text-align: center;
	font-size: 15px;

}

/*设置显示的图片（元素a）的大小*/
.posts-expand .post-body .gallery-column a img {
	height: 200px;
	width: 200px;
	object-fit: cover;
}

@media (max-width: 767px){
	.gallery-item p {
		min-width: 75px;
		font-size: 13px;
	}
}

结语

这个模板太麻烦了，每添加一张图就要手动增加链接，而且最终的排版调整半天也没达到我的理想状态，更奇怪的是我没办法从相册主界面点到相册里。感觉代码没写错但是某种插件阻碍了它= =