導航元件允許用戶輕鬆導航全球化的站點結構。
導航元件列出一個頁面樹,以便站點的用戶能夠輕鬆地導航站點結構。
導航元件可自動檢測站點的全球化站點結構, 自動適應本地化頁面。 另外,通過使用 卷影重定向頁 表示除主內容結構之外的其他結構。
的 編輯對話框 允許內容作者定義導航根頁面以及導航深度。 的 設計對話框 允許模板作者為導航根和深度定義預設值。
本文檔介紹導航元件的v1,該版本於2018年1月隨核心元件2.0.0版而推出。
本文檔介紹導航元件的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
。
有時,需要為訪問者建立與實際站點結構不同的導航菜單。 或許,通過重新安排內容清單,促銷應突出菜單中的某些內容。 使用僅重定向到其他內容頁的陰影頁,導航元件可以生成任何必要的任意導航結構。
為此,您需要:
然後,導航元件將基於陰影站點結構呈現菜單。 元件呈現的連結指向陰影頁重定向到的實際內容頁,而不是陰影頁本身。 此外,元件還顯示實際頁的名稱,並正確加亮活動頁,即使導航基於陰影頁也是如此。 導航元件有效地使陰影頁面對訪問者完全透明。
陰影頁使您的導航選項更加靈活,但請記住,此結構的維護將完全手動進行。 如果您重新排列實際的站點內容或添加/刪除內容,則需要根據需要手動更新卷影結構。
在渲染陰影站點結構時,導航邏輯僅遞歸陰影頁。 該邏輯不遞歸重定向目標的結構。
當頁面具有重定向目標(無論它指向外部URL還是指向另一頁AEM)時,導航元件將包含指向該指向重定向目標的URL的連結。
https://aemcomponents.dev
https://aemcomponents.dev
要體驗導航元件,並查看其配置選項示例以及HTML和JSON輸出,請訪問 元件庫。
有關導航元件的最新技術文檔 可在GitHub上找到。
有關開發核心元件的詳細資訊,請參閱 核心元件開發人員文檔。
自2.1.0版核心元件起,導航元件支援 schema.org微資料。
在「編輯」對話框中,內容作者可以定義導航的根頁面和導航結構的深度。
在 輔助功能 頁籤,可為 ARIA輔助功能 元件的標籤。
設計對話框允許模板作者設定向內容作者顯示的導航根頁面和導航深度的預設值。
導航元件支AEM持 樣式系統。
導航元件支援 Adobe客戶端資料層。