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}}标记相同的图片链接而不是变量时，它可以正常工作。

分析生成的网站显示，当我在前面定义的图像变量中使用它时，Jekyll不会转换{{site.url}}标记。

所以问题是：我怎样才能让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 将使您免于破损的资产路径。

现在，您可以清楚地分离关注点，清晰的yaml前端内容和可维护的代码。酷不是吗？

Answer 2

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

因此我改变了帖子中变量的使用：

{{ post.img }}

为：

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

我希望这可以帮助有同样问题的人。：）

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

2 个答案: