建立相册经历

本人比较轴，为了建立博客相册，在百度、360等浏览器上找了多种方法，也试了很多方法，但是多于不太懂前端的人来说，即使这种方法失败了，也不知道原因。但是建立相册的决心不倒，我花了四天的时间一直捣鼓这个东西终于找到了下面这种方法，但是我依葫芦画瓢做了一番，发现还是不能实现，于是稍微改了其中一些代码，总算是完成了(ಥ _ ಥ)(ಥ _ ಥ)

准备工作

  • 本节内容是基于实现本地保存图片功能前提记录的笔记，如果是用图床外链，可以跳过所有涉及到 img 文件夹以及 img/s 文件夹的步骤。
  • 本相册的所有功能均仅测试了在 hexo-theme-next 下实现的效果，使用其它主题时部分布局尺寸数据可能会出现偏差，需要自行根据主题设置修改

创建目录

  • 在 git bash 中输入命令 hexo new page gallery；
  • 在 hexo/sourse/gallery 目录下建立你需要的分类相册文件夹；
  • 进入 hexo/sourse/gallery 目录，新建 img 文件夹用来存放相册封面；
  • 在每个相册文件夹中创建 img 文件夹用来存放大图，以及 img/s 文件夹用来存放缩略图。

注意：img/s 文件夹可以省略不建，用文件名-s.jpg 的格式重命名缩略图即可。

图片处理

原图处理

  • 将需要上传的图片放入 gallery/相册名/img 文件夹中，为了加载速度建议压缩至 1mb 以下，使用 jpg 格式保存；
  • 除了文件大小以外没有其它要求，但是为了方便后续页面编辑，建议将文件以容易辨识的方式重命名，例如日期-图片名.jpg。

缩略图处理

  • 将 gallery/相册名/img 下的所有图片复制到 gallery/相册名/img/s 文件夹中，使用 PS 等其它处理工具压缩图片大小；
  • 建议宽度为 300px，最终输出文件大小在 30kb 左右，高度无要求

相册主界面

  • 打开 gallery/index.md，将 title 设置成你需要的相册页面名称；
  • （可选）在日期下方加上 comments: false 关闭评论；
  • 复制以下代码粘贴至正文，并按需求修改相册描述、相册名、相册文件夹名以及封面图文件名
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
<center>！相册描述【此行可删除】</center>
<center>自定义分隔符【此行可删除】</center>
<div class="gallery-page">
	<div class="gallery-list">
		<div class="gallery-column">
			<div class="gallery-item">
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a>
				<p>- ！相册1 -</p>
			</div>
			<div class="gallery-item">
				<a href="【！相册文件夹名】"><img src="img/【！封面图文件名】.jpg">
				</a>
				<p>- ！相册2 -</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 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>
  1. 需要使用外链的场合，将 <img src="img/【封面图文件名】.jpg"> 中的内容替换为图床外链地址即可；
  2. 代码中 <div class="gallery-column"> 元素为分列显示相册的列数，可按需要增减；
  3. 新增相册时请确认代码添加在 <div class="gallery-column"> 元素内部，否则会造成显示错误。

分类相册界面

  • 打开 gallery/相册名/index.md，将 title 设置成你需要的相册页面名称；

  • （可选）在日期下方加上 comments: false 关闭评论；

  • 复制以下代码粘贴至正文，并按需求修改相册描述、图片名以及缩略图文件名；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <center>！相册描述【此行可删除】</center>
    <center>自定义分隔符【此行可删除】</center>
    <div class="gallery-page">
    	<div class="img-list">
    		<div class="img-column">
    			<a href="img/【！图片名1】.jpg" target="_Blank"><img src="img/s/【！缩略图文件名1】.jpg"></a>
    			<a href="img/【！图片名2】.jpg" target="_Blank"><img src="img/s/【！缩略图文件名2】.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>
    1. 需要使用外链的场合，将 <img src="img/【图片名】.jpg"> 中的内容替换为图床外链地址即可，如果图床加载速度够快可以用同一个链接填充缩略图部分；
    2. 代码中 <div class="img-column"> 元素为分列显示图片的列数，可按需要增减；
    3. 添加图片时请确认代码添加在 <div class="img-column"> 元素内部，否则会造成显示错误。

CSS样式

在custom.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
/*gallery*/

.gallery-page {
	margin-top: -50px;
}
.img-list,
.gallery-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.img-column {
	display: flex;
	flex-direction: column-reverse;
}
.img-column a,
.gallery-column a {
	border-bottom: 0px;
}
.gallery-item {
	margin-bottom: -50px
}
.gallery-item p {
	margin: -25px auto -10px;
	max-width: 50%;
	text-align: center;
	font-size: 15px;
	color: $black-deep;
	background: rgba(255,255,255,.3);
	border-radius: 7px;
	border: 1px solid $black-deep;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
.posts-expand .post-body .gallery-column a img {
	height: 250px;
	width: 300px;
	object-fit: cover;
}
@media (max-width: 767px){
	.gallery-item p {
		min-width: 75px;
		font-size: 13px;
	}
}

}

  1. @media 标签内的样式是防止移动端浏览时相册名被强制换行的，建议保留；
  2. 其余样式除了 flex 相关行与 object-fit 样式以外，均可根据需要自行更改，在此不作赘述。

改进

以上方法来自大佬：†少女癌†
但是我用了之后发现点击图片不能进入相册的二级目录，于是就在代码上做文章，经过多次试验后我终于成功了，废话不多说，上码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 我的画廊终于开通啦！！！
date: 2020-07-12 13:13:25
comments: false
---
<div class="gallery-page">
	<div class="gallery-list">
		<div class="gallery-column">
			<div class="gallery-item">
	     		   <a><img src="img/相册一.jpg"></a>
				<a href="分享一"><center> 分享一</center></a>
			</div>
		</div>		
	</div>
</div>

上面代码是在source/gallery/index.md中修改，结果图为
在这里插入图片描述点击分享一即可进入：
在这里插入图片描述