Question

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

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

我想知道是否有任何标签可以让Jekyll做这两个步骤：

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

基本上我想写的东西与这段（想象的）代码模糊相似：

{% 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" />

所以我看了this reference page，但我没有发现任何有用的东西。

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

提前谢谢。

Answer 1

您可以使用此插件。将此代码复制并粘贴到Jekyll项目根目录的_plugins目录下的文件中。

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

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

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

Answer 2

没有插件，它不是完全，但当然你需要使用一些kludges。例如，您可以将图像路径放在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 3

使用Jekyll collections API，截至2015-08-07发布了重大警告

收藏支持不稳定且可能会发生变化

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

collections:
- images

无需在图像中添加YAML正面内容，Jekyll将：

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

Static files具有以下属性：

file.path
file.extname

然后您网页上的代码就像一样（未经测试）：

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

Answer 4

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

不使用插件是不可能的。您在Liquid Templates中没有I / O功能。

如果您的图像有前端问题，它们可能会被Jekyll处理并存储在site.pages数组中，因此可以访问，但我不建议将Front Matter放在图像上（可能对SVG有意义，但不是其他任何事情）。

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

Answer 5

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

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

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

Answer 6

SillyLogger的Jekyll:DirectoryTag插件

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

例如图片

summary <- (lm1$coef)
data.frame(as.list(summary))

Answer 7

如果您不想使用插件，获取文件名的另一种方法是直接修改jekyll中的ruby static_files：路径ex：C：\ Ruby22-x64 \ lib \ ruby \ gems \ x.x.x \ gems \ jekyll-x.x.x \ 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

您现在可以列出每个＆＃34; png＆＃34;使用以下命令在DIR_NAME目录中输入并获取其名称：

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

Answer 8

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

之前

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

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

8 个答案: