Jekyll Liquid中的嵌套变量

Question

我对杰基尔很不熟悉，我需要你的帮助。

我正在尝试优化以下代码：

<a href="{{ "/assets/img/image.jpg" | prepend: site.baseurl }}" title="a">
<picture>
<source type="image/webp" srcset="{{ "/assets/img/image.webp" | prepend: site.baseurl }}">   
<source type="image/jpeg" srcset="{{ "/assets/img/image.jpg" | prepend: site.baseurl }}"> 
<img src="{{ "/assets/img/image.jpg" | prepend: site.baseurl }}" alt="a">
</picture>
</a>

我想做的是看看我是否可以优化它。例如，我找不到将/assets/img/image.jpg放入Liquid变量中，然后通过href、src、srcset参数调用它的方法。不过我想这是可能的。

你有什么建议吗？：(

干杯！

Answer 1

你可以做两件事。

分配两个变量

{% assign jpg = "/assets/img/image.jpg" | prepend: site.baseurl %}
{% assign webp = "/assets/img/image.webp" | prepend: site.baseurl %}
<a href="{{ jpg }}" title="a">
<picture>
<source type="image/webp" srcset="{{ webp }}">   
<source type="image/jpeg" srcset="{{ jpg }}"> 
<img src="{{ jpg }}" alt="a">
</picture>
</a>

或

使用include并传递图像路径作为参数

image.html:

<a href="{{ include.path | append: ".jpg" | prepend: site.baseurl }}" title="a">
<picture>
<source type="image/webp" srcset="{{ include.path | append: ".webp" | prepend: site.baseurl }}">   
<source type="image/jpeg" srcset="{{ include.path | append: ".jpg" | prepend: site.baseurl }}"> 
<img src="{{ include.path | append: ".jpg" | prepend: site.baseurl }}" alt="a">
</picture>
</a>

在需要的地方，您可以通过以下方式插入上面的html：

{% include image.html path="/assets/img/image" %}