最近在搭建博客的过程中,想要实现相册功能,找了很多资料,都是说要使用插件或者脚本,我花了很多时间,跟着这些资料去做,但是都没实现,但是我没有放弃,后来终于找到一篇文章,通过这篇文章,终于实现了,也正是这篇文章,使得我对于博客的网页设计有了更高的理解。
个人认为,用这种方法思路很清晰,通过代码的方式,一步一步搭建相册,不像其他教程,很多操作都不懂什么原理,耐心看完整篇文章,相信你也能和我一样彻底了解相册功能的实现。
本人博客实现效果:相册 | 罗先生 (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
总结
总体的设计思路
创建相册功能板块——设计相册主页显示样式——添加子相册——设计子相册图片显示样式——添加图片到各个子相册
大体的思路就是这样,不难理解,而且所有过程都是通过自己写代码构建的,不需要去下载任何插件和脚本,如果最后显示结果和我的有出路的话,可以看下这篇文章,了解网页布局的真正原理