清單元件 (v1) list-component-v

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
核心組件

建立對象：

開發人員
管理員
使用者

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

用途 usage

清單元件可用於建立下層頁面的動態清單或任意定義項目的靜態清單。

範本作者可在設計對話框中定義可用的清單類型和格式選項。內容編輯者可以在編輯對話框中，從可用的清單類型以及如何格式化清單元素中選取。

版本和相容性 version-and-compatibility

本文件說明清單元件 v1，最初由 AEM 6.3 搭配的核心元件 1.0.0 版導入。

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

AEM 版本

清單元件 v1

6.3

相容

6.4

相容

CAUTION

本文件說明清單元件 v1。

如需清單元件目前版本的詳細資訊，請參閱清單元件文件。

範例元件輸出 sample-component-output

以下是從 We.Retail 中取得的範例。

螢幕擷圖 screenshot

HTML 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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <span class="cmp-list--item-title">Climbing in the Massif du Mont Blanc</span>

        </a>

    </article>
</li>
</ul>

</div>

JSON 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"
            }

NOTE

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