最近将博客的主题换回了next主题。以前喜欢将自己的主题弄的花里胡哨的。现在反而更喜欢简单点的。
改为next主题后，有些自己想要的功能没有，比如相册。在网上查了好多资料，也有人实现了，但是都比较麻烦，或者不是自己想要的效果。于是自己换了种思路，直接用html的方式实现，再加入到博客中。这样以后不管换什么主题，相册功能都可以直接移植，非常的方便。
笔者效果,
在博客左侧添加相册选项
1、在命令行输入命令：
2、修改主题配置文件_config.yml
在menu:下添加下面这行
1
| 相册: /photos/ || fa fa-camera
|
3、修改站点下source/photos/index.md文件，添加下面内容
1
| <iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="750px"src=/net/photos/index.html></iframe>
|
src=后面接你放相册的地址，这里是想对于next/source的相对位置。其绝对位置为next/source/net/photos/index.html，这里改为你自己的位置即可。
创建相册
相册有一二级目录，在一级目录点击图片会进入二级相册，进入二级相册后点击相应的图片会有放大效果。
1、在next/source/net创建photos文件夹。
2、创建scripts.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById("modal");
const modalImg = document.getElementById("modal-img");
const captionText = document.getElementById("caption");
const close = document.getElementsByClassName("close")[0];
document.querySelectorAll('.thumbnail').forEach(img => {
img.addEventListener('click', () => {
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = img.alt;
});
});
close.addEventListener('click', () => {
modal.style.display = "none";
});
window.addEventListener('click', (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
});
});
|
3、创建styles.css文件
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| body {
font-family: Arial, sans-serif;
text-align: center;
}
.album {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.album-cover {
margin: 10px;
text-align: center;
}
.album-cover img {
width: 200px;
height: 200px;
object-fit: cover;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail {
width: 150px;
height: 150px;
margin: 10px;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.1);
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
|
4、在photos下创建index.html文件，相册一级目录，并输入下面内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相册</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>相册</h1>
<div class="album">
<a href="album1.html">
<div class="album-cover">
<img src="https://s1.ax1x.com/2023/07/08/pCgn83Q.jpg" alt="相册 1">
<p>相册 1</p>
</div>
</a>
</div>
</body>
</html>
|
5、创建二级相册album1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五一带女朋友回长沙</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<h1>五一带女朋友回长沙</h1>
<div class="gallery">
<img src="https://s1.ax1x.com/2023/07/10/pCR5uZT.jpg" alt="带女朋友回大学学校走走" class="thumbnail">
</div>
<div id="modal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modal-img">
<div id="caption"></div>
</div>
</body>
</html>
|
做到这里，一个相册功能就做完啦。笔者效果,
