Minimit Gallery 教程：打造优雅的静态图片画廊
Minimit Gallery 的核心理念是 “少即是多”，它不依赖 JavaScript，而是巧妙地利用纯 CSS 和 HTML 结构来创建流畅、现代的画廊效果，这意味着它加载速度极快，对 SEO 友好，且兼容性极佳。
第一部分：快速入门 (5分钟上手)
是什么？为什么选择它？
- 是什么：一个 CSS 驱动的图片画廊组件，你只需要提供一组图片，它就能自动生成一个响应式的、可交互的画廊。
- 为什么选择它：
- 极致轻量：无 JavaScript，依赖极小。
- 性能卓越：加载速度快，不阻塞页面渲染。
- 设计现代：提供多种布局（网格、瀑布流、轮播）和优雅的悬停/放大效果。
- 易于使用：配置简单，几行代码即可集成。
- SEO友好对搜索引擎可见。
安装与集成
Minimit Gallery 通常作为 Hugo 或 Jekyll 的 Shortcode（短代码）使用。
以 Hugo 为例：
-
下载文件：
- 从 Minimit Gallery 的 GitHub Releases 页面 下载最新版本。
- 解压后,你会得到一个
gallery文件夹。
-
放置文件：
（图片来源网络，侵删）- 将
gallery文件夹复制到你的 Hugo 项目的layouts/shortcodes/目录下。 - 将
gallery.css文件复制到你的static/css/目录。 - 将
gallery.js文件（如果存在，某些版本可能需要）复制到你的static/js/目录。（注意：新版本可能已完全移除 JS 依赖）
- 将
-
引入 CSS： 在你的 Hugo 布局文件（如
layouts/_default/baseof.html）的<head>部分添加以下链接，以引入画廊样式：{{ $galleryStyle := resources.Get "css/gallery.css" }} <link rel="stylesheet" href="{{ $galleryStyle.RelPermalink }}">
以 Jekyll 为例：
-
下载文件：同上。
-
放置文件：
（图片来源网络，侵删）- 将
gallery文件夹复制到你的 Jekyll 项目的_includes/目录下。 - 将
gallery.css复制到assets/css/目录。 - 将
gallery.js复制到assets/js/目录。
- 将
-
引入 CSS： 在你的主 CSS 文件（如
assets/main.scss）中导入：@import "gallery";
基本使用
在你的文章或页面中,使用 Shortcode 来调用画廊。
基本语法：
{{< gallery >}}
{{< /gallery >}}- 语法解释：
{{< gallery >}}和{{< /gallery >}}是画廊的起始和结束标签。- 在它们之间,每行使用标准的 Markdown 图片语法
。
效果： 保存并预览你的页面，你会看到一个默认的网格布局画廊，鼠标悬停在图片上时，会有一个优雅的放大效果。
第二部分：深入配置与自定义
Minimit Gallery 的强大之处在于其丰富的配置选项。
常用 Shortcode 参数
你可以在 <gallery> 标签内添加参数来改变画廊的行为。
-
src(推荐方式)：指定一个包含图片的文件夹，Minimit Gallery 会自动读取该文件夹下的所有图片。- Hugo:
{{< gallery src="/images/my-trip" >}} - Jekyll:
{{< gallery src="/assets/images/my-trip" >}} - 注意：使用
src时，画廊内通常不需要手动写图片路径。
- Hugo:
-
rows/cols：设置画廊的行数和列数，当图片数量超过设定值时，会自动分页。{{< gallery rows="2" cols="4" >}}...{{< /gallery >}}
-
gap：设置图片之间的间距。{{< gallery gap="10px" >}}...{{< /gallery >}}
-
layout：设置画廊的布局。grid：默认的网格布局。masonry：瀑布流布局，图片会根据高度自动排列。carousel：轮播图布局。{{< gallery layout="masonry" >}}...{{< /gallery >}}
-
size：设置图片的显示尺寸。small,medium,large。{{< gallery size="large" >}}...{{< /gallery >}}
-
lightbox：是否启用灯箱效果（点击图片放大）。true(默认) 或false。{{< gallery lightbox="false" >}}...{{< /gallery >}}
-
showmore：是否显示“查看更多”按钮。true(默认) 或false。{{< gallery showmore="false" >}}...{{< /gallery >}}
组合使用示例
示例1：瀑布流布局，无灯箱效果
{{< gallery layout="masonry" lightbox="false" >}}
...
{{< /gallery >}}示例2：大型网格布局，间距为20px
{{< gallery size="large" gap="20px" >}}
...
{{< /gallery >}}第三部分：高级技巧与最佳实践
使用 Hugo 的 Page Bundles (最佳实践)
对于 Hugo 用户，强烈推荐使用 Page Bundles 来组织画廊图片，这能让你的项目结构更清晰。
-
创建 Bundle：在你的
content目录下，为你的画廊创建一个文件夹，content/gallery/my-trip/index.md。 -
放置图片：将所有图片直接放在
content/gallery/my-trip/目录下。 -
在
index.md中调用画廊：--- "我的旅行" --- 这是我的旅行照片集。 {{< gallery src="." >}}src="."表示使用当前目录（即my-trip文件夹）下的所有图片作为画廊源。
自定义 CSS (覆盖默认样式)
如果你想要更精细的控制,可以通过自定义 CSS 来覆盖 Minimit Gallery 的默认样式。
你想改变悬停时的阴影效果：
-
在你的主 CSS 文件中，添加以下代码：
/* 覆盖 Minimit Gallery 的悬停样式 */ .mg-item a:hover img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } /* 改变瀑布流列之间的间距 */ .mg-masonry .mg-item { margin-bottom: 20px; }
性能优化
- 图片压缩：在上传图片到网站之前，务必使用工具（如 TinyPNG, ImageOptim）进行压缩，以减小文件大小。
- 使用现代图片格式：如果可能，使用 WebP 格式的图片，它能在同等质量下提供更小的文件体积。
- 懒加载：Minimit Gallery 本身不包含懒加载功能，因为它旨在保持极简，如果你的图片非常多，可以考虑在页面级别实现懒加载。
第四部分：常见问题解答 (FAQ)
Q1: 画廊不显示，或者样式错乱怎么办？
A: 这通常是由于 CSS 文件没有正确引入，请检查：
gallery.css文件是否放到了正确的目录（static/css/或assets/css/）。- 在 HTML 布局文件中，
<link>标签的路径是否正确。 - 清除浏览器缓存,然后重新加载页面。
Q2: 如何给每张图片添加不同的链接？
A: Minimit Gallery 的标准 Shortcode 不支持此功能，它默认将图片链接到其自身（用于灯箱效果），如果你需要为每张图片添加不同的外部链接，你可能需要手动编写 HTML 结构，或者寻找其他更灵活的画廊插件。
Q3: 画廊的“查看更多”按钮链接到哪里？
A: “查看更多”按钮默认没有链接，如果你希望它链接到一个包含所有图片的单独页面，你需要：
- 创建一个单独的页面来展示所有高清大图。
- 在 Shortcode 中，通过自定义参数或修改模板文件，将“查看更多”按钮的
href属性指向那个页面的 URL，这通常需要修改 Minimit Gallery 的模板文件（gallery.html）。
Q4: 如何在 Hugo 中使用 src 参数，并自动获取图片描述？
A: Minimit Gallery 的 src 参数功能相对基础，它只会读取图片文件，无法自动读取图片的 alt 文本作为描述，最简单的方式是手动在 Shortcode 中列出所有图片并添加 alt 文本，如第一部分所示，如果你想实现更自动化的描述，可能需要结合 Hugo 的数据文件或更复杂的模板逻辑。
Minimit Gallery 是一个为追求性能和简洁的开发者而生的绝佳工具，通过本教程，你应该已经掌握了从安装、基本使用到高级配置的全过程，它的核心优势在于用最少的资源实现了最优雅的效果，非常适合个人博客、作品集和任何需要快速展示图片的场景。
现在就去尝试用它为你的网站增添一个漂亮的画廊吧！
