列出元件

「核心元件清單元件」可讓您輕鬆建立動態和靜態清單。

使用狀況

「清單元件」可用來建立例如子頁面的動態清單或任意定義項目的靜態清單。 設計對話框中的模板作者可以定義可用清單類型和格式選項。 內容編輯器可從可用的清單類型中選擇,以及如何在edit對話框中格式化清單元素。

版本和相容性

目前的清單元件版本為v2,此版本於2018年1月隨核心元件2.0.0版推出,並在本檔案中加以說明。

下表詳細說明所有支援的元件版本、元AEM件版本相容的版本,以及舊版檔案的連結。

元件版本 AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 相容 相容 相容
v1 相容 相容 -

有關核心元件版本和版本的詳細資訊,請參閱文檔核心元件版本

元件輸出示例

若要體驗「清單元件」,並檢視其設定選項的範例以及HTML和JSON輸出,請造訪元件庫

技術詳細資訊

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

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

編輯對話框

編輯對話框允許內容作者配置清單和清單項。

清單設定頁籤

清單可以以不同的方式建立。

無論清單的建立方式為何,都有排序和ID選項可隨時設定。

列出元件的編輯對話框

視內容作者選擇如何建立清單而定,其他設定選項將會變更。

子頁面

清單可由目前頁面或其他頁面的子頁面建立。

子頁面選項

  • 父頁面

    • 其子頁面應該列出的頁面
    • 保留空白以使用目前頁面
  • 子級深
    度階層中應使用多少層級

修正清單

清單可使用固定的項目清單來建立。

修正清單選項

點選或按一下「新增​」按鈕,將新項目插入清單。

  • 在清單中輸入項的文本,或使用​選擇對話框​從中選擇項AEM。
  • 使用拖動控制滑塊重新排列清單中的項目。
  • 使用垃圾桶圖示來刪除清單中的項目。

搜尋

您可使用內容搜尋結果來建立清AEM單。

搜尋清單選項


  • 尋查詢要執行全文搜尋以產生清單元素的字串

  • 尋應在何處執行搜尋
    • 使用​選擇對話框​選擇位AEM置
    • 如果保留空白,請使用目前頁面

標記

清單可使用與特定位置下的特定標籤相符的頁面來建立。

標籤清單選項

  • 上層頁
    面標籤符合的起始位置
    • 使用​選擇對話框​選擇位AEM置
    • 如果保留空白,請使用目前頁面

  • 記哪些標籤應符合
    • 使用​Browse​對話方塊來選取標籤

  • 對定義哪些比對類型可限定要包含在清單中的頁面
    • 任何標記
    • 所有標記

排序選項

無論您選擇如何建立清單,都有某些排序選項可隨時定義。

排序選項


  • 據如何排序元素
    • 標題
    • 上次修改日期
  • 排序
    順序項目排序順序
    • 升序
    • 降序
  • 最大
    項目清單中顯示的項目數上限。
    • 留空以傳回所有項目。
  • ID —— 此選項可控制HTML和資料層中元件的唯一 識別碼
    • 如果保留空白,則會自動為您產生唯一ID,並透過檢查產生的頁面找到。
    • 如果指定ID,則作者有責任確保其唯一性。
    • 變更ID可能會影響CSS、JS和資料圖層追蹤。

項目設定頁籤

使用「項目設定」標籤,可以設定清單元素的格式。

項目設定

  • 連結
    項目連結項目至對應頁面
  • 顯示
    說明顯示連結項目的說明
  • 顯示
    日期顯示連結項目的修改日期

設計對話框

設計對話方塊可讓範本作者定義內容作者應允許的清單類型以及可用的項目設定。

清單設定

在​清單設定​標籤上,可以定義日期格式,以及內容作者應在元件中使用哪些類型的清單。

列出元件的設計對話框清單設定

  • 顯示
    上次修改日期的DateFormatFormat
  • 禁用
    子代禁用元件中的子代清單類型
  • 禁用
    靜態禁用元件中的靜態清單類型
  • 禁用
    搜索禁用元件中的搜索清單類型
  • 停用
    標籤停用元件中的標籤清單類型

項目設定

在​項目設定​標籤上,可以定義內容作者在元件中應使用的個別清單元素的格式選項。

列出元件的設計對話框項設定

樣式標籤

映像元件支AEM持樣式系統

Adobe客戶端資料層

清單元件支援Adobe客戶端資料層。

本頁內容

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