jekyll - 如何使用 Liquid 列出目录中的文件？

Question

我正在尝试学习如何将 Jekyll 与 Bootstrap 一起使用；在研究它们时，我决定在我的主页上有一个图像轮播。

由于我真的很懒，我不想硬编码在布局中显示每个图像所需的路径，我也不想使用数组来存储图像列表。

我想知道是否有任何标签可以要求 Jekyll 执行这两个步骤：

1. 查看特定目录
2. 对于您在该目录中找到的每个文件，重复一段代码

基本上我想写的东西有点像这段（想象的）代码：

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

因此，例如，如果我有一个文件夹，其中包含三个名为 image01.jpg、image02.jpg、image03.jpg 的文件，我希望 jekyll 可以为我构建此 HTML 代码：

<img src="folder/image01.jpg" />
<img src="folder/image02.jpg" />
<img src="folder/image03.jpg" />

因此，我查看了此参考页面，但没有发现任何对我的目的有用的东西。

拜托，你能给我任何建议，如果可能的话，一个不涉及使用插件的建议？

先感谢您。

Answer 1

你可以使用这个插件。将此代码复制并粘贴到_pluginsJekyll 项目根目录下的文件中。

https://gist.github.com/jgatjens/8925165

然后使用它只需添加下面的行

{% loop_directory directory:images iterator:image filter:*.jpg sort:descending %}
   <img src="{{ image }}" />
{% endloop_directory %}

Answer 2

使用 Jekyll集合API，截至 2015 年 8 月 7 日，该 API 带有重大警告

集合支持不稳定，可能会改变

在您的根目录中定义一个集合_config.yml并创建一个文件夹_images

collections:
- images

Jekyll 无需将 YAML 前端添加到您的图像中，将：

集合中没有前端内容的文件被视为静态文件，并简单地复制到其输出位置而不进行处理。

静态文件具有以下属性：

• file.path
• file.extname

然后您页面上的代码将类似于（未经测试）：

{% for image in site.images %}
     {% if image.extname == 'jpg' %}
         <img src="{{ file.url }}" />
     {% endif %}
{% endfor %}

Answer 3

没有插件也不是完全不可能，但当然你需要使用一些工具。例如，您可以将图像路径放在您的 YAML 前端，并且在 Jekyll 处理您的页面时它们将可用。

---
carousel_images:
  - images/img01.png
  - images/img02.png
  - images/img03.png
---

# Lots of page-related code.

{% for img in page.carousel_images %}
  # Do something.
{% endfor %}

对于站点范围的图像，您需要一个插件。但是，如果您希望您的图像位于特定页面或帖子中，则应该这样做。:)

希望有帮助！

Answer 4

根据@raphael 的回答，您可以使用以下代码列出 jpg 文件：

{% for file in site.static_files %}
  {% if file.extname == ".jpg" -%}
     * [{{ file.path }}]({{ site.baseurl }}{{ file.path }})
  {%- endif %}
{% endfor %}

您可能希望删除一些换行符以在输出中获得一个列表（而不是只有一个元素的列表）。

Answer 5

编辑（2015-11-09）： Jekyll 已经得到了一些更新，尤其是site.static_pages. 检查@raphael 答案以获得可能的解决方案。

不使用插件是不可能的。Liquid 模板中没有 I/O 功能。

如果你的图片有前端，它们可能会被 Jekyll 处理并存储在 site.pages 数组中，因此可以访问，但我不建议将前端放在图片上（可能对 SVG 有意义，但不适用于其他任何东西）。

您最好的选择可能是编写一个小 shell 脚本来扫描您的文件夹中的图像并创建一个 images.json 文件。然后可以通过 Ajax 加载此文件。每次上传新文件时，您只需要重新创建 images.json 文件（如果您使用 Git，您可以将其作为预提交挂钩）。

Answer 6

来自 SillyLogger的Jekyll:DirectoryTag插件

此标记允许您遍历特定路径的文件。目录标签产生一个文件对象和一个 forloop 对象。如果文件符合标准 Jekyll 格式，YYYY-MM-DD-file-title，那么这些属性将被填充到该文件对象上。

例如图像

<ul>
  {% directory path: images/vacation exclude: private %}
    <li>
      <img src="{{ file.url }}"
           alt="{{ file.name }}"
           datetime="{{ file.date | date_to_xmlschema }}" />
    </li>
  {% enddirectory %}
</ul>

Answer 7

请参阅文档，您可以在 中列出文件_post，_data只要在前面有它的名称即可。
对于图像，我们需要将它们放在首位_collection

{% for file_hash in site.post %}
{% assign file = file_hash[1] %}
{{ file.name }}
{% endfor %}

Answer 8

如果不想使用插件，另一种获取文件名的方法是直接修改jekyll中的ruby static_files：路径ex: C:\Ruby22-x64\lib\ruby\gems\xxx\gems\jekyll-xxx \lib\jekyll

编辑 static_files.rb 并更改：

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path)
  }
end

至：

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path),
    "name"          => @name
  }
end

您现在可以列出每个“png”文件并使用以下命令在 DIR_NAME 目录中获取其名称：

{% for file in site.static_files %}
  {% if file.extname == ".png" and file.path contains '/DIR_NAME/' %} 
   {{ file.name }}
  {% endif %}
{% endfor %}

Answer 9

使用site.pages：

{% for page in site.pages %}
* {{ page.path }}
{% endfor %}