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

如building navigation教程中所述，您可以配置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和每个“标签”页面的._children，为您提供所需的“侄子”。

如果您的嵌套更深入，这也有效，因为我们将所有祖先的子项加载到2的深度。只需继续查找您希望看到它们的._children属性。

在Apostrophe CMS中创建页面导航

2 个答案: