image - Jekyll-使用{{site.url}}将前面事物的图像路径声明为变量

Question

当我使用{{ site.url }}标记在最前面的变量中的图像路径时，它不会转换为HTML。

以下内容非常适用:

---
layout: post
title: chickpea
img: <img class="caption__media" data-interchange="[../asset/img/chickpea-small.jpg (small)], [../asset/img/chickpea-medium.jpg, (medium)], [../asset/img/chickpea-large.jpg, (large)]">
---

这不起作用:

---
layout: post
title: chickpea
img: <img class="caption__media" data-interchange="[{{site.url}}/asset/img/chickpea-small.jpg (small)], [{{site.url}}/asset/img/chickpea-medium.jpg, (medium)], [{{site.url}}/asset/img/chickpea-large.jpg, (large)]">
---

但是，当我在帖子中的 {{site.url}}标记中使用相同的图像链接而不是将其用作变量时，它可以工作。

分析生成的站点后发现，当我在前面问题中定义的image变量中使用jekyll时，Jekyll不会对其进行转换。

所以问题是:如何让Jekyll正确转换YAML前端中的图像路径？

Answer 1

您正在Yaml中混合数据和模板。您的图片标签(即模板)将在您的所有帖子中重复。但是，这里唯一需要的是您的图片网址。

因此，在您的Yaml事务中，请执行以下操作:

---
layout: post
title: chickpea
img:
  small:  chickpea-small.jpg
  medium: chickpea-medium.jpg
  large:  chickpea-large.jpg
---

在您的layout/post.html中，您可以添加:

{% if page.img %}
  <img class="caption__media" data-interchange="
  {% for img in page.img %}
    [{{site.baseurl}}/asset/img/{{img[1]}} ({{img[0]}})]
    {% unless forloop.last %}, {% endunless %}
  {% endfor %}
  ">
{% endif %}

此代码是用于演示目的的多行代码。您最好将所有内容放在一起。

注意:我使用的是 {{site.baseurl}} 而不是{{site.url}}，因为如果您的站点不在 baseurl域的根目录下，那么可以使您从损坏的 Assets 路径中解救出来。

现在，您可以清晰地将关注点分离，清晰的Yaml前端问题和可维护的代码。是不是很酷？