Hugo 主题

上一个/下一个： 所有主题

图库

一个非常简单且有主见的 Hugo 照片图库主题

下载
Gallery

Hugo 图库主题

一个非常简单且有主见的 Hugo 照片图库主题。

  • 演示
  • 示例网站源代码

Screenshot

功能

  • 响应式设计
  • 深色配色方案（可以为每页设置）
  • 私人相册
  • 使用 Flickr 的 Justified Layout 的对齐相册视图
  • 带有 PhotoSwipe 的灯箱
  • 带有 Open Graph 标签的 SEO
  • 自动（或手动）选择特色/封面图像

安装

此主题需要 Hugo Extended >= 0.123.0。依赖项已捆绑，因此不需要 Node.js/NPM 和 PostCSS。

作为 Hugo 模块

需要安装 Go 二进制文件。

hugo mod init github.com/<your_user>/<your_project>

然后将主题添加到您的 hugo.toml

[module]
  [[module.imports]]
    path = "github.com/nicokaiser/hugo-theme-gallery/v4"

作为 Git 子模块 

git submodule add --depth=1 https://github.com/nicokaiser/hugo-theme-gallery.git themes/gallery

用法

包含至少一个图像的页面包会列为相册或图库

content/
├── _index.md
├── about.md             <-- not listed in album list
├── animals/
│   ├── _index.md
│   ├── cats/
│   |   ├── index.md
│   |   ├── cat1.jpg
│   |   └── feature.jpg  <-- album cover
│   ├── dogs/
│   |   ├── index.md
│   |   ├── dog1.jpg     <-- album cover
│   |   └── dog2.jpg
│   └── feature.jpg
├── bridge.jpg           <-- site thumbnail (OpenGraph, etc.)
└── nature/
    ├── index.md         <-- contains `cover: true` for `tree.jpg`
    ├── nature1.jpg
    ├── nature2.jpg
    └── tree.jpg         <-- album thumbnail
  • /about.md 不是页面包，也没有图像资源。它不会显示在相册列表中。
  • /nature 是一个叶子包（具有 index.md 且没有子项）=> 显示为图库（single 布局）。
  • /animals 是一个分支包（具有 _index.md 并且有子项）=> 显示为相册列表（list 布局）。
  • 名称中带有 *feature* 的图像资源或找到的第一个图像用作相册列表的缩略图。
  • 没有图像的相册不会显示。

Front matter

  • title – 相册的标题，显示在相册列表和相册页面上。
  • date – 相册日期，用于排序（最新优先）。
  • description – 相册页面上显示的描述。呈现为 markdown 以启用添加链接和一些格式设置。
  • weight – 可用于调整排序顺序。
  • params.featured_image – 用于相册缩略图的图像文件名。如果未设置，则使用文件名中包含 feature 的第一个图像，否则使用相册中的第一个图像。
  • params.private – 如果设置为 true，则此相册不会显示在相册概览中，并且会从 RSS 源中排除。
  • params.featured – 如果设置为 true，则此相册会在主页上展示（即使是私有的）。
  • params.sort_by – 用于对相册中的图像进行排序的属性。默认为 Name（文件名），但也可以是 Date。
  • params.sort_order – 排序顺序。默认为 asc。
  • params.theme – 此页面的颜色主题。默认为配置中的 defaultTheme。

相册封面

默认情况下，相册的封面图像是其文件夹中的第一个图像。要选择特定的图像（必须是相册的一部分），请在 front matter 中使用 cover 资源参数

---
title: Nature
resources:
  - src: tree.jpg
    params:
      cover: true
---

图像元数据

灯箱视图的图像标题取自 ImageDescription EXIF 标签或资源元数据中的 title。

可以使用 Adobe Lightroom 等软件或使用 exiftool 等命令行工具写入 EXIF 标签

exiftool -ImageDescription="A closeup of a gray cat's face" cat-4.jpg

或者，可以在 front matter 中设置图像标题

---
date: 2024-02-18T14:12:44+0100
title: Cats
resources:
  - src: cat-1.jpg
    title: Brown tabby cat on white stairs
    params:
      date: 2024-02-18T13:04:30+0100
  - src: cat-4.jpg
    title: A closeup of a gray cat's face
---

这也支持自定义排序

---
sort_by: Params.weight
resources:
  - src: image-1.jpg
    params:
      weight: 20
  - src: image-2.jpg
    params:
      weight: 10
---

类别

如果在相册中使用类别，则主页会显示类别列表。确保站点配置中的 disabledKinds 中不包含 term。

content/dogs/index.md

---
date: 2023-01-12
title: Dogs
categories: ["animals", "nature"]
resources:
  - src: dogs-title-image.jpg
    params:
      cover: true
---

类别还可以具有自定义标题和描述（默认情况下，“animals”类别将具有“Animals”作为标题，并且没有描述）。只需创建一个 content/categories/<category>/_index.md

content/categories/animals/_index.md

---
title: Cute Animals
description: This is the description text of the "animals" category.
---

类别列表

要启用类别列表，每个类别必须至少在 content/categores/<category>/ 文件夹中有一个图像。此外，taxonomy 必须不包含在站点配置中的 disableKinds 中。

然后，/categories 会显示类别列表及其封面图像。

其他分类法

您还可以使用其他分类法，如 series。请注意，只有 categories 和 tags 是 Hugo 默认设置启用的。使用 series 作为其他分类法留给读者作为练习。

主页上的精选内容

相册（以及类别等分类法页面）可以标记为“精选”

---
title: Featured Album
params:
  featured: true
---

当与 private: true 结合使用时，此相册仅在主页上显示为精选相册，而不会显示在任何相册列表中。

请注意，类别或任何其他分类法术语也可以标记为精选，因此您可以精选整个类别、系列等。

默认情况下，主页显示

  • 站点标题，
  • 所有类别的链接（如果启用并使用类别）
  • 最新的精选内容（即使是私有的）
  • 所有非私有顶级相册

可以通过使用 layouts/_default/home.html 的本地版本轻松调整此设置。

相关内容

如果您的站点有相关内容（例如，当使用关键字或标签时），相关相册会显示在每个图库下方。在 Hugo 文档中阅读更多相关信息。

以下是 config/_default/hugo.toml 中启用相关内容的示例配置节

[related]
  includeNewer = true
  threshold = 10
  toLower = false
  [[related.indices]]
    applyFilter = false
    cardinalityThreshold = 0
    name = 'categories'
    pattern = ''
    toLower = false
    type = 'basic'
    weight = 10
  [[related.indices]]
    applyFilter = false
    cardinalityThreshold = 0
    name = 'keywords'
    pattern = ''
    toLower = false
    type = 'basic'
    weight = 50

社交图标

使用 socialIcons 配置键在每个页面的底部添加社交图标

[params]
  ...
  [params.socialIcons]
    facebook = "https://#/"
    instagram = "https://www.instagram.com/"
    github = "https://github.com/nicokaiser/hugo-theme-gallery/"
    youtube = "https://www.youtube.com/"
    email = "mailto:user@example.com"
    linkedin = "https://linkedin.com/"

自定义 CSS

CSS 是使用 Hugo Pipes 生成的，因此您可以将其他 CSS 添加到 assets/css/custom.css 中（请参阅 exampleSite 中的示例）。

自定义 JavaScript

您可以在 assets/js/custom.js 中添加其他 JavaScript。

作者

  • Nico Kaiser

另请参阅