如何使用液体模板语言在循环中添加锚标记？答案

【问题标题】：How do I add an anchor tag in a loop using the liquid templating language?如何使用液体模板语言在循环中添加锚标记？
【发布时间】：2019-03-20 12:14:57
【问题描述】：

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

此循环当前呈现图像、标题和文本字符串。但是，当我尝试在 HTML 块周围添加一个带有动态 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 %}

支持的schema以块为单位，如下；

// 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"
        }
    ]
},

【问题讨论】：

标签： javascript shopify liquid

【解决方案1】：

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

它输出一个字符串，如url_1、url_2 等...但您的字段 id 称为url_one、url_two。

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

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

【讨论】：