Masonry Photo Gallery Page

Create a Photo Gallery Page

Execute the following command in the root directory of your Hexo project to automatically create a photo gallery/wall page.

$ hexo new page masonry

Note: The photo gallery page is matched by default based on title: masonry, title: gallery, or title: photos.

If you need to customize the page title, you need to add type: masonry or type: gallery in the Front Matter of the index.md page to customize the page title.

Here are two correct configuration examples:

---
title: Gallery
date: 2023/5/14 11:45:14
---

---
title: 自定义页面标题
type: masonry
date: 2023/5/14 11:45:14
---

Modify the Configuration File

Enable links in the navbar configuration item of the Redefine theme configuration file _config.redefine.yml.

navbar:
  links:
    相册: #取名随意
      icon: fa-solid fa-image #图标
      path: /masonry/

(It can also be placed in the secondary menu)

Create the Photo Gallery Storage File

Add a _data folder in the source folder of your Hexo project (skip if already exists).

Create a masonry.yml file in the _data folder.

Configure the album information in the masonry.yml file in the following format:

 
- image: 图片 URL
  title: 图片标题
  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod
 
- image: https://picsum.photos/id/12/2500/1800
  title: Lorem ipsum
  description: Lorem ipsum dolor sit amet
 

Creation Complete

Now you can access the page you created to see the effect.