hexoNext主题添加相册

2024-06-10 16:20

文章标签 hexonext 相册主题

本文主要是介绍hexoNext主题添加相册，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

在博客左侧添加相册选项

1、在命令行输入命令：

hexo new page 相册

2、修改主题配置文件_config.yml
在menu:下添加下面这行

相册: /photos/ || fa fa-camera

3、修改站点下source/photos/index.md文件，添加下面内容

<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文件

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