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

除了遍历所有图像？

谢谢！

Answer 1

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

我的图片位于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。

Answer 2

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

我的博客文章中有更详细的解释：
Generating an image gallery with Jekyll and Lightbox2

以下是简短版本：

使用图片列表创建YAML data file（_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 %}

创建一个所有画廊将基于的layout file（_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中的数据文件，以便布局文件“知道”它必须显示第一个库中的图像。

就是这样。

此解决方案不会自动遍历images文件夹，但您只需将新图像插入到数据文件中，这比手动创建<img src="photos/01.jpg"> HTML行更为繁琐（尤其是HTML比这更复杂，就像我上面的Lightbox2示例中那样）。

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

Answer 3

理想情况下，您想要扫描图像目录，然后从那里生成文件列表。 Jekyll没有这方面的功能，我知道。但是，它是可扩展的，所以你有几个选择：

编写（或查找）执行目录扫描的插件。如果你了解Ruby，这不应该太具有挑战性。 The Jekyll site has documentation on how a plugin should look.（您可能想要使用自定义Liquid标签。）
如果您不了解Ruby，可以考虑使用外部脚本或程序生成特殊的图库HTML页面，然后将生成的文件包含到模板中。这是一个shell oneliner作为例子：

find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'
如果你坚持你的命名惯例，你也可以假装它并只使用常规循环：
```
{% for i in (1..10) %}
<img src="photos/{{ i }}.jpg"><br>
{% endfor %}
```
但这意味着您仍然需要记住更新“10”号码。

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

Answer 4

在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有implemented这段代码可以轻松重复使用，让您只需写一下：

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

Answer 5

您也可以使用collection 在root下创建_collection文件夹放置图像

在_config.yaml添加此代码

collections:
  - collection

front matter
创建collections attribute

然后列出图像的代码就像

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

Answer 6

Jekyll Codex implementation建议的Joosts是一个很好的起点。我研究了一段时间，有很多类似的项目，但是其中大多数已经停产或部分正常工作。

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

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

免责声明：我是作者。

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

6 个答案: