css+markdown实现hexo相册【进阶篇】

发表于 | 更新于 | 分类于
本文字数： 5.2k | 阅读时长 ≈ 12 分钟 | 评论数：

　　其实上一次那个乞丐版相册做完没两天我就把后续的一堆功能搞出来了，只是一直懒没写笔记_(:з」∠)_现在补上。
　　这次追加了一个模板文档供大家参考，直接拷贝到本地后就可以创建出相册雏形了，需要的读者可以直接点击目录7跳转。
　　另外就是第一次创建相册的时候，如果上传的图片过多可能会需要很长的部署时间，请耐心等待~


.+†+.

效果预览

-画廊-|†少女癌†

功能列表

  • 主界面
    • 分类相册
    • 自定义相册名
    • 自定义封面
    • 自动裁剪封面为等尺寸
  • 分类相册界面
    • 三等分列
    • 按图片原长宽比平铺
    • 本地图片源/图床外链均可
    • 与文章插图格式保持统一
    • 点击查看大图
  • 其它
    • 自定义相册描述
    • 本地浏览
    • 页面加载速度优化
  • *开发中功能
    • 为每个图片新建页面并允许评论功能

*=先坑着，不一定填【。

准备工作

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

▶ 创建目录

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

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

▶ 图片处理

  1. 原图处理：
  • 将需要上传的图片放入gallery/相册名/img文件夹中，为了加载速度建议压缩至1mb以下，使用jpg格式保存；
  • 除了文件大小以外没有其它要求，但是为了方便后续页面编辑，建议将文件以容易辨识的方式重命名，例如日期-图片名.jpg。
  1. 缩略图处理：
  • 将gallery/相册名/img下的所有图片复制到gallery/相册名/img/s文件夹中，使用PS等其它处理工具压缩图片大小；
  • 建议宽度为300px，最终输出文件大小在30kb左右，高度无要求。
  1. 封面图处理
  • 从每个相册的缩略图中挑选需要的封面，复制到gallery/img文件夹中；
  • 建议重命名为相册名.jpg。

相册主界面

  1. 打开gallery/index.md，将title设置成你需要的相册页面名称；
  2. （可选）在日期下方加上comments: false关闭评论；
  3. 复制以下代码粘贴至正文，并按需求修改相册描述、相册名、相册文件夹名以及封面图文件名：
    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>

Ps. 1. 需要使用外链的场合，将<img src="img/【封面图文件名】.jpg">中的内容替换为图床外链地址即可；
Ps. 2. 代码中<div class="gallery-column">元素为分列显示相册的列数，可按需要增减；
Ps. 3. 新增相册时请确认代码添加在<div class="gallery-column">元素内部，否则会造成显示错误。

分类相册界面

  1. 打开gallery/相册名/index.md，将title设置成你需要的相册页面名称；
  2. （可选）在日期下方加上comments: false关闭评论；
  3. 复制以下代码粘贴至正文，并按需求修改相册描述、图片名以及缩略图文件名：
    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>

Ps. 1. 需要使用外链的场合，将<img src="img/【图片名】.jpg">中的内容替换为图床外链地址即可，如果图床加载速度够快可以用同一个链接填充缩略图部分；
Ps. 2. 代码中<div class="img-column">元素为分列显示图片的列数，可按需要增减；
Ps. 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;
    	}
    }

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

模板文档

  • 为了更好地普及本相册做了一个模板文档，用的是google Drive链接
  • ▶▶▶【点我下载】◀◀◀
  • 本模板文档不包含CSS样式，需要自行追加或者在上文中复制
  • 本模板不会做国内网盘分流也不会更新，遇到任何问题请在本文下留言
  • 更新过后的模板文档下载地址，包含了CSS样式代码文件和一个简单的readme 真香，【点我下载】

参考链接