关于从 Jekyll 上的任何文件夹生成响应式图像库

Question

我在 Jekyll 中为作品集内容创建了集合，目前可以通过本指南列出任何文件夹中的所有图像。但是有一些以@2x命名的图像文件，用于在image1.png，[e-mail]等高密度显示器上显示清晰的图像。

那么我如何在图库中排除@2x图像文件，并将srcset=""属性放入<img>标签中以生成响应式图像库。

---

这是我的示例.md文件：

---
layout: work-detail
---
{% include screenshot.html folder="/images-folder/" %}

这是用于生成图库的包含文件：

<div class="screenshot screenshot--grid">
{% for file in site.static_files %}
{% if file.path contains include.folder %}
{% if file.extname == '.jpg' or 
file.extname == '.jpeg' or 
file.extname == '.JPG' or 
file.extname == '.png' or 
file.extname == '.PNG' or 
file.extname == '.JPEG' %}
{% assign filenameparts = file.path | split: "/" %}
{% assign filename = filenameparts | last | replace: file.extname,"" %}
<img src="{{ file.path }}" alt="">
{% endif %}
{% endif %}
{% endfor %}
</div>

Answer 1

如果它们都正确/一致地命名，您可以执行以下操作：

{% unless file.path contains "@2x" %}
{% assign filepath2x = file.path | replace: file.extname,"@2x" | append: file.extname %}
<img src="{{ file.path }}" srcset="{{ filepath2x }} 1000w" />
{% endunless %}

请注意，此代码应替换(仅(图像标记的输出，因此这部分：

<img src="{{ file.path }}" alt="">

这段代码的作用是：

• 它可以防止输出文件名中带有"@2x"的图像(它会跳过它们(。
• 它创建一个名为"filepath2x"的新变量。此变量是 file.path 的副本，但将".extension"(.jpg(替换为"@2x.extension"(@2x.jpg(
• 它输出带有额外 srcset 属性的图像标记，并用这个新变量填充此属性。

我使用了随机的 srcset 设置(1000w(。请调整此设置以适合您的项目。