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}}标签相同的图像链接而不是变量时,它可以工作.

分析生成的站点显示,{{site.url}}当我在前面定义的图像变量中使用它时,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}},因为如果您的网站不在域名的基础上,则可以避免损坏资产路径.

现在,您可以清楚地分离关注点,清晰的yaml前端问题和可维护的代码.酷不是吗？