在Apostrophe CMS中创建页面导航

Question

尝试为悬停的主导航栏创建“侄子”页面-示例网站结构：

• 该网站有A，B，C，D页
• 在A节下有A1，A2，A3页
• 在B部分下有B1，B2，B3页
• 我目前在A页上

我尝试创建的体验是这样的：

a）我有一个顶部导航，显示A，B，C（简单-我已经做到了）

b）我当前的页面A被突出显示（很简单-我已经做到了）

c）当我将鼠标悬停在菜单A上时，出现“子”页面A1，A2，A3的列表（很简单-我已经这样做了）

我不能做的是这样的：

d）在当前祖先之外显示子页面-即，当我将鼠标悬停在菜单B上时，“侄子”页面B1，B2，B3的列表出现在B下

我使用了各种撇号循环来执行（b）和（c）：

{% for ancestor in data.page._ancestors %}

但是我已经没有'侄子'页面的选项了-本质上我想这样做：

• 给代码一个页面名称
• 让代码显示与data.page.title等效的代码，但显示特定页面的代码，而不显示当前页面的代码（即，我将页面B的名称传递给此代码，以生成B1、2、3）。

Answer 1

您是否已阅读本指南？ 它涵盖了基于页面树导航的下拉列表http://apostrophecms.org/docs/tutorials/getting-started/building-navigation.html

Answer 2

如建筑物导航教程中所述，您可以配置Apostrophe以将每个祖先的子级加载到任意深度。

由于主页符合祖先的资格，因此将其子级加载到2深度即可满足您的需求：

modules: {

  // ... other configuration ...

  'apostrophe-pages': {
    filters: {
      // Grab our ancestor pages, with two levels of subpages
      ancestors: {
        children: {
          depth: 2
        }
      },
      // We might want grandchildren of the current page, too
      children: {
        depth: 2
      }
    }
    // other apostrophe-pages options like `types` ...
  },

  // ... other configuration ...
}

现在，您可以data.home._children遍历data.home._children和每个“选项卡”页面的._children ，从而为您提供所需的“侄子”。

如果您也更深入地嵌套，则此方法有效，因为我们正在将所有祖先的子级加载到2的深度。只需继续寻找希望看到它们的._children属性即可。