Show Menu
主题×

列表组件(v1)

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

使用情况

列表组件可用于创建子页面的动态列表或任意定义项目的静态列表。
可用列表类型和格式选项可由模板作者在设计对话框中定 。 内容编辑器可以从可用的列表类型中进行选择,以及如何在编辑对话框中设置列 表元素格式

版本和兼容性

本文档描述了最初随AEM 6.3的核心组件版本1.0.0引入的列表组件的v1。
下表列出了列表组件的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的兼容性信息

Edit Dialog

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

列表设置

列表可以采用不同的方式构建。
无论如何构建列表,都有 可以始终配置的排序选项
根据内容作者选择如何构建列表,其他配置选项将会更改。

子页面

列表可以由当前页面或其他页面的子页面构建。
  • 父页面
    • 其子页面应该列出的页面
    • 留空以使用当前页面
  • 子级深度
    -层次结构中应使用多少个级别

Fixed List

可以使用项目的固定列表生成列表。
点按或单击
添加
按钮,将新项目插入列表。
  • 在列表中输入项目文本,或使用“选择
    对话框
    ”从AEM中选择项目。
  • 使用拖动手柄重新排列列表中的项目。
  • 使用垃圾桶图标可删除列表中的项目。

搜索

可以使用AEM内容搜索结果生成列表。
  • 搜索查询
    -将运行全文搜索以生成列表元素的字符串
  • 搜索范围
    -应在何处运行搜索
    • 使用“
      选择”对话框
      ,在AEM中选择位置
    • 如果留空,则使用当前页面

标记

列表可以使用与特定位置下的特定标记匹配的页面构建。
  • 父页面
    -标记匹配应从何处开始
    • 使用“
      选择”对话框
      ,在AEM中选择位置
    • 如果留空,则使用当前页面
  • 标记
    -哪些标记应匹配
    • 使用“浏
      ”对话框选择标记
  • 匹配
    -定义哪些类型的匹配应使页面符合列表中的条件
    • 任何标记
    • 所有标记

排序选项

无论您选择如何构建列表,总是可以定义某些排序选项。
  • 排序依据
    -元素的排序方式
    • 标题
    • 上次修改日期
  • 排序顺序
    -应按顺序对项目进行排序
    • 升序
    • 降序
  • 最大项目
    -列表中显示的最大项目数。
    • 留空将返回所有项目。

项目设置

使用“
项目设置
”选项卡,可以配置列表元素的格式。
  • 链接项目
    ​将项目链接到相应的页面
  • 显示说明
    ​显示链接项的说明
  • 显示日期
    ​显示链接项目的修改日期

设计对话框

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

列表设置

在“列
表设置
”选项卡上,可以定义日期格式以及内容作者在组件中应可以使用的列表类型。
  • 日期格式
    -用于显示上次修改日期的格式
  • 禁用子项
    -禁用组件中的子项列表类型
  • 禁用静态
    -禁用组件中的静态列表类型
  • 禁用搜索
    -禁用组件中的搜索列表类型
  • 禁用标记
    -在组件中禁用标记列表类型

项目设置

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

技术详细信息

有关列表组件的最新技术文 档可在GitHub上找到
整个核心组件项目可从GitHub下载。
有关开发核心组件的更多详细信息,请参阅核 心组件开发人员文档