Shopify 液体标签嵌套在液体标签中 - 任何解决方法？答案

【问题标题】：Shopify Liquid tag nested in liquid tag - any workaround?Shopify 液体标签嵌套在液体标签中 - 任何解决方法？
【发布时间】：2022-06-14 05:12:38
【问题描述】：

我是 Shopify 和 Liquid 的新手。我知道你不能将一个液体标签嵌套在另一个液体标签中，即：

{% something {{ something_else }} %}

我想知道这种情况是否有解决方法？可能涉及“捕获”或巧妙地使用“原始”？

我正在构建一个网站，该网站使用产品标签来表示哪些巧克力属于哪些产品（巧克力系列）。在产品页面上，我可以轻松地将标签作为列表返回：

<ul class="chocolates-menu">
  {% for tag in product.tags %}
    <li><a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a></li>
  {% endfor %}
</ul>

但是，我想用文件名呈现 sn-ps 以匹配标签的名称（这些将包含图像、巧克力名称和巧克力描述），即：

<li><a href="/collections/all/{{ tag | handleize }}">{% render '{{ tag }}' %}</a></li>

我得到的最接近的是：

{% for tag in product.tags %}
  {% capture chocolate_tag %}
    {% raw %}{% render{% endraw %} {% raw %}'{% endraw %}{{ tag }}{% raw %}' %}{% endraw %}
  {% endcapture %}
  <li><a href="/collections/all/{{ tag | handleize }}">{{ chocolate_tag }}</a></li>
{% endfor %}

这将输出正确的代码，但作为页面上的文本（而不是解析它）。即： {% render 'Tag Name Here' %} 只是作为列表项的文本。非常感谢聪明人的任何帮助。谢谢。

【问题讨论】：

sn-ps 是否因标签而异？您可以使用 {% render 'tag' with tag as tag %} 或 {% include 'tag', tag: tag %} 之类的参数创建一个 sn-p，因此您将拥有 tag 变量，您可以在 sn-p 中使用它。
感谢您的建议。我可能在这里遗漏了一些东西，但这可能只是将同样的问题推到了 sn-p 上？即我的 sn-p 将包含类似：<img src="{{ 'image_with_tag_name_here.png' | file_img_url: '100x' }}" class="responsive"> <h6 class="chocolate-title">{{ tag }}</h6> <p class="chocolate-description">Short description, specific to each chocolate shown here</p>。 img 不会再次需要嵌套的液体标签吗？即：<img src="{{ '{{ tag }}.png' | file_img_url: '100x' }}" class="responsive">。我可以用 if 语句处理描述。
你可以做{% assign filename = tag | concat: ".png" %} src="{{ filename | file_img_url}}"
@FabioFilippi 这太棒了。谢谢你。出于某种原因，concat 不起作用。我最终改用append：{% assign chocolate_image_url = tag | replace: ' ', '-' | append: ".png" %}（图像文件名等同于标签文本，但使用破折号而不是空格）。非常感谢您的帮助。希望这对其他人来说是一个有用的案例研究。
是的，concat 用于列表，append 用于字符串，但我总是混淆它们！

标签： shopify liquid

【解决方案1】：

我建议为所有巧克力创建一个 sn-p 并将标签用作变量来输出所需的内容。

这是我的意思的直观表示，从您与@Fabio Filippi 的讨论中可以更清楚地了解

snippets/chocolate.liquid

{% assign tag_image = tag | append: '.png' %}

{% case tag %}
  {% when 'diet' %}
    <img src="{{ tag_image | file_img_url: '100x' }}" class="responsive" />

  {% when 'dark' %}
    <div>My dark chocolate HTML</div>

  {% when 'white' %}
    <div>My white chocolate HTML</div>

{% endcase %}

以及如何使用：

{% render 'chocolate', tag: tag %}

【讨论】：