导航组件(v1) navigation-component

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

用途 usage

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

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

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

版本和兼容性 version-and-compatibility

本文档介绍了导航组件 v1，此版本随 2018 年 1 月的核心组件发行版本 2.0.0 的发布引入。

本地化网站结构支持 localized-site-structure

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

示例 example-localization

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

/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 生成导航结构。

影子网站结构支持 shadow-structure

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

为此，您需要：

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

导航中的重定向 redirects

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

示例 redirect-example

示例组件输出 sample-component-output

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

技术详细信息 technical-details

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

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

“编辑”对话框 edit-dialog

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

“属性”选项卡 properties-tab

“辅助功能”选项卡 accessibility-tab

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

“设计”对话框 design-dialog

模板作者可以使用“设计”对话框设置向内容作者显示的导航根页面和导航深度的默认值。

“属性”选项卡 properties-tab-design

“样式”选项卡 styles-tab

导航组件支持 AEM 样式系统。

Adobe Client Data Layer data-layer

导航组件支持 Adobe Client Data Layer。