捕获液体中的两个变量

Question

我想做的事情：

捕获两个变量{{section.settings.{{title}}_modal_title}}

上下文：

link 列表中的 link 并没有真正用作 link，只是为了让用户可以在他们的 Shopify 门户中重新组织它。外部 javascript 文件在单击事件时创建元素（模态），来自 section.settings.XXX_modal_title 的值应该用于创建的模态。

link列表：

<ul class="menu">
            {% for link in linklists.main-menu.links %}
                <li data-menu="{{ link.title | upcase }}" class="menu-link">
                    <p class="menu-title">[{{ link.title | upcase }}]</p> <-- Click event
                </li>
            {% endfor %}
        </ul>

我尝试了什么：

我的第一次尝试是使用 .insertAdjacentHTML('afterbegin', {{section.settings.${attLowerCase}_modal_title}}) 添加液体标签本身元素已创建，但很快意识到液体首先呈现值。这样做的输出字面意思是“{{}}”
我的第二次尝试是捕获两个变量并将其放入隐藏输入中。

{% assign title = link.title | downcase %}
                    {% capture section_title_variable %}
                        {{section.settings.{{title}}_modal_settings}}
                    {% endcapture %}
                    <hr class="item-line">
                    <p class="ueq-menu-title">[{{ link.title | upcase }}]</p>
                    <input type="hidden" id="about_modal_title" value="{{section_title_variable}}">

深入示例：

section.settings

{
            "type": "text",
            "id": "about_modal_title",
            "label": "About window title",
            "default": "ABOUT"
},

用户点击link关于

<ul class="menu">
            {% for link in linklists.ueq-menu.links %}
                <li data-menu="{{ link.title | upcase }}" class="menu-link"> <-- "ABOUT"

                    {% assign title = link.title | downcase %} <-- downcase to "about"
                    {% capture section_title_variable %}
                        {{section.settings.{{title}}_modal_title}}
                        
                    {% endcapture %}
                    <hr class="item-line">
                    <p class="menu-title">[{{ link.title | upcase }}]</p>
                    <input type="hidden" id="about_modal_title" value="{{section_title_variable}}"> <-- captured should look like this {{section.settings.about_modal_title}}


                </li>
            {% endfor %}
        </ul>

在点击事件中，从隐藏的输入中获取值，并在创建元素时使用它。

“为什么不使用 `{% javascript %}`？”

我更喜欢这样做，因为我的大部分脚本文件都是外部的。我喜欢保持这种状态。

“为什么要这样捕捉它？”

link列表中的link是已知的，这是设计好的。这就是为什么在 sechema 中其中之一被称为“about_modal_title”。由于这是在 for 循环中使用的，这是我能想到的将标题和架构设置相互连接的唯一方法。

如果有人知道更好的方法而不是将其放入隐藏输入中，请告诉我:)

Answer 1

在正确的 Liquid 语法中，大括号永远不会嵌入大括号内

语法 {{ something_{{ you }}_want }} 是非法的 Liquid 语法 - 一旦表达式开始，使用 {{ 或 {%，直到下一个 }} 或 %} 被评估为一个模板命令。

在您的示例中，您希望合并两个字符串以获得您要访问的设置的名称。在专用的编程语言中，我们希望有这样的捷径。然而，Liquid 首先是一种 模板化 语言，并且没有这样的快捷方式。相反，我们需要分两步完成我们的目标。

首先我们需要知道的是我们可以通过两种方式访问属性：{{ settings.fieldname }}等同于{{ settings['fieldname'] }}

感谢第二种语法，我们可以使用变量访问任意设置：

{% assign field = 'fieldname' %}
{{ settings[fieldname] }}

所以要做一些更复杂的事情，我们只需要使用 assign（或 capture - 请注意捕获也包含空格！）来获取包含名称的变量我们要访问的字段，然后将其传递到方括号中：

{% assign title_field = link.title | downcase | append: '_modal_title' %}
{{ section.settings[title_field] }}

捕获液体中的两个变量

Capture two variables in liquid

liquid

shopify

我想做的事情：

上下文：

我尝试了什么：

深入示例：

“为什么不使用 `{% javascript %}`？”

“为什么要这样捕捉它？”

在正确的 Liquid 语法中，大括号永远不会嵌入大括号内

捕获液体中的两个变量

Capture two variables in liquid

liquid

shopify

我想做的事情：

上下文：

我尝试了什么：

深入示例：

“为什么不使用 {% javascript %}？”

“为什么要这样捕捉它？”

在正确的 Liquid 语法中，大括号永远不会嵌入大括号内

“为什么不使用 `{% javascript %}`？”