最近在搭建博客的过程中，想要实现相册功能，找了很多资料，都是说要使用插件或者脚本，我花了很多时间，跟着这些资料去做，但是都没实现，但是我没有放弃，后来终于找到一篇文章，通过这篇文章，终于实现了，也正是这篇文章，使得我对于博客的网页设计有了更高的理解。
个人认为，用这种方法思路很清晰，通过代码的方式，一步一步搭建相册，不像其他教程，很多操作都不懂什么原理，耐心看完整篇文章，相信你也能和我一样彻底了解相册功能的实现。
本人博客实现效果：相册 | 罗先生 (yuansec.top)
https://www.yuansec.top/photos/
一、准备图床
由于本人是通过github搭建的网站，而且相册功能图片比较多，不推荐使用本地上传图片，这样加载太慢，会导致你的网站加载也变慢，通过图床加速可以大大提高图片加载速度，以致于不拖累你爹网站的加载速度（如果你和我一样都是用的github，网站的图片最好都用图床链接）
图床这里我个人有两个方案
1、维格表
具体使用可参考本人之前的一篇文章
2、路过图床（推荐）
推荐理由：简单好用，且速度也快
一、添加相册板块
1、首先创建一个相册的图标
这一步就不细说了，不会的可以自己去找教程，或者参考我之前发的一篇文章
next主题自定义侧边栏链接图标（新方法）_yuansec的博客-CSDN博客
2、添加相册板块
博客根目录下输入代码
hexo new page photos会在博客根目录source文件夹下生成一个photos文件夹，点进去，里面有一个index.md文件，打开这个文件，将标题改为相册（你想要叫的名字），类型设置为photos
接着打开\themes\next目录下的_config.yml文件，找到menu，添加photos这一栏
?最后，还要设置以下中文，打开\themes\next\languages目录下的zh-CN.yml文件，添加中文
二、设计相册主页
?1、添加相册主页主题配置文件
打开\themes\next\source\css下的main.styl文件，添加以下代码
/*相册主页面*/
.photos-page {
margin-top: -50px;
}
.photos-list {
display: flex;//指定容器
flex-direction: row;//水平为主轴
flex-wrap: nowrap;//不自动换行
justify-content: space-between;//两侧对其
align-items: flex-start;//水平对齐
}
.photos-column a {
border-bottom: 0px;
}
.photos-item {
margin-bottom: -50px
}
/*相册标题样式*/
.photos-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);
}
/*相册封面显示以及点击面积*/
.photos-column a img {
height: 250px;
width: 300px;
object-fit: cover;
}?2、添加相册
在根目录\source\photos文件夹下新建几个文件夹，我这里的代码是3个，你可以建三个文件夹，也可以增减代码，然后打开index.md文件添加代码
---
title: 相册
type: photos
---
<div class="photos-page">
<div class="photos-list">
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名1"><img src="图床url链接">
</a>
<br>
<p>-相册名1-</p>
</div>
</div>
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名2"><img src="图床url链接">
</a>
<br>
<p>-相册名2-</p>
</div>
</div>
<div class="photos-column">
<div class="photos-item">
<a href="photos目录下的相册文件名3"><img src="图床url链接">
</a>
<br>
<p>-相册名3-</p>
</div>
</div>
</div>
</div>
<br>
<br>将代码中"photos目录下的相册文件名1"改成你建的文件名，将"图床url链接"改为你的图片的图床url链接即可。
三、添加子相册
1、添加子相册主题样式文件
打开\themes\next\source\css下的main.styl文件，添加以下代码
.img-list{
display: flex;
flex-direction: column;//垂直为主轴
}
.img-column {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start
}
.img-column a{
border-bottom: 0px;
}
/*图片显示面积*/
.img-column a img {
height: 280px;
width: 330px;
object-fit: scale-down;
}2、添加图片
随便打开photos目录下的某个相册文件，新建一个index.md文件
?添加代码
<div class="photos-page">
<div class="img-list">
<div class="img-column">
<img src="图床url链接"></a>
<img src="图床url链接"></a>
<img src="图床url链接"></a>
</div>
<div class="img2-column">
<img src="图床url链接"></a>
<img src="图床url链接"></a>
</div>
</div>
</div>将"图床url链接"改为图片的链接即可
四、图片点击放大效果
先切到next/source/lib目录下，下载插件
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox更改next/_config.yml文件
fancybox: true
总结
总体的设计思路
创建相册功能板块——设计相册主页显示样式——添加子相册——设计子相册图片显示样式——添加图片到各个子相册
大体的思路就是这样，不难理解，而且所有过程都是通过自己写代码构建的，不需要去下载任何插件和脚本，如果最后显示结果和我的有出路的话，可以看下这篇文章，了解网页布局的真正原理