javascript - 如何使用液体模板语言在循环中添加 anchor 标记？

Question

我正在尝试添加一个围绕某个部分的链接。该链接将通过 CMS 动态化。其中，我已链接到可用字段中的页面。我真的很困惑为什么这个循环不会添加链接 URL。

此循环当前呈现图像、标题和文本字符串。然而，当我尝试在 HTML block 周围添加带有动态 URL 的标签时，这会导致标签未填充。

{% for i in (1..4) %}

    {% capture item_url %}url_{{ i }}{% endcapture %}
    {% assign item_url = block.settings[item_url] %}

    {% capture item_photo %}img_{{ i }}{% endcapture %}
    {% assign item_photo = block.settings[item_photo] %}

    {% capture item_title %}title_{{ i }}{% endcapture %}
    {% assign item_title = block.settings[item_title] %}

    {% capture item_text %}text_{{ i }}{% endcapture %}
    {% assign item_text = block.settings[item_text] %}

    {% if item_url.size > 0 or item_photo.size > 0 or item_title.size > 0 or item_text.size > 0 %}
        <div class="col-sm-3">

          <a class="item_url" href="{{ item_url }}">
            <div class="item">
                {% if item_photo.size > 0 %}
                    <div class="item_img">
                        <img src="{{ item_photo.src | img_url: '270x270' }}" alt="{{ item_icon.alt }}">
                    </div>
                {% endif %}

                {% if item_title.size > 0 %}
                    <h3 class="item_title">{{ item_title }}</h3>
                {% endif %}

                {% if item_text.size > 0 %}
                    <div class="item_text">{{ item_text }}</div>
                {% endif %}
            </div>
          </a> 

        </div>
    {% endif %}
{% endfor %}

支持模式以 block 为单位，如下所示；

// PHOTOS BLOCK ///////////////////////////////////////////////////////////////////////////////////
{
    "type": "photos-block",
    "name": "Photos block",
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Our team"
        },

        // ITEM 1 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 1"
        },
        {
            "type": "image_picker",
            "id": "img_1",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_1",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_1",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_1",
            "label": "Url"
        },

        // ITEM 2 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 2"
        },
        {
            "type": "image_picker",
            "id": "img_2",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_2",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_2",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_2",
            "label": "Url"
        },

        // ITEM 3 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 3"
        },
        {
            "type": "image_picker",
            "id": "img_3",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_3",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_3",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_3",
            "label": "Url"
        },

        // ITEM 4 /////////////////////////////////////////////////////////////////////////////////
        {
            "type": "header",
            "content": "Item 4"
        },
        {
            "type": "image_picker",
            "id": "img_4",
            "label": "Image",
            "info": "Will be resized to 270x270px"
        },
        {
            "type": "text",
            "id": "title_4",
            "label": "Title"
        },
        {
            "type": "text",
            "id": "text_4",
            "label": "Text"
        },
        {
            "type": "url",
            "id": "url_4",
            "label": "Url"
        }
    ]
},

Answer 1

您正在生成一个像这样的变量 {% capture item_url %}url_{{ i }}{% endcapture %}

它输出像 url_1、url_2 等字符串...但您的字段 ID 称为 url_one、url_two.

{
    "type": "url",
    "id": "url_one",
    "label": "Url"
},

更新架构字段以使代码正常工作。