Masonry Gallery

Masonry Photo Gallery Page



Configuration Tutorial

Starting from version v2.1.4, Redefine supports the Masonry photo gallery page. Here's how to use it:

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 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.

    相册: #取名随意
      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:
  title: Lorem ipsum
  description: Lorem ipsum dolor sit amet

Creation Complete

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