階層連結元件 breadcrumb-component
核心元件階層連結元件是一種導覽元件,可根據頁面在內容階層中的位置建立連結的階層連結。
用途 usage
階層連結元件會顯示目前頁面在網站階層中的位置,讓頁面訪客可以從其目前位置導覽頁面階層。這通常會整合到頁首或頁尾中。
可用選項 (例如:預設導覽層級、以及顯示目前頁面或隱藏頁面的功能) 可由範本作者在設計對話框中定義。內容編輯者就可以在編輯對話框中選擇是否應該顯示隱藏的頁面,以及元件的實際導覽層級。
版本和相容性 version-and-compatibility
階層連結元件的目前版本為 v3,此版本於 2022 年 2 月隨著核心元件 2.18.0 版發行導入,詳情請參閱本文件。
下表詳細說明該元件的所有支援版本、與元件版本相容的 AEM 版本,以及舊版文件的連結。
如需核心元件版本和發行版本的進一步詳細資訊,請參閱核心元件版本文件。
範例元件輸出 sample-component-output
若要體驗「階層連結元件」,並檢視其設定選項及 HTML 和 JSON 輸出的範例,請造訪「元件庫」。
技術詳細資訊 technical-details
在 GitHub 上可找到有關階層連結元件的最新技術文件。
如需開發「核心元件」的進一步詳細資訊,請參閱核心元件開發人員文件。
編輯對話框 edit-dialog
編輯對話框可讓內容作者在階層連結中隱藏已隱藏和作用中的頁面,以及應顯示的階層深度。
屬性索引標籤 properties-tab
-
導覽開始層級 - 階層連結元件在階層中開始向下導覽至目前頁面的起始位置。例如:
- 0 從
/content
開始 - 1 從
/content/<yourSite>
開始 - 2 從
/content/<yourSite>/<country>
開始
- 0 從
-
顯示隱藏的導覽項目 - 在階層連結中顯示標記為隱藏的頁面 (預設不會顯示這些頁面)
-
隱藏目前頁面 - 在階層連結中隱藏目前頁面 (預設會顯示)
-
停用影子 - 如果階層中的頁面是重新導向,將顯示重新導向頁面的名稱而非目標。如需詳細資訊,請參閱導覽元件的影子網站結構支援。
-
ID - 此選項可讓您控制 HTML 和資料層中元件的唯一識別碼。
- 如果留空,則會自動產生唯一識別碼,您可以透過檢查得出的頁面找到該 ID。
- 若已指定 ID,則作者應確保其為唯一識別碼。
- 變更該 ID 會對 CSS、JS 和「資料層」追蹤造成影響。
樣式索引標籤 styles-tab-edit
階層連結元件支援 AEM 樣式系統。
使用下拉式清單,選取想要套用至元件的樣式。在編輯對話框中所做的選取,與從元件工具列中選擇具有相同效果。
元件樣式必須在設計對話框中設定,才能使用該下拉式清單。
設計對話框 design-dialog
透過設計對話框,範本作者可定義是否要隱藏階層連結中已隱藏和作用中頁面的選項預設值,以及應顯示的階層深度。
主要索引標籤 main-tab
-
導覽開始層級 - 當階層連結元件新增至頁面時,此項目用於定義階層連結元件在階層中開始向下導覽至目前頁面的起始位置預設值。
-
顯示已隱藏的導覽項目 - 當階層連結元件新增至頁面時,定義 顯示已隱藏的導覽項目 選項的預設值。
- 它不會為作者啟用或停用選項。它只會設定預設值。
-
隱藏目前頁面 - 當階層連結元件新增至頁面時,定義 隱藏目前頁面 選項的預設值。
- 它不會為作者啟用或停用選項。它只會設定預設值。
-
停用影子 - 當階層連結元件新增至頁面時,定義 停用影子 選項的預設值。
樣式索引標籤 styles-tab
階層連結元件支援 AEM 樣式系統。
Adobe Client Data Layer data-layer
「階層連結元件」支援 Adobe Client Data Layer。