hexo-album-page

Introduction

A hexo plugin to generate a standalone album page.

Template design repo: XenWayne/masonry-gallery-page

Demo: masonry-gallery-page

The main masonry view is modified based on Fabio Ottaviani 's codepen.

Third-party libraries:

• Bootstrap
• Masonry
• Fancybox
• Lazysizes

Quick Start

1. Install the plugin:

npm install hexo-album-page --save

2. Add the following configuration to your _config.yml:

album:
  enable: true # 是否启用相册插件
  site_title: "My Album" # 相册页面的标题
  favicon: "" # 相册页面的站点图标
  output_path: album/index.html # 相册页面的渲染输出路径 

3. Create a file named album.yml in source/_data directory, and edit it like this:

categories:
  - id: landscape
    name: 风景Landscape
    description: |
      <h1 style="color:#000;">Landscape</h1>
      这是一个简单的测试页面，用于展示Masonry瀑布流布局的效果。页面中的图片均为示例图片，来源于网络。
    images:
      - url: https://gcore.jsdelivr.net/gh/XenWayne/sitefile/img/header_gray.webp
        description: |
          <b>Title</b> | Subtitle
      # 添加更多图片

  - id: portrait
    name: Portrait测试
    description: |
      This is an easy test to showcase different apartment styles.
    images:
      - url: https://s21.ax1x.com/2020/02/08/1RsSc8.jpg
        description: |
          <b>Title</b> | Subtitle
      - url: https://s21.ax1x.com/2020/01/28/1Kd1PK.jpg
        description: |
          <b>Title</b> | Subtitle
      - url: https://s21.ax1x.com/2019/12/28/leCoa8.jpg
        description: |
          <b>Title</b> | Subtitle
          <p>Perfect for singles or couples looking for a comfortable space.</p>
      # 添加更多图片

  - id: test
    name: PixelArt测试
    description: |
      我是文字啊啦啦啦啦啦嘿嘿嘿嘿额和黑恶黑Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    images:
      - url: https://s21.ax1x.com/2020/02/08/1RsSc8.jpg
        description: |
          <p>Lovely flat in Paris</p>
      - url: https://s21.ax1x.com/2019/12/28/leCoa8.jpg
        description: |
          <p>Charming apartment near the Seine</p>
      - url: https://s21.ax1x.com/2020/02/08/1RsBEd.jpg
        description: |
          <p>Spacious loft in Paris</p>
      - url: https://s21.ax1x.com/2019/12/22/QxRZaF.jpg
        description: |
          <p>Luxurious penthouse</p>
      # 添加更多图片

相册（组图）写法 — 支持把一组图当成单个条目显示，展开后会把组内图片插入到当前列表：

  - id: albumtest
    name: 我的相册
    description: |
      这是一个示例相册
    images:
      - type: album
        description: 我的相册封面文字
        images:
          - url: https://example.com/album1.jpg
            description: 第一张
          - url: https://example.com/album2.jpg
            description: 第二张
          - url: https://example.com/album3.jpg
            description: 第三张
      - url: https://example.com/single.jpg
        description: 普通单张图片

4. Use hexo command to generate as usual.

Note

If you need to display hundreds of images, a large number of static DOM elements may not be the optimal solution. It is recommended to consider dynamic fetching and a backend-supported solution.