导航组件

导航组件允许用户轻松导航全球化的站点结构。

使用

导航组件会列出一个页面树,以便网站的用户能够轻松导航网站结构。

导航组件可自动检测网站的全球化网站结构,并自动适应本地化页面。 此外,它还可以通过使用阴影重定向页面来表示除 主内容结 构之外的其他结构,从而支持任何任意站点结构。

编辑对话框允许内容作者定义导航根页面以及导航深度。 设计对话框允许模板作者为导航根和深度定义默认值。

本地化的站点结构支持

网站通常针对不同区域以多种语言提供。 通常,每个本地化页面都将包含一个导航元素,该元素将作为页面模板的一部分包含在内。 导航组件允许您将其置于网站所有页面的模板上一次,然后它会根据您的全球化网站结构,自动针对各个本地化页面进行调整。

  • 有关导航组件的本地化功能如何工作的示例,请参阅下面的部分
  • 有关核心组件的本地化功能如何协同工作的示例,请参阅核心组件页面🔗的本地化功能。

示例

假设您的内容如下所示:

/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. 在这些页面上的页面属性中设置​Redirect​值,以指向实际的内容页面。
  3. 在卷影页面的页面属性中设置​在导航中隐藏​选项。
  4. 将导航组件的​导航根​值设置为指向新阴影站点结构的根。

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

注意

阴影页使您的导航选项更加灵活,但请记住,此结构的维护随后将完全手动进行。 如果重新排列实际的网站内容或添加/删除内容,则需要根据需要手动更新卷影结构。

注意

渲染阴影站点结构时,导航逻辑仅会递归阴影页面。 该逻辑不会递归重定向目标的结构。

版本和兼容性

导航组件的当前版本为v1,该版本于2018年1月随核心组件2.0.0版引入,在本文档中进行了描述。

下表详细列出了组件的所有受支持版本、组件版本与之兼容的AEM版本,以及指向以前版本文档的链接。

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

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

组件输出示例

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

技术详细信息

有关导航组件的最新技术文档,请参阅GitHub

有关开发核心组件的更多详细信息,请参阅核心组件开发人员文档

注意

自2.1.0版核心组件起,导航组件支持schema.org微数据

编辑对话框

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

“属性”选项卡

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

  • 导航根 — 将用于生成导航树的根页面。
  • 排除根级别 — 通常,导航中不应包含根级别。此选项允许您指定要从根中排除的级别数。 例如:
    • 0 =显示根级别
    • 1 =排除根级别
    • 2 =排除根级别和上一级级别的1个
    • 以此类推。
  • 收集所有子页面 — 收集导航根目录子项的所有页面。
  • 导航结构深度 — 定义组件应在导航树中相对于导航根显示多少个级别(仅当“收集所有子 页面” 未选中时可用)。
  • 禁用跟踪 — 如果层级中的页面是重定向,则将显示重定向页面的名称,而不是目标页面。有关详细信息,请参阅卷影站点结构支持
  • ID — 利用此选项,可控制HTML和数据层中组件的唯一标识符 的唯一标识符
    • 如果留为空白,则会自动为您生成唯一ID,并且可以通过检查生成的页面找到该ID。
    • 如果指定了ID,则作者有责任确保该ID是唯一的。
    • 更改ID可能会影响CSS、JS和数据层跟踪。

“辅助功能”选项卡

导航组件的编辑对话框辅助功能选项卡

在​辅助功能​选项卡上,可以为组件的ARIA辅助功能标签设置值。

  • 标签 — 组件的ARIA标签属性的值

“设计”对话框

设计对话框允许模板作者为向内容作者显示的导航根页面和导航深度设置默认值。

“属性”选项卡

导航组件的设计对话框

  • 导航根 — 导航结构的根页面的默认值,该值将用于生成导航树,并在内容作者将组件添加到页面时默认使用。
  • 排除根级别 — 通常,导航中不应包含根级别。利用此选项,可指定要从根中排除的级别数的默认值。 例如:
    • 0 =显示根级别
    • 1 =排除根级别
    • 2 =排除根级别和上一级级别的1个
    • 以此类推。
  • 收集所有子页面 — 用于收集导航根目录子项的所有页面的选项的默认值。
  • 导航结构深度 — 导航结构深度的默认值。
  • 禁用跟踪 — 添加导航组件时,如果应禁用跟踪,则的默认值为

“样式”选项卡

导航组件支持AEM 样式系统

Adobe客户端数据层

导航组件支持Adobe客户端数据层。

在此页面上