列表组件 (v1) list-component-v

Last update: Fri Jul 12 2024 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 的兼容性信息。