Hexo博客添加相册页面实现加密相册

2024-02-25 18:28:57

在信息爆炸的时代，博客已经成为人们获取资讯和分享观点的重要渠道。作为一名博客主，为读者提供有价值的内容是十分重要的。如果您想要在博客中添加一个相册页面，展示您的摄影作品或生活照，那么本文将为您提供详细的教程。

首先，我们需要在Hexo博客中创建一个相册页面。您可以通过以下步骤创建相册页面：

打开Hexo博客的源代码文件夹，找到"source"文件夹。
在"source"文件夹下新建一个文件夹，并将其命名为"gallery"。
在"gallery"文件夹下新建一个文件，并将其命名为"index.md"。

接下来，我们需要设置index.md文件的内容。您可以使用以下代码作为参考：

---
title: 相册
date: 2023-01-01
---

本文是关于给自己的博客网站添加一个相册页面，并且实现瀑布流相册效果，基于matery主题，其他主题亦可参考。 在站点的source文件夹下面新建一个gallery相册页面。 打开新建的gallery文件夹，里面会有一个index.md文件，设置index.md文件内容。

在index.md文件中，您可以添加相册的标题、日期、图片和相册信息。您可以使用Markdown语法来格式化文本，也可以使用HTML代码来添加图片和链接。

为了实现瀑布流相册效果，您需要在index.md文件中添加以下代码：

<div class="waterfall-container">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="图片1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="图片2">
  </div>
  ...
</div>

在上面的代码中，您可以将"image1.jpg"和"image2.jpg"替换为您的图片文件名。您还可以添加更多".waterfall-item"元素来添加更多图片。

为了实现加密相册功能，您需要在index.md文件中添加以下代码：

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var password = prompt("请输入密码：");
    if (password != "your_password") {
      alert("密码错误！");
      return;
    }
    var waterfallContainer = document.querySelector(".waterfall-container");
    waterfallContainer.style.display = "block";
  });
</script>