导航组件

最近更新： 2025年6月27日

创建对象：

  • 开发人员
  • 管理员
  • 用户

使用导航组件，用户可轻松地在全局化网站结构中导航。

小贴士
您是否考虑过使用适合 AEM 的 Edge Delivery Services？
您可以继续为现有项目使用本文档中描述的方法。但是对于新项目，Adobe 建议使用 Edge Delivery Services。

用途

导航组件列出页面树，这样网站的用户可以轻松地在网站结构中导航。

导航组件可以自动检测网站的全局化网站结构，并自动适应本地化的页面。此外，它可以使用影子重定向页面支持任意网站结构，以展示您的主内容结构之外的其他结构。

利用“编辑”对话框，内容作者可以定义导航根页面以及导航深度。利用“设计”对话框，模板作者可以定义导航根和深度的默认值。

版本和兼容性

导航组件的当前版本是 v2，此版本随 2022 年 2 月的核心组件发行版 2.18.0 的发布引入，具体说明见本文。

下表详细说明了该组件的所有受支持版本、与该组件的版本兼容的 AEM 版本以及指向早期版本文档的链接。

组件版本AEM 6.4AEM 6.5AEM 6.5 LTSAEM as a Cloud Service
v2-兼容兼容兼容
v1兼容兼容-兼容

有关核心组件版本的更多信息，请参阅文档核心组件版本。

本地化网站结构支持

网站通常以多种语言提供给不同区域。通常，每个本地化的页面将包含一个导航元素，该元素包括在页面模板中。使用导航组件，您可以在模板上为网站的所有页面放置一个导航元素，然后它可根据全局化的网站结构，自动适应单独的本地化页面。

示例

假设您的内容与以下内容类似：

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

对于网站 WKND，您可能希望将导航组件作为标头的一部分放置在页面模板上。将导航组件放到模板中之后，您可以将组件的​ 导航根 ​设置为 /content/wknd/language-masters/en，因为这是您网站的主内容的开始位置。您可能还希望将​ 导航结构深度 ​设置为 2，因为您可能不希望组件显示完整的内容树，而是只显示前两个级别，以将其用作概述。

使用​ 导航根 ​值，导航组件即可知道在 /content/wknd/language-masters/en 之后开始导航，并且可以向下递归网站的结构两级（如​ 导航结构深度 ​值所定义）来生成导航选项。

不论用户在查看什么本地化页面，导航组件都可以通过知道当前页面的位置，向后查找到根，然后前进到对应的页面，从而找到对应的本地化页面。

因此，如果访客查看 /content/ch/de/experience/arctic-surfing-in-lofoten，组件就会知道根据 /content/wknd/language-masters/de 生成导航结构。与此类似，如果访客查看 /content/us/en/experience/arctic-surfing-in-lofoten，组件就会知道根据 /content/wknd/language-masters/en 生成导航结构。

影子网站结构支持

有时候，需要为访客创建不同于实际网站结构的导航菜单。可能某个促销需要通过重新排列内容的列表，在菜单中突出显示特定内容。使用仅仅重定向到其他内容页面的影子页面，导航组件可以生成所需的任意导航结构。

为此，您需要：

  1. 创建影子页面作为表示所需网站结构的空页面。这通常称为影子网站结构。
  2. 在这些页面的页面属性中，将​ 重定向 ​值设置为指向实际内容页面。
  3. 在影子页面的页面属性中，设置​ 在导航中隐藏 ​选项。
  4. 将导航组件的​ 导航根 ​值设置为指向新影子网站结构的根。

然后导航组件将根据影子网站结构渲染菜单。组件渲染的链接指向影子页面重定向到的实际内容页面，而不是影子页面本身。此外，组件显示实际页面的名称并正确地突出显示活动页面，即使导航是基于影子页面。导航组件有效地使影子页面对访客完全透明。

注意
影子页面使得导航选项更灵活，但请注意，以后此结构的维护是完全手动的。如果您重新排列实际网站内容或者添加/删除内容，则必须根据需要手动更新影子结构。
注意
渲染影子网站结构时，导航逻辑只递归影子页面。该逻辑不会递归重定向目标的结构。

导航中的重定向

如果页面具有重定向目标（无论它指向的是外部 URL 还是另一个 AEM 页面），则包含指向该点的链接的导航组件将直接指向重定向目标的 URL。

示例

  • 创建重定向到页面 B 的页面 A。
  • 创建重定向到 https://aemcomponents.dev 的页面 C
  • 在页面 D 上，插入包含页面 A 和 C 的导航组件
  • 随后，生成的相应链接将直接指向页面 B 和 https://aemcomponents.dev

示例组件输出

要体验导航组件并查看其配置选项示例以及 HTML 和 JSON 输出，请访问组件库。

技术详细信息

在 GitHub 上可找到有关导航组件的最新技术文档。

在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。

注意
截至核心组件版本 2.1.0，导航组件支持 schema.org 微数据。

“编辑”对话框

在“编辑”对话框中，内容作者可以定义导航的根页面以及导航结构的深度。

“属性”选项卡

导航组件“编辑”对话框的“属性”选项卡

  • 导航根 - 用于生成导航树的根页面。

  • 排除根级别 - 通常根不应包含在导航中。使用此选项，您可以指定从根开始往上，需要排除多少个级别。例如：

    • 0 = 显示根级别
    • 1 = 排除根级别
    • 2 = 排除根以及往上的 1 级
    • 以此类推。

  • 收集所有子页面 - 收集导航根的所有子级页面。

  • 导航结构深度 - 定义在导航树中，组件应相对于导航根向下显示多少级（仅在未选中​ 收集所有子页面 ​时可用）。

  • 禁用影子 - 如果在层级中的页面是重定向的，则将显示重定向页面的名称而不是目标。有关更多信息，请参阅影子网站结构支持。

  • ID - 利用此选项，可以控制 HTML 和 Data Layer 中的组件的唯一标识符。

    • 如果留空，系统会自动为您生成一个唯一 ID，可以通过检查结果页面找到该 ID。
    • 如果指定一个 ID，作者有责任确保它是唯一的。
    • 更改此 ID 会对 CSS、JS 和 Data Layer 跟踪产生影响。