准备工作
- 本节内容是基于实现本地保存图片功能前提记录的笔记,如果是用图床外链,可以跳过所有涉及到
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>
|
- 需要使用外链的场合,将
<img src="img/【封面图文件名】.jpg">
中的内容替换为图床外链地址即可; - 代码中
<div class="gallery-column">
元素为分列显示相册的列数,可按需要增减; - 新增相册时请确认代码添加在
<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>
|
- 需要使用外链的场合,将
<img src="img/【图片名】.jpg">
中的内容替换为图床外链地址即可,如果图床加载速度够快可以用同一个链接填充缩略图部分; - 代码中
<div class="img-column">
元素为分列显示图片的列数,可按需要增减; - 添加图片时请确认代码添加在
<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-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; } }
|
@media
标签内的样式是防止移动端浏览时相册名被强制换行的,建议保留;- 其余样式除了 flex 相关行与object-fit样式以外,均可根据需要自行更改,在此不作赘述。
模板文档
为了更好地普及本相册做了一个模板文档,用的是 google Drive 链接,【点我下载】。
本文转载于:css+markdown 实现 hexo 相册【进阶篇】