語言導覽元件 | Adobe Experience Manager

文件 AEM 核心元件指南

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
核心組件

建立對象：

開發人員
管理員
使用者

語言導覽元件提供網站的語言和國家/地區導覽，讓訪客可在不同地區設定下導覽至相同頁面。

TIP

您是否考慮過適用於 AEM 的 Edge Delivery Services？

現有的專案可以繼續使用本文件中所述的方法。然而，針對新專案，Adobe 建議採用 Edge Delivery Services。

用途 usage

網站通常以多種語言提供給不同地區。語言導覽元件可讓訪客以不同語言/地區設定檢視相同頁面。因此，若您是網站瑞士德文版的讀者，可以輕鬆切換至相同頁面的美式英文版。語言導覽元件負責解析網站語言結構，並自動找到對應的頁面。

如需語言導覽元件本地化功能的運作方式範例，請參閱下方章節。
如需其他核心元件的本地化功能如何搭配運作的範例，請參閱核心元件頁面的本地化功能。

編輯對話框可定義全域網站導覽根目錄，以及導覽應該深入結構的程度。範本作者可以使用設計對話框設定相同選項的預設值。

版本和相容性 version-and-compatibility

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

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

元件版本

AEM 6.4

AEM 6.5

AEM 6.5 LTS

AEM as a Cloud Service

相容

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

範例元件輸出 sample-component-output

若要體驗「語言導覽元件」，並檢視其設定選項及 HTML 和 JSON 輸出的範例，請造訪「元件庫」。

技術詳細資訊 technical-details

在 GitHub 上可找到有關語言導覽元件的最新技術文件。

如需開發「核心元件」的進一步詳細資訊，請參閱核心元件開發人員文件。

設計對話框 design-dialog

設計對話框可定義全域網站導覽根目錄，以及導覽應該深入結構的程度。

這些設定通常只需在頁面範本層級完成。不過，可透過編輯對話框在頁面層級上進行變更。

屬性索引標籤 properties-tab

語言導覽元件的設計對話框

導覽根目錄
- 這是網站語言導覽的開始位置。
- 網站的語言結構會從此根目錄下的下一個層級開始。
語言結構深度
- 導覽根目錄 下的內容樹狀結構層級數目代表網站的語言結構。範例：
  - 1 通常表示您只能選擇語言。
  - 2 通常表示您可以選擇語言和國家/地區。
  - 3 通常表示您可以選擇語言、國家/地區和區域。

範例 example

假設您的內容看起來像這樣：

/content
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   \-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

對於網站 WKND，您可能想要將語言導覽元件放置在頁面範本上作為頁首的一部分。一旦成為範本的一部分，您可以將元件的 導覽根目錄 設定為 /content/wknd，因為這是您網站的本地化內容開始的位置。您也需要將 語言結構深度 設定為 2 ，因為您的結構有兩個層級 (國家/地區然後語言)。

透過 導覽根目錄 值，語言元件會知道在 /content/wknd 之後為導覽開始位置，而且它可以將內容樹狀結構中的下兩個層級辨識為網站的語言導覽結構 (如 語言結構深度 值所定義)，以產生語言導覽選項。

無論使用者正在檢視哪個頁面，語言導覽元件都可藉由掌握目前頁面的位置，先回溯至根目錄，然後前進至對應頁面，以找出該對應頁面的其他語言版本。