如何在Shopify Liquid中针对特定模板条件性覆盖导航菜单？

方案一：用contractor-menu替代主菜单 #

你之前的代码存在两处问题：带连字符的菜单句柄不能用.直接调用，需改用linklists['菜单句柄']的形式；另外模板判断要和实际模板名page.contractors.liquid对应，写成template == 'page.contractors'。修正后的代码如下：

{%- liquid
  assign render_menu = false

  if section.settings.main_menu != blank
    {% comment %} 判断当前页面是否使用page.contractors模板 {% endcomment %}
    if template == 'page.contractors'
      {% comment %} 调用句柄为contractor-menu的菜单 {% endcomment %}
      assign menu = linklists['contractor-menu']
    else
      {% comment %} 默认使用后台设置的主菜单 {% endcomment %}
      assign menu = linklists[section.settings.main_menu]
    endif

    {% comment %} 菜单有链接时才允许渲染 {% endcomment %}
    if menu.links.size != 0
      assign render_menu = true
    endif
  endif
-%}

保持原主题中渲染menu的逻辑不变即可，当访问page.contractors模板页面时，会自动替换成contractor-menu。

方案二：在页头下方额外显示contractor-menu #

如果不想替换主菜单，而是在页头之后额外添加这个菜单，可以在页头section的末尾（或模板中页头对应的位置）添加以下代码：

{%- if template == 'page.contractors' -%}
  {% assign contractor_menu = linklists['contractor-menu'] %}
  {% if contractor_menu.links.size > 0 %}
    <div class="contractor-menu-container">
      <ul class="contractor-menu">
        {% for link in contractor_menu.links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{%- endif -%}

这段代码仅会在page.contractors模板页面显示contractor-menu，你可以根据主题的样式规范给容器和菜单添加对应的CSS类，让它和页面风格统一。

内容的提问来源于stack exchange，提问作者Wheatley20