jekyll - Jekyll for 循环遍历文件夹中的所有图像？

Question

我想在我的 jekyll 博客上制作一个非常简单的作品集。我将所有图像文件放在一个文件夹中。

目前，我让它生成这样的照片页面：

<p style="line-height: 100px;">
<img src="photos/01.jpg"><br>
<img src="photos/02.jpg"><br>
<img src="photos/03.jpg"><br>
<img src="photos/04.jpg"><br>
<img src="photos/05.jpg"><br>
<img src="photos/06.jpg"><br>
<img src="photos/07.jpg"><br>
<img src="photos/08.jpg"><br>
<img src="photos/09.jpg"><br>
<img src="photos/10.jpg"><br>
</p>

如果我想添加或删除新照片，这根本不方便。是否可以为帖子执行类似 for 循环的操作：

{% for post in site.posts %}
     <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{% endfor %}

除了循环遍历所有图像？

谢谢！

score 76 · Accepted Answer

这对我来说就像一个魅力。不需要插件。

我的图像在一个assets/images/slider目录中。

{% for image in site.static_files %}
    {% if image.path contains 'images/slider' %}
        <img src="{{ site.baseurl }}{{ image.path }}" alt="image" />
    {% endif %}
{% endfor %}

image.path contains 'images/slider'确保仅插入该文件夹中的图像。

进一步阅读here和jekylltalk。

故障排除：如评论中所述，如果您在使用此方法时遇到问题，您可能需要尝试删除标记前的缩进。

score 17 · Accepted Answer

这是另一个不使用插件的解决方案（具有多个画廊页面），因此它适用于 GitHub Pages。

我有一篇博文，这里有更详细的解释：
使用 Jekyll 和 Lightbox2 生成图片库

这是简短的版本：

使用图像列表创建一个YAML 数据文件( _data/galleries.yml)：

- 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 %}

创建一个所有画廊都将基于的布局文件 ( )：_layouts/gallery.html

（在我的示例中，我使用Lightbox2来显示图像，因此在我的示例中还有额外的 HTML，当您只想使用时甚至不需要<img src="photos/01.jpg">）

---
layout: default
---

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

{% 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 %}

对于每个图库页面，创建一个.html或.md仅包含三行 YAML 前端内容的文件：
```
---
title: the first gallery page
layout: gallery
galleryid: gallery1
--- 
```
该layout: gallery行指的是步骤 3 中的布局文件。
该galleryid: gallery1行指的是步骤 1 中的数据文件，因此布局文件“知道”它必须显示第一个画廊中的图像。

而已。

此解决方案不会自动循环遍历图像文件夹，但您只需将新图像插入数据文件，这比<img src="photos/01.jpg">手动创建 HTML 行更简单（尤其是当 HTML 比这更复杂时，如我的上面的 Lightbox2 示例）。

另外，正如我在开头所说的：它适用于 GitHub Pages，所有带有插件的解决方案（可以循环图像文件夹）都不能。

score 9 · Accepted Answer

理想情况下，您希望扫描图像目录，然后从那里生成文件列表。据我所知，Jekyll 没有这样做的功能。然而，它是相当可扩展的，所以你有几个选择：

编写（或查找）一个执行目录扫描的插件。如果您了解 Ruby，这应该不会太具有挑战性。Jekyll 站点有关于插件外观的文档。（您可能想要自定义 Liquid 标签。）
如果您不了解 Ruby，您可以考虑使用外部脚本或程序生成特殊的画廊 HTML 页面，然后将生成的文件包含到您的模板中。下面以 shell oneliner 为例：

find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'
如果您可以坚持您的命名约定，您也可以伪造它并使用常规循环：
```
{% for i in (1..10) %}
<img src="照片/{{ i }}.jpg"><br>
{% endfor %}
```
但这意味着您仍然必须记住保持“10”数字的更新。

第二个选项和第三个选项不太干净，但它们都具有可以与 GitHub 页面一起使用的优点（如果您使用的是），而第一个则不会。

score 1 · Accepted Answer

Joosts建议的Jekyll Codex 实现是一个很好的起点。我已经研究了一段时间，有很多类似的项目，但大多数都已停止或部分工作。

经过一番挖掘，我觉得用例的最佳项目是Azores Image Gallery，它相当快并且内存占用很小，因为依赖于Minimagick一个小的 Ruby 包装器 ImageMagick：

https://github.com/simoarpe/azores-image-gallery

免责声明：我是作者。

score 0 · Accepted Answer

您也可以在根目录下使用集合创建文件夹将图像放在那里
_collection

在_config.yaml添加此代码

collections:
  - collection

具有front matter
创建集合属性

然后列出图像的代码将类似于

{% for image in site.collection %}
     <img src="{{ file.url }}" />
{% endfor %}

score 0 · Accepted Answer

在 Jekyll 中列出当前目录中的 jpg 文件可以这样完成：

{% for file in site.static_files %}
  {% assign pageurl = page.url | replace: 'index.html', '' %}
  {% if file.path contains pageurl %}
    {% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
    <img src="{{ file.path }}" />
    {% endif %}
  {% endif %}
{% endfor %}

一个不错的多用途解决方案。可以在此处找到有关此解决方案的更多信息：http: //jekyllrb.com/docs/static-files/

更新： Jekyll Codex 已实现此代码以便于重用，让您可以简单地编写：

{% include image-gallery.html folder="/uploads/album" %}

jekyll - Jekyll for 循环遍历文件夹中的所有图像？

6 回答 6

Related

Reference