关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）

前言: 本文是关于给自己的博客网站添加一个相册页面，并且实现瀑布流相册效果，基于matery主题，其他主题亦可参考。

• 首先，直接上效果图，详细浏览地址：
  关于给hexo博客增加相册页面（实现瀑布流相册）

新建相册页面

1. 在站点的source文件夹下面新建一个gallery相册页面。

hexo new page gallery

2. 打开新建的gallery文件夹，里面会有一个index.md文件，设置index.md文件内容。

---
title: gallery
date: 2020-10-05 12:00:00
type: "gallery"
layout: "gallery"
---

新建相册图片展示页面

1. 在gallery文件夹（也就是刚才创建的那个文件），可以在里面新建一些文件夹，也就是相册文件夹。例如：
   

2. 然后在新建的相册文件夹里，分别在每个文件夹里新建文件index.md，例如：
   
   并分别设置每个index.md文件内容：

---
title: 峨眉山之行
date: 2020-10-02 23:00:17
type: "galleries"
layout: "galleries"
password: 
---

实现加密相册

注意：此处的galleries代表接下里要新增的galleries.ejs文件，而password是给相册设置访问密码。

在上面index.md文件中，可以实现加密功能，加密使用SHA256加密，所以在加密前需要先将你的密码转换成SHA256格式然后输入到最上面的创建相片页面的index.md的password里面。至于SHA256加密，请自行网上搜索在线生成，例如: http://www.ttmd5.com/hash.php?type=9

编辑主题导航栏加入相册按钮

在站点主题_config.yml文件下menu菜单下新增gallery页面。
这应是第一步做的事，新建页面后应该立即添加，因为很容易忘却。

# 配置菜单导航的名称、路径和图标icon.
menu:
  gallery
    url: /gallery

新建相册的json文件

1. 同样在站点的source文件夹下面新建一个gallery.json文件。
   设置文件内容：（以我的为例，使用时修改成自己的）
   这里图片是放在图床上的，可自定义修改图片链接。

    [
      {
      "name": "峨眉山之行",
      "cover": "https://i.loli.net/2020/10/05/kBcvAf7INgMLaem.jpg",
      "date": "2017-10",
      "description": "峨眉山之行",
      "url_name": "峨眉山之行",
      "album": [
          {
              "img_url": "https://i.loli.net/2020/10/05/qtOevHpw5XImS1J.jpg",
              "title": "峨眉山之行",
              "describe": "峨眉山之行"
          },
          {
              "img_url": "https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg",
              "title": "峨眉山之行",
              "describe": "峨眉山之行"
          },
          {
              "img_url": "https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg",
              "title": "峨眉山之行",
              "describe": "峨眉山之行"
          }
        ]
      }
    ]
   

注意：设置该json文件里的url_name属性值时，url_name属性值必须和对应相册文件里的index.md文件的title属性值一样。
所以建议，除了describe值自定义，其他属性值一律采用和title值一样的。

编辑相册及图片展示页面

在站点主题文件夹下layout文件夹下新建文件 gallery.ejs 和