Masonry Photo Gallery Page
Demo
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:
---
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.