Hexo-NexT实现相册

准备工作

  • 本节内容是基于实现本地保存图片功能前提记录的笔记,如果是用图床外链,可以跳过所有涉及到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/img文件夹中;
  • 建议重命名为相册名.jpg

相册主界面

  • 打开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样式以外,均可根据需要自行更改,在此不作赘述。

模板文档

为了更好地普及本相册做了一个模板文档,用的是 google Drive 链接,【点我下载】

本文转载于:css+markdown 实现 hexo 相册【进阶篇】

赞赏一杯咖啡
0%