南锋

南奔万里空,脱死锋镝余

hexoNext主题添加相册

最近将博客的主题换回了next主题。以前喜欢将自己的主题弄的花里胡哨的。现在反而更喜欢简单点的。

改为next主题后,有些自己想要的功能没有,比如相册。在网上查了好多资料,也有人实现了,但是都比较麻烦,或者不是自己想要的效果。于是自己换了种思路,直接用html的方式实现,再加入到博客中。这样以后不管换什么主题,相册功能都可以直接移植,非常的方便。

笔者效果,

在博客左侧添加相册选项

1、在命令行输入命令:

1
hexo new page 相册

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
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";
}
});
});

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>
<!-- Add more photos as needed -->
</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">
<!-- Add more photos as needed -->
</div>
<div id="modal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modal-img">
<div id="caption"></div>
</div>
</body>
</html>

做到这里,一个相册功能就做完啦。

+