在 Apostrophe CMS 中创建页面导航

Question

正在尝试为悬停主导航栏创建 'nephew' 页面 - 示例网站结构：

该网站有页面 A、B、C、D
A 部分下有 A1、A2、A3 页
B 部分下有 B1、B2、B3 页
我目前在页面 A

我试图创造的体验是这样的：

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

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

c) 当我将鼠标悬停在菜单 A 上时，会出现 'child' 页 A1、A2、A3 的列表（简单 - 我已经完成了）

我不能做的是：

d) 显示当前祖先之外的子页面 - 即当我将鼠标悬停在菜单 B 上时，'nephew' 页面列表 B1、B2、B3 出现在 B

下

我使用了各种撇号循环来完成 (b) 和 (c)：

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

但是我运行没有 'nephew' 页面的选项 - 本质上我想这样做：

给代码一个页面名称
让代码显示 data.page.title 的等价物，但针对特定页面，而不是当前页面（即我将页面 B 的名称传递给此代码，以生成 B1、2、3 ).

Answer 1

你看过这个指南了吗？它涵盖了基于页面树的导航的下拉菜单 http://apostrophecms.org/docs/tutorials/getting-started/building-navigation.html

Answer 2

如building navigation教程中所述，您可以配置 Apostrophe 以将每个祖先的 children 加载到任意深度。

由于主页有资格作为祖先，将其 children 加载到深度 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，也可以依次遍历每个 "tab" 页面的 ._children，从而获得您想要的 "nephews"。

如果您的嵌套也更深，这会起作用，因为我们将所有祖先的 children 加载到深度 2。继续寻找您希望的 ._children 属性去看看他们。

在 Apostrophe CMS 中创建页面导航

Create page navigation in Apostrophe CMS

apostrophe

nunjucks

apostrophe-cms