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)]">
---

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

对生成的站点进行分析表明，当我在前面定义的图像变量中使用{{site.url}}标记时，Jekyll并不会转换它。

因此，问题是:我如何才能让Jekyll正确地翻译YAML前端的图像路径？

Answer 1

你在yaml中混合了数据和模板。您的图像标记(这是一个模板)将复制在您的所有帖子。但是这里你唯一需要的就是你的图像urls。

所以，在你的yaml前端，做：

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

在您的布局/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会将您从损坏的资产路径中拯救出来。

现在您已经清晰地分离了关注点、清晰的yaml前端内容和可维护的代码。很酷不是吗？

Answer 2

我刚刚用以下技术解决了这个问题：Include jekyll / liquid template data in a YAML variable?

因此，我将post中的变量的用法更改为：

{{ post.img }}

至：

{{ post.img | replace: '..', site.url }}

我希望这能帮助有同样问题的人。:)