Masonry Gallery

Masonry Photo Gallery Page

Demo

Masonry

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 index.md page to customize the page title.

Here are two correct configuration examples:

masonry/index.md
---
title: Gallery
date: 2023/5/14 11:45:14
---
masonry/index.md
---
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.

_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:

source/_data/masonry.yml
 
- 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.