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

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'确保只有该文件夹中的图像插入.

进一步阅读这里和jekylltalk.

Answer 2

这是另一个不使用插件的解决方案(有多个图库页面),因此它适用于GitHub页面.

我有一篇博文,其中有更详细的解释:
使用Jekyll和Lightbox2生成图库

• 完成的画廊概述页面
• 源代码

这是简短的版本:

1. 使用图像列表创建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
   

2. 有关可用库的列表,只需遍历数据文件:

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

3. 创建一个所有图库将基于的布局文件 (_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 %}
   

4. 对于每个图库页面,创建一个仅包含三行YAML前端内容的文件.html或.md文件:

   ---
   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没有这方面的功能,我知道.但是,它是可扩展的,所以你有几个选择:

1. 编写(或查找)执行目录扫描的插件.如果你了解Ruby,这不应该太具有挑战性.Jekyll网站上有关于插件外观的文档.(您可能想要使用自定义Liquid标签.)

2. 如果您不了解Ruby,可以考虑使用外部脚本或程序生成特殊的图库HTML页面,然后将生成的文件包含到模板中.这是一个shell oneliner作为例子:

   find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'

3. 如果你坚持你的命名约定,你也可以伪造它并只使用常规循环:

   {% for i in (1..10) %}
   <img src="photos/{{ i }}.jpg"><br>
   {% endfor %}
   

   但这意味着你仍然需要记住保持'10'号码更新.

第二个选项和第三个选项不太干净,但两者都具有以下优点:它们可以与GitHub页面一起使用(如果这是您使用的),而第一个选项则不然.