清單元件(v1)

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

使用狀況

「清單元件」可用來建立例如子頁面的動態清單或任意定義項目的靜態清單。

設計對話框中的模板作者可以定義可用清單類型和格式選項。 內容編輯器可從可用的清單類型中選擇,以及如何在edit對話框中格式化清單元素。

版本和相容性

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

下表列出了清單元件v1的相容性。

版AEM本 清單元件v1
6.3 相容
6.4 相容
注意

本檔案說明「清單元件」的v1。

有關清單元件當前版本的詳細資訊,請參閱清單元件文檔。

元件輸出示例

以下範例取自We.Retail

螢幕擷圖

HTML

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

<ul>
    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Arctic Surfing In Lofoten</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/summit-success-in-the-himalayas.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Summit Success in the Himalayas</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-on-kalymnos-island--greece.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Climbing on Kalymnos Island, Greece</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/running-at-the-great-wall-marathon.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Running at the Great Wall Marathon</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/skiing-deep-powder-in-siberia.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Skiing deep powder in Siberia</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-in-the-massif-du-mont-blanc.html?lang=zh-Hant">
            <span class="cmp-list--item-title">Climbing in the Massif du Mont Blanc</span>
            
        </a>
        
    </article>
</li>
</ul>

</div>

JSON

"articles_list": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/articleslist",
              "tagsMatch": "any",
              "displayAs": "teaser",
              "feedEnabled": "true",
              "listFrom": "children",
              "limit": "0",
              "orderBy": "cq:lastModified",
              "pageMax": "0"
            }
注意

從核心元件匯出JSON需要1.1.0版的核心元件。 如需詳細資訊,請參閱核心元件v1🔗的相容性資訊。

編輯對話框

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

清單設定

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

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

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

子頁面

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

  • 父頁面
    • 其子頁面應該列出的頁面
    • 保留空白以使用目前頁面
  • 子層深度 -應使用階層中向下的層數

修正清單

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

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

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

搜尋

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

  • 搜尋查詢 -執行全文搜尋以產生清單元素的字串
  • 搜索範圍 -應在何處運行搜索
    • 使用​選擇對話框​選擇位AEM置
    • 如果保留空白,請使用目前頁面

標記

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

  • 上層頁面 -標籤符合的起始位置
    • 使用​選擇對話框​選擇位AEM置
    • 如果保留空白,請使用目前頁面
  • 標籤 -哪些標籤應符合
    • 使用​Browse​對話方塊來選取標籤
  • Match —— 定義哪些符合類型可限定要包含在清單中的頁面
    • 任何標記
    • 所有標記

排序選項

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

  • 排序依據 -如何排序元素
    • 標題
    • 上次修改日期
  • 排序順序 -對物料排序的順序
    • 升序
    • 降序
  • 最大項目 -清單中顯示的項目數上限。
    • 留空以傳回所有項目。

項目設定

使用​項目設定​頁籤,可以配置清單元素的格式。

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

設計對話框

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

清單設定

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

  • 日期格式 -用於顯示上次修改日期的格式
  • 禁用子項 -禁用元件中的子項清單類型
  • 禁用靜態 -禁用元件中的靜態清單類型
  • 禁用搜索 -禁用元件中的搜索清單類型
  • 禁用標籤 -禁用元件中的標籤清單類型

項目設定

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

  • 連結項目 -在編輯對話方塊中啟用連結 項目選項
  • 顯示說明 -在編輯對話方塊中啟用顯示說 明選項
  • 顯示日期 -在編輯對話方塊中啟用顯示日 期選項

技術詳細資訊

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

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

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

本頁內容

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