如何循环遍历Shopify sections动态生成首页导航？

该需求可直接实现，无需手动在后台创建导航项，核心逻辑是读取首页模板的已启用Section配置自动生成导航，同时适配单页锚点跳转、非首页跳回首页对应区块的场景。 #

实现步骤 #

1. 给所有首页区块配置唯一锚点ID #

• 进入主题代码编辑器，打开sections/目录下所有用于首页搭建的区块文件
• 在每个区块的最外层<section>标签上添加唯一ID属性，确保锚点可定位：

<section id="section-{{ section.id }}" class="section-{{ section.type }}">
  <!-- 原有区块代码完全保留，无需修改 -->
</section>

*Dawn自带的公告栏、页脚这类不需要出现在导航里的区块可以跳过这步，后续做过滤即可。

2. 替换原有静态导航渲染逻辑 #

• 打开导航所在的sections/header.liquid文件，定位到原有循环输出后台配置导航的代码块（通常为{% for link in section.settings.main_nav.links %}包裹的菜单渲染部分）
• 将原有读取后台导航的逻辑替换为动态读取首页Section的逻辑，同时兼容首页、产品详情页等不同页面的跳转规则：

<nav class="header__inline-menu">
  {% assign home_page_sections = pages.frontpage.sections %}
  <ul class="list-menu">
    {% for sec in home_page_sections %}
      {% comment %} 过滤不需要显示在导航里的区块类型 {% endcomment %}
      {% if sec.type != 'announcement-bar' and sec.type != 'footer' and sec.settings.hide_from_nav != true %}
      <li class="list-menu__item">
        {% if request.page_type == 'index' %}
        <a href="#section-{{ sec.id }}" class="header__menu-item">
          {{ sec.settings.menu_label | default: sec.settings.title | default: sec.type }}
        </a>
        {% else %}
        <a href="/#section-{{ sec.id }}" class="header__menu-item">
          {{ sec.settings.menu_label | default: sec.settings.title | default: sec.type }}
        </a>
        {% endif %}
      </li>
      {% endif %}
    {% endfor %}
    {% comment %} 可在此处追加固定导航项，比如独立产品页、集合页链接 {% endcomment %}
    <li class="list-menu__item">
      <a href="/collections/all" class="header__menu-item">全部产品</a>
    </li>
  </ul>
</nav>

3. 给区块添加导航自定义配置项 #

为了方便后续调整导航显示文字、隐藏不需要出现在导航的区块，给每个首页区块的Schema配置添加对应设置项：

• 打开对应区块文件，找到文件末尾的{% schema %}配置块，在settings数组中追加两个配置：

{
  "type": "text",
  "id": "menu_label",
  "label": "导航显示名称",
  "default": "区块名称"
},
{
  "type": "checkbox",
  "id": "hide_from_nav",
  "label": "隐藏该区块在导航中的入口",
  "default": false
}

配置完成后，在可视化编辑器中点击任意区块，就能在右侧配置栏看到导航相关的设置项，直接修改即可实时生效。

4. 添加平滑滚动适配 #

打开全局样式文件assets/base.css，追加全局滚动规则，避免锚点跳转时区块被固定头部遮挡：

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* 数值替换为站点头部导航的实际高度 */
}

排查提示：如果导航加载不出区块列表，先确认站点首页使用的是默认句柄为frontpage的index.json模板，未自定义修改首页模板句柄，否则无法正确读取首页区块配置。多语言站点只需在对应语言的区块配置中填写对应语言的导航名称，无需额外调整代码逻辑。

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