使用 Jekyll 和 Lightbox2 生成图片库

Christian Specht

0/5 (0投票)

2015年8月11日

CPOL

4分钟阅读

8620

使用 Jekyll 和 Lightbox2 生成图片库

为了我正在构建的基于 Jekyll 的站点，我需要一个图片库。我浏览了 Jekyll 在 GitHub wiki 上的 “使用 Jekyll 构建的站点”列表，想看看其他人如何使用 Jekyll 构建图片库，但是我没有找到任何使用“真正”图片库的站点（除了像直接显示来自 Flickr 的缩略图，然后直接链接到 Flickr 以显示实际图片，这不是我想要的）。

我想 Jekyll 主要被程序员用来创建关于编程的博客，所以大多数 Jekyll 用户不需要/不需要图片库。没有现成的例子可以借鉴，我不得不自己创建一个。

FancyBox 还是 Lightbox2？

首先，我需要一个“图片显示”脚本。
现在的标准似乎是 FancyBox （至少我的印象是这样），我也评估了 Lightbox2。
使用 FancyBox，我在“辅助图片”（例如左/右箭头）的相对路径方面遇到了一些问题，而 Lightbox2 没有这些问题。所以我选择了阻力最小的路径，使用了 Lightbox2。

我创建这个图库的实际站点是私有的（以及它的源代码），所以我不能在这里展示它。
相反，我构建了一个小型示例站点（使用 Jekyll 的标准模板和 Lightbox2 自带的示例图片），并将源代码放在 Bitbucket 上。
您可以查看这里的源代码和这里的完成站点。

创建数据文件

首先，我创建了一个数据文件来保存所有图片库的所有图片。
在我的第一个草案中，每个图库都有一个数据文件，但最后我选择了一个单独的文件来保存所有内容，因为这样可以更容易地显示所有可用图库的列表。

我的数据文件看起来像这样

- id: gallery1
  description: This is the first gallery
  imagefolder: /img/demopage
  images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image
- id: anothergallery
  description: This is even another gallery!
  imagefolder: /img/demopage
  images:
  - name: image-4.jpg
    thumb: thumb-4.jpg
    text: Another gallery, first image
  - name: image-5.jpg
    thumb: thumb-5.jpg
    text: Another gallery, second image
  - name: image-6.jpg
    thumb: thumb-6.jpg
    text: Another gallery, third image

图库概述

由于所有图库都在同一个数据文件中，所以在 “图库索引页”上创建图库列表非常简单

{% for gallery in site.data.galleries %}
- [{{ gallery.description }}]({{ gallery.id }})
{% endfor %}

这只是循环遍历图库列表，显示 description 值，并链接到名称为 id 值的子文件夹。
该文件是一个 Markdown 文件，因此用 Markdown 创建链接列表就足够了。

子页面和 Lightbox 图库

接下来，我创建了包含实际图片库的子页面，这些子页面是从图库索引页面链接过来的。

根据 Lightbox 文档，需要以下步骤才能使用 Lightbox 显示图片

加载 jQuery 和两个 Lightbox 文件（JS 和 CSS）

使用以下 HTML 在页面上显示每张图片

 <a href="img/image-1.jpg" data-lightbox="image-1" 
	title="My caption">image #1</a>

这意味着所有子页面都将是相同的（从 YAML 数据文件读取并生成上面描述的 HTML），所以我将图库的实际创建放入了布局文件。

仍然需要为每个图库的实际 URL 创建一个 HTML 或 Markdown 文件，但这些文件不需要任何内容，只需要最少的 YAML front-matter

---
title: the first gallery page
layout: gallery
galleryid: gallery1
---

layout: gallery 行指向我接下来要解释的布局文件，该文件完成了所有工作。
galleryid: gallery1 行引用 YAML 数据文件中的 id，因此布局文件知道它需要加载图库“gallery1”的图片。

这就是布局文件的样子

---
layout: default
---

<script src="http://christianspecht.de/js/jquery-1.10.2.min.js"></script>
<script src="http://christianspecht.de/js/lightbox-2.6.min.js"></script>
<link href="http://christianspecht.de/css/lightbox.css" rel="stylesheet" />

<p>default header for all gallery pages</p>

{% for gallery in site.data.galleries %}
  {% if gallery.id == page.galleryid %}
    <h1>{{ gallery.description }}</h1>
    <ol>
    {% for image in gallery.images %}
      <li>
        {{ image.text }}<br>
        <a href="{{ gallery.imagefolder }}/{{ image.name }}" 
        data-lightbox="{{ gallery.id }}" title="{{ image.text }}">
          <img src="{{ gallery.imagefolder }}/{{ image.thumb }}">
        </a>
      </li>
    {% endfor %}
    </ol>
  {% endif %}
{% endfor %}

<p>default footer for all gallery pages</p>

为了在数据文件中找到正确的图库，布局只是循环遍历数据文件，直到找到一个 id 属性与页面 front matter 中的 galleryid 匹配的图库。
然后，它循环遍历图库中的图片，并为每个图片创建必要的“Lightbox HTML”（带有缩略图和图片描述）。

结果

最后，这个图库（来自数据文件的第一部分）

- id: gallery1
  description: This is the first gallery
  imagefolder: /img/demopage
  images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image

...被转换为这个 HTML

<h1>This is the first gallery</h1>
<ol>

  <li>
    The first image<br>
    <a href="http://christianspecht.de/img/demopage/image-1.jpg" 
    data-lightbox="gallery1" title="The first image">
      <img src="http://christianspecht.de/img/demopage/thumb-1.jpg">
    </a>
  </li>

  <li>
    The second image<br>
    <a href="http://christianspecht.de/img/demopage/image-2.jpg" 
    data-lightbox="gallery1" title="The second image">
      <img src="http://christianspecht.de/img/demopage/thumb-2.jpg">
    </a>
  </li>

  <li>
    The third image<br>
    <a href="http://christianspecht.de/img/demopage/image-3.jpg" 
    data-lightbox="gallery1" title="The third image">
      <img src="http://christianspecht.de/img/demopage/thumb-3.jpg">
    </a>
  </li>

</ol>

添加新图库

现在所有的管道都完成了，添加一个新的图库页面非常简单

向 YAML 数据文件添加包含图片列表的新图库
为新图库创建一个具有最少 YAML front-matter 的新索引页面
添加新图片
（注意：在上面链接的提交中，我没有添加任何图片，因为它们已经存在，因为我将它们与 Lightbox2 下载一起提交，它们来自那里）

这已经足以将这个图库添加到站点。

还有另一篇博客文章展示了使用 Jekyll 生成图片库的不同方法。