階層連結元件(v1)

核心元件階層連結元件是導覽元件,可根據頁面在內容階層中的位置建立連結的階層連結。

使用狀況

「階層連結元件」會顯示目前頁面在網站階層中的位置,讓頁面訪客從目前位置導覽頁面階層。 這通常整合在頁首或頁尾中。

可用選項,例如預設導覽層級,以及範本作者在設計對話方塊中可定義的顯示目前頁面或隱藏頁面的能力。 然後,內容編輯器可以在編輯對話框中選擇是否顯示隱藏頁面以及元件的實際導航級別。

版本和相容性

本檔案說明Breadcrumb元件的v1,此元件最初是隨6.3版核心元件的1.0.0版一起AEM推出。

下表列出Breadcrumb元件的v1相容性。

版AEM本 階層連結元件v1
6.3 相容
6.4 相容
注意

本檔案說明Breadcrumb元件的v1。
如需Breadcrumb元件目前版本的詳細資訊,請參閱Breadcrumb元件檔案。

元件輸出示例

以下範例取自We.Retail

螢幕擷圖

HTML

<div class="cmp cmp-breadcrumb aem-GridColumn aem-GridColumn--default--12">

<ol class="breadcrumb">
    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us.html?lang=zh-Hant">
            United States
        </a>
    </li>

    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us/en.html?lang=zh-Hant">
            English
        </a>
    </li>

    <li class="breadcrumb-item active">
        
            Experience
        
    </li>
</ol>
 
</div>

JSON

"breadcrumb": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/breadcrumb"
            }
注意

從核心元件匯出JSON需要1.1.0版的核心元件。 如需詳細資訊,請參閱核心元件v1](/docs/experience-manager-core-components/versions.html?lang=zh-Hant)的[相容性資訊。

編輯對話框

編輯對話方塊可讓內容作者隱藏階層路徑標示中隱藏和作用中的頁面,以及應顯示的階層深度。

  • Navigation-Level to start -階層中,階層中的階層階層中,階層連結元件應開始向下移至目前頁面的位置。例如,在We.Retail中:

    • 1開頭為/content/we-retail
    • 2開頭為/content/we-retail/<country>
  • 顯示隱藏 -顯示標示為隱藏在階層連結中的頁面(依預設不會顯示)

  • 隱藏目前-隱藏階層連結中的目前頁面(依預設會顯示)

設計對話框

設計對話方塊可讓範本作者定義選項的預設值,以隱藏階層路徑標示中隱藏和作用中的頁面,以及應顯示的階層深度。

  • Navigation-Level to start -定義階層中階層中階層階層中階層導覽路徑標示元件新增至頁面時,該階層中該元件應開始向下移至目前頁面的預設值。

  • 顯示隱藏 -定義將Breadcrumb元件新 至頁面時Show Hiddenoption的預設值。

    • 它不會為作者啟用或停用選項。 它只設定預設值。
  • Hide Current —— 定義將階層連結元件新 增至 頁面時,Hide Currentoption的預設值。

    • 它不會為作者啟用或停用選項。 它只設定預設值。

技術詳細資訊

有關Breadcrumb Component 的最新技術文檔可在GitHub上找到。

您可從GitHub下載整個核心元件專案。

有關開發核心元件的詳細資訊,請參閱核心元件開發人員檔案

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now