列表组件 (v1)

利用核心组件列表组件，可以轻松地创建动态和静态列表。

用途

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

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

版本和兼容性

本文档介绍了列表组件 (v1)，它最初随带 AEM 6.3 的核心组件 1.0.0 版引入。

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

“编辑”对话框

利用“编辑”对话框，内容作者可以配置列表和列表元素。

列表设置

列表可以通过不同方式构建。

• 子页面
• 固定列表
• 搜索
• 标记

无论构建列表的方式如何，始终可以配置排序选项。

根据内容作者选择如何构建列表，可以更改其他配置选项。

子页面

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

• 父页面
  • 其子页面应该用于生成列表的页面
  • 留空可使用当前页面
• 子级深度 - 应该使用层级中向下的多少层

固定列表

列表可使用固定项列表构建。

点击或单击添加​按钮​可在列表中插入新项。

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

搜索

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

• 搜索查询 - 用于运行全文搜索以生成列表项的字符串
• 搜索范围 - 运行搜索的位置
  • 使用​“选择”对话框​可在 AEM 中选择位置
  • 如果留空则使用当前页面

标记

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

• 父页面 - 开始标记匹配的位置
  • 使用​“选择”对话框​可在 AEM 中选择位置
  • 如果留空则使用当前页面
• 标记 - 应该匹配的标记
  • 使用​浏览​对话框选择标记。
• 匹配 - 定义用什么类型的匹配来限定可以包括在列表中的页面
  • 任何标记
  • 所有标记

排序选项

不论您选择如何构建列表，始终可以定义特定的排序选项。

• 排序方式 - 应该如何对元素排序
  • 标题
  • 上次修改日期
• 排序顺序 - 对项排序所用的顺序
  • 升序
  • 降序
• 最大项数 - 列表中显示的项的最大数量。
  • 留空可返回所有项。

项设置

使用​项设置​选项卡，可以配置列表元素的格式化。

• 链接项
  将项链接到对应的页面
• 显示描述
  显示链接项的描述
• 显示日期
  显示链接项的修改日期

“设计”对话框

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

列表设置

在​列表设置​选项卡上，可以定义日期格式以及在组件中什么类型的列表可供内容作者使用。

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

项设置

在​项设置​选项卡上，可以定义在组件中可供内容作者使用的单独列表元素的格式化选项。

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

技术详细信息

在 GitHub 上可找到有关列表组件的最新技术文档。

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

在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。