液体逻辑 if/else答案

【问题标题】：Liquid logic if/else液体逻辑 if/else
【发布时间】：2018-12-07 17:17:07
【问题描述】：

如何从液体逻辑标签中移除管道 (|)？我有一个包含液体逻辑的 div，它最多可以提取 3 个电话号码，然后在每个电话号码的末尾加上 | 来分隔它们。如果用户只有一个电话号码，他们希望删除管道 (|) 或 "&nbsp;| &nbsp;" 标签。

<div class="phones">

      <p>{% if user.settings.phone_office %}<span 
          class="red">O</span>&nbsp;   <br />  
          {{user.settings.phone_office}}&nbsp;| &nbsp;
         {% endif %}

         {% if user.settings.phone_cell %}<span
         class="red"> C</span>&nbsp; 
         {{user.settings.phone_cell}}&nbsp;| &nbsp;
         {% endif %}

         {% if user.settings.phone_fax %}<span 
         class="red">F</span>&nbsp;{{user.settings.phone_fax}}
         {% endif %}</p>
 </div>

【问题讨论】：

你能详细说明一下吗。输入代码，预期输出，...
我们正在提取用户的电话信息。我们使用的逻辑最多可以提取 3 个电话号码。如果用户有 3 个电话号码，则预期输出为：555-555-5555 | 555-555-5555| 555-555-5555。如果用户只有 1 个号码，它将只提取一个电话号码，预期输出将是：555-555-5555
这个想法是使用代码/文本输入/输出示例来编辑您的问题。只是因为我不明白你所说的“来自液体逻辑标签的管道（I）”以及它来自哪里。

标签： css if-statement logic shopify liquid

【解决方案1】：

不要将"&nbsp;| &nbsp;" 放在每个项目的末尾，而是将其放在开头。仅当有新数字时才会呈现分隔符。下面是一个例子：

<div class="phones">
    <p>
        {% if user.settings.phone_office %}
            <span class="red">O</span>&nbsp;  
            {{user.settings.phone_office}}
        {% endif %}

        {% if user.settings.phone_cell %}
            &nbsp;| &nbsp<span class="red"> C</span>&nbsp; 
            {{user.settings.phone_cell}}
        {% endif %}

        {% if user.settings.phone_fax %}
            &nbsp;| &nbsp<span class="red"> F</span>&nbsp; 
            {{user.settings.phone_fax}}
        {% endif %}
    </p>
</div>

【讨论】：