在 header 中将 Bigcommerce Stencil 类别菜单更改为页面菜单

Question

我刚开始使用 Bigcommerce 模板，我需要将页面菜单显示为 header emnu 而不是类别菜单，我已经设法将顶层更改为页面而不是类别, 但子菜单项仍显示为类别，我该怎么做？

要更改顶级菜单，我只更改了这个 -

<ul class="navPages-list">
   {{#each categories}}
     <li class="navPages-item">
        {{> components/common/navigation-list}}
     </li>
   {{/each}}
 </ul>

为此 -

<ul class="navPages-list">
       {{#each pages}}
         <li class="navPages-item">
            {{> components/common/navigation-list}}
         </li>
       {{/each}}
     </ul>

在navigation-menu.html文件中。然后它为 sub-categories 调用 navigation-list.html，但是如果我从类别到页面更改其中的任何内容，它就不起作用，其他人有这个问题吗？

如有任何帮助，我们将不胜感激，

谢谢！

Answer 1

在您的导航-menu.html 文件中，如果您只打算显示页面，则无需在每个页面内循环导航列表文件。

您可以将底部代码示例更改为此，它会显示每个页面名称以及页面的正确 link 地址。

<ul class="navPages-list">
   {{#each pages}}
      <li class="navPages-item">
         <a href="{{url}}">{{name}}</a>
      </li>
   {{/each}}
</ul>

当您在 {{#each}} handelbar 助手内部时，它会循环每个页面的数据，并显示结果。为了更好地了解并可视化其工作原理，您可以在本地主机地址的末尾附加 ?debug=bar 并向下滚动到页面底部以检查 JSON 形式的可用数据。在 JSON 中搜索值 "pages"，您会看到每个页面都有一个名称，并且 url.

在 header 中将 Bigcommerce Stencil 类别菜单更改为页面菜单

Changing Bigcommerce Stencil category menu to pages menu in header

bigcommerce