列表组件(v1)

核心组件列表组件允许轻松创建动态和静态列表。

使用

列表组件可用于创建子页面的动态列表或任意定义项目的静态列表。

可用列表类型和格式选项可由模板作者在设计对话框中定义。 内容编辑器可以从可用的列表类型中进行选择,以及如何在编辑对话框中设置列表元素的格式。

版本和兼容性

本文档介绍列表组件的v1,该组件最初随AEM 6.3核心组件版本1.0.0一起引入。

下表列出了列表组件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">
            <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

"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🔗的兼容性信息。

编辑对话框

编辑对话框允许内容作者配置列表和列表元素。

列表设置

列表可以采用不同的方式构建。

无论列表是如何构建的,都有始终可以配置的排序选项

根据内容作者选择如何构建列表,其他配置选项将发生更改。

子页面

列表可以由当前页面或其他页面的子页面构建。

  • 父页面
    • 其子页面应列出的页面
    • 留空以使用当前页面
  • 子级深度 — 应使用层次结构中的下层级别数

固定列表

可以使用固定的项目列表来构建列表。

点按或单击​Add​按钮,以在列表中插入新项目。

  • 在列表中输入项目的文本,或使用​选择对话框​从AEM中选择项目。
  • 使用拖动手柄重新排列列表中的项目。
  • 使用垃圾桶图标删除列表中的项目。

搜索

可以使用搜索AEM内容的结果构建列表。

  • 搜索查询 — 将对其运行全文搜索以生成列表元素的字符串
  • 搜索 — 应在何处运行搜索
    • 使用​选择对话框​选择AEM中的位置
    • 若留空,则使用当前页面

标记

列表可以使用与特定位置下的特定标记匹配的页面来构建。

  • 父页面 — 标记匹配的起始位置
    • 使用​选择对话框​选择AEM中的位置
    • 若留空,则使用当前页面
  • 标记 — 应该匹配哪些标记
    • 使用​Browse​对话框选择标记
  • 匹配 — 定义哪些类型的匹配可使页面有资格包含在列表中
    • 任何标记
    • 所有标记

排序选项

无论您选择如何构建列表,都始终可以定义某些排序选项。

  • 排序依据 — 元素的排序方式
    • 标题
    • 上次修改日期
  • 排序顺序 — 对项目进行排序的顺序
    • 升序
    • 降序
  • 最大项目数 — 列表中显示的最大项目数。
    • 留空可返回所有项目。

项目设置

使用​Item Settings​选项卡,可以配置列表元素的格式。

  • 将项
    目关联项目关联到相应页面
  • 显示
    描述显示链接项目的描述
  • 显示
    链接项目的DateShow修改日期

“设计”对话框

设计对话框允许模板作者定义允许内容作者使用的列表类型以及可用的项目设置。

列表设置

在​列表设置​选项卡中,可以定义日期格式以及内容作者可以在组件中使用哪些类型的列表。

  • 日期格式 — 用于显示上次修改日期的格式
  • 禁用子项 — 禁用组件中的子项列表类型
  • 禁用静态 — 禁用组件中的静态列表类型
  • 禁用搜索 — 禁用组件中的搜索列表类型
  • 禁用标记 — 在组件中禁用标记列表类型

项目设置

在​项目设置​选项卡上,可以为内容作者的组件中应该可用的各个列表元素定义格式选项。

  • 链接项目 — 编辑对话框中的“启用链接 项目”选项
  • 显示描述 — 编辑对话框中的启用显示 描述选项
  • 显示日期 — 编辑对话框中的启用显示 日期选项

技术详细信息

有关列表组件的最新技术文档,请参阅GitHub

可以从GitHub下载整个核心组件项目。

有关开发核心组件的更多详细信息,请参阅核心组件开发人员文档

在此页面上