导航

商家可以为店铺导航创建 菜单，这些菜单可以嵌套以 创建下拉菜单

本教程将介绍如何在 theme 中添加导航功能。

资源

• linklists object
• linklist object
• link object

实现导航

要在 theme 中添加导航，您应引用 linklist object。每个 linklist object 代表在 Shoplazza 管理后台 在线商店 > 导航 部分中定义的一个菜单。

您可以使用全局 linklists object 通过 ID 访问店铺中所有的 linklist objects。Shoplazza 管理后台中的默认菜单是主菜单，可以通过其 id header 访问。

例如：

{% for link in linklists['header'].links %}
  <!-- 菜单内容 -->
{% endfor %}

您可以使用 link_list setting 让商家选择自己的菜单，并使用 setting 的 id 引用该菜单。

{% for link in linklists[section.settings.menu.id].links %}
  <!-- 菜单内容 -->
{% endfor %}

对于每个菜单链接，您应输出标题和 URL 等信息，同时也可能需要输出链接的子链接。链接最多可嵌套三层，您可以通过 link object 的 links 属性访问子链接。

例如，如果您已创建一个名为 menu 的 link_list 类型 setting，让商家选择要在 header section 中使用的菜单，以下代码展示了如何输出菜单内容。

📘 注意

以下示例仅用于说明如何遍历 linklist 并输出多层级链接，并非完整的导航功能实现。

<ul>
  {% for link in linklists[section.settings.menu.id].links %}
    <li>
      <a href="{{ link.url }}">{{ link.title | escape }}</a>

      {% assign child_links = linklists[link.id].links %}
      {% if child_links %}
        <ul>
          {% for child_link in child_links %}
            <li>
              <a href="{{ child_link.url }}">{{ child_link.title | escape }}</a>

              {% assign grandchild_links = linklists[child_link.id].links %}
              {% if grandchild_links %}
                <ul>
                  {% for grandchild_link in grandchild_links %}
                    <li>
                      <a href="{{ grandchild_link.url }}">{{ grandchild_link.title | escape }}</a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

根据您构建的导航类型，应将导航代码放在 header 或 footer sections 中。