next主题搭建相册（无需安装插件，代码即可实现）

最近在搭建博客的过程中，想要实现相册功能，找了很多资料，都是说要使用插件或者脚本，我花了很多时间，跟着这些资料去做，但是都没实现，但是我没有放弃，后来终于找到一篇文章，通过这篇文章，终于实现了，也正是这篇文章，使得我对于博客的网页设计有了更高的理解。

个人认为，用这种方法思路很清晰，通过代码的方式，一步一步搭建相册，不像其他教程，很多操作都不懂什么原理，耐心看完整篇文章，相信你也能和我一样彻底了解相册功能的实现。

本人博客实现效果：相册 | 罗先生 (yuansec.top)https://www.yuansec.top/photos/

一、准备图床

由于本人是通过github搭建的网站，而且相册功能图片比较多，不推荐使用本地上传图片，这样加载太慢，会导致你的网站加载也变慢，通过图床加速可以大大提高图片加载速度，以致于不拖累你爹网站的加载速度（如果你和我一样都是用的github，网站的图片最好都用图床链接）

图床这里我个人有两个方案

1、维格表

具体使用可参考本人之前的一篇文章

免费图床方案-维格表_yuansec的博客-CSDN博客

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

总结

总体的设计思路

创建相册功能板块——设计相册主页显示样式——添加子相册——设计子相册图片显示样式——添加图片到各个子相册

大体的思路就是这样，不难理解，而且所有过程都是通过自己写代码构建的，不需要去下载任何插件和脚本，如果最后显示结果和我的有出路的话，可以看下这篇文章，了解网页布局的真正原理

30 分钟学会 Flex 布局 - 知乎 (zhihu.com)