65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Hugo 和 Lightbox2 创建图像库

Christian Specht
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2020 年 8 月 11 日

CPOL

4分钟阅读

viewsIcon

11761

如何使用 Lightbox2 创建图像库

在过去的几年里，我使用 Jekyll 构建了多个静态网站。总的来说，我对 Jekyll 很满意，但有些地方可以做得更好，其中最重要的就是构建时间。

我想评估另一个静态网站生成器作为替代方案，我选择了 Hugo，主要是因为它的速度（我查阅了多个来源，都说它真的很快）。

与 Jekyll 相比，我认为 Hugo 的学习曲线非常陡峭……我花了相当长的时间才掌握了足够的概念，从而能够创建一个基本网站。

那时，我决定先创建一个图片库。这是我最早尝试 Jekyll 的实验之一——在基本功能运行起来之后，我用 Lightbox2 构建了两个版本的图片库（1，2）。

下面是如何用 Hugo 实现相同的结果。

目录结构

示例代码可以在 code-examples 仓库中找到。在解释步骤时，我会链接到我实际完成相应步骤的具体提交。

这是 Hugo 的 content 目录的基本结构

|       
+---content
|   \---galleries
|       |   _index.md
|       |   
|       \---gallery1
|           |   index.md
|           |   
|           \---img
|                   esmeralda.jpg
|                   notebook.jpg
|                   Pope-Edouard-de-Beaumont-1844.jpg
|                   Victor_Hugo-Hunchback.jpg

请注意 _index.md 和 index.md 的区别

  • _index.md 是一个 索引页，它只列出其子项。
  • index.md（没有下划线）是一个“单页”，意味着它是一个实际的内容页面。

这是我创建带有 .md 文件的项目的提交。另外，我需要一些示例图片来制作图片库，所以我只是从 Ananke 主题附带的示例站点 复制了一些。

请注意目标目录：图片位于 /content/galleries/gallery1 的子目录中，因此它们是 /content/galleries/gallery1/index.md 的 页面包的一部分。在 Hugo 的术语中，这些图片是 页面资源，这意味着我们可以像这样列出当前页面的图片

{{ with .Page.Resources.ByType "image" }}
    <ul>
    {{ range . }}
    <li>{{ .Permalink }}</li>
    {{ end }}
    </ul>
{{ end }}

但显然，在 Hugo 中无法将该代码直接粘贴到页面上进行测试……因此，我们首先需要创建一个短代码

短代码

对于熟悉 Jekyll 的人来说，Jekyll 的 includes 在 Hugo 中被称为 shortcodes（短代码）。

短代码允许我们在一个中央 HTML 文件中创建需要多次使用的内容（例如显示图片库的代码 :-) —— 在这种情况下，它是上一段中的“列出所有图片”的代码

/layouts/shortcodes/gallery.html:

{{ with .Page.Resources.ByType "image" }}
    <ul>
    {{ range . }}
    <li>{{ .Permalink }}</li>
    {{ end }}
    </ul>
{{ end }}

……我们可以像这样将它“包含”到其他页面中

{{< gallery >}}

这是包含更改的提交——这最终将成为我的“显示当前页面的图片库”的 include。

这将生成以下 HTML

<ul>
<li>https://:1313/galleries/gallery1/img/Pope-Edouard-de-Beaumont-1844.jpg</li>
<li>https://:1313/galleries/gallery1/img/Victor_Hugo-Hunchback.jpg</li>
<li>https://:1313/galleries/gallery1/img/esmeralda.jpg</li>
<li>https://:1313/galleries/gallery1/img/notebook.jpg</li>
</ul>

自动生成缩略图

除了惊人的构建速度之外，这也是 Hugo 的一个杀手级功能：它能够 在构建时批量处理图像，这意味着与我的 Jekyll 图片库不同，我只需要提供实际的图片给 Hugo，它就会在构建站点时自动生成缩略图。

这是一个简单的例子，我为页面包中的每张图片创建一个缩略图（150x115 像素，JPEG 质量 20%），并将其与原始（较大的）图片一起显示

/layouts/shortcodes/gallery.html:

{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
    <ul>
    {{ range . }}
    {{ $resized := .Fill "150x115 q20" }}
    <li>{{ .Permalink }}
        {{ $resized.Permalink }}</li>
    {{ end }}
    </ul>
{{ end }}

这将生成以下 HTML

<ul>
<li>https://:1313/galleries/gallery1/img/Pope-Edouard-de-Beaumont-1844.jpg
    https://:1313/galleries/gallery1/img/Pope-Edouard-de-Beaumont-1844_
    hu28e98c35df2fb9cf55bbe1469dad4e9d_67722_150x115_fill_q20_box_smart1.jpg</li>
<li>https://:1313/galleries/gallery1/img/Victor_Hugo-Hunchback.jpg
    https://:1313/galleries/gallery1/img/Victor_Hugo-Hunchback_
    hu0047bfedff79a029a47406b9671745f3_111947_150x115_fill_q20_box_smart1.jpg</li>
<li>https://:1313/galleries/gallery1/img/esmeralda.jpg
    https://:1313/galleries/gallery1/img/esmeralda_hueb36a26f61b343d8dba9f5eda0997ef5_
    54891_150x115_fill_q20_box_smart1.jpg</li>
<li>https://:1313/galleries/gallery1/img/notebook.jpg
    https://:1313/galleries/gallery1/img/notebook_hu3d03a01dcc18bc5be0e67db3d8d209a6_
    1586565_150x115_fill_q20_box_smart1.jpg</li>
</ul>

请注意，在我的实际测试项目中，我在源代码管理中忽略了整个 resources/_gen 目录。Hugo 文档 告诉我要提交处理过的图片，但我选择忽略它们，因为我认为它们是一种构建产物（就像我不会提交的可执行文件一样）。

对于本地开发体验来说，这并不重要：在我本地机器上，Hugo 只在第一次构建时生成图片（因为它在后续构建之前不会删除它们）。部署将通过 CI 进行，所以我不在乎 CI 服务器构建的时间是否会稍长一些。

然而，在链接的演示项目中，我确实提交了生成的图片。

整合

准备好所有“配料”后，我们现在可以 使用 Lightbox2 显示实际的图片库

/layouts/shortcodes/gallery.html:

<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js">
</script>

{{ $image := (.Page.Resources.ByType "image") }}
{{ with $image }}
    {{ range . }}
    {{ $resized := .Fill "150x115 q20" }}
    <a href="{{ .Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
    {{ end }}
{{ end }}

HTML 输出

<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js">
</script>

<a href="https://:1313/galleries/gallery1/img/Pope-Edouard-de-Beaumont-1844.jpg" 
 data-lightbox="x">
<img src="https://:1313/galleries/gallery1/img/
 Pope-Edouard-de-Beaumont-1844_hu28e98c35df2fb9cf55bbe1469dad4e9d_67722_150x115_fill_
 q20_box_smart1.jpg" /></a>

<a href="https://:1313/galleries/gallery1/img/Victor_Hugo-Hunchback.jpg" 
data-lightbox="x">
<img src="https://:1313/galleries/gallery1/img/Victor_Hugo-Hunchback_
hu0047bfedff79a029a47406b9671745f3_111947_150x115_fill_q20_box_smart1.jpg" /></a>

<a href="https://:1313/galleries/gallery1/img/esmeralda.jpg" 
data-lightbox="x"><img src="https://:1313/galleries/gallery1/img/
esmeralda_hueb36a26f61b343d8dba9f5eda0997ef5_54891_150x115_fill_q20_box_smart1.jpg" /></a>

<a href="https://:1313/galleries/gallery1/img/notebook.jpg" 
data-lightbox="x"><img src="https://:1313/galleries/gallery1/img/
notebook_hu3d03a01dcc18bc5be0e67db3d8d209a6_1586565_150x115_fill_q20_box_smart1.jpg" /></a>

就是这样——这段 HTML 将显示缩略图，点击它们将使用 Lightbox2 打开实际的图片。

请注意：在演示仓库中还有一个额外的 CSS 文件提交——这是因为 Ananke 主题。如果没有这个调整，Ananke 的默认 CSS 会将所有图片拉伸到页面宽度，并将每张图片显示在新的一行……这对于缩略图来说毫无意义。

结论

到目前为止，我对 Hugo 的表现很满意。正如我之前所说，与 Jekyll 相比，我认为学习曲线非常陡峭（而且文档没有充分解释基本概念，所以我遇到的主要问题是不知道我正在寻找的事物的确切术语）。

但是一旦我越过了那个阶段，使用 Hugo 就非常方便了，因为它内置了许多我需要在 Jekyll 中手动完成的功能，例如：

  • 获取属于特定页面的图片列表（尽管我认为 Jekyll 已经在这方面有所改进——我在 2014 年写了“Jekyll 图片库”的文章）
  • 自动 索引页
  • 以及，当然，自动生成缩略图！
© . All rights reserved.