導覽元件 navigation-component

導覽元件可讓使用者輕鬆導覽全域化網站結構。

用途 usage

導覽元件會列出頁面的樹狀結構，讓網站的使用者可以輕鬆導覽網站結構。

導覽元件可以自動偵測您網站的全域化網站結構，並自動調整至本地化的頁面。此外，它可以使用影子重新導向頁面支援任意網站結構，以代表您主要內容結構以外的其他結構。

透過編輯對話框，內容作者可定義導覽根頁面以及導覽深度。透過設計對話框，範本作者可定義導覽根目錄和深度的預設值。

版本和相容性 version-and-compatibility

導覽元件的目前版本為 v2，此版本於 2022 年 2 月隨著核心元件 2.18.0 版發行導入，詳情請參閱本文件。

下表詳細說明該元件的所有支援版本、與元件版本相容的 AEM 版本，以及舊版文件的連結。

如需核心元件版本和發行版本的進一步詳細資訊，請參閱核心元件版本文件。

本地化網站結構支援 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 協助工具標籤值。

樣式索引標籤 styles-tab-edit

導覽元件支援 AEM 樣式系統。

使用下拉式清單，選取想要套用至元件的樣式。在編輯對話框中所做的選取，與從元件工具列中選擇具有相同效果。

元件樣式必須在設計對話框中設定，才能使用該下拉式選單。

設計對話框 design-dialog

透過設計對話框，範本作者可設定對內容作者呈現的導覽根頁面和導覽深度的預設值。

屬性索引標籤 properties-tab-design

樣式索引標籤 styles-tab

導覽元件支援 AEM 樣式系統。

Adobe Client Data Layer data-layer

「導覽元件」支援 Adobe Client Data Layer。