文档AEM核心组件指南

Teaser 组件 teaser-component

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 开发人员
  • 管理员
  • 用户

核心组件 Teaser 组件可以显示图像、标题、富文本并可以选择链接到更多内容。

用途 usage

使用 Teaser 组件，内容作者可以轻松地创建 Teaser，以便让更多内容使用图像、标题或富文本，并将其链接到更多内容或其他操作。

模板作者可以使用“设计”对话框定义创建行动号召和添加链接的选项是否可用，以及禁用各种显示选项。内容作者可以使用“配置”对话框来设置图像、定义 CTA、设置标题和描述，以及配置指向个别 Teaser 的链接。可以访问图像组件的“编辑”对话框来修改 Teaser 图像。

版本和兼容性 version-and-compatibility

Teaser 组件的当前版本是 v2，此版本随 2022 年 2 月的核心组件发行版 2.18.0 的发布引入，具体说明见本文。

下表详细说明了该组件的所有受支持版本、与该组件的版本兼容的 AEM 版本以及指向早期版本文档的链接。

组件版本
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v2
-
兼容
兼容
v1
兼容
兼容
兼容

远程资产支持 remote-assets

Teaser 组件（截止 发行版本 2.23.2）支持远程资产。配置后， 您可以从远程服务中为您的 teaser 组件选择资产。

示例组件输出 sample-component-output

要体验 Teaser 组件并查看其配置选项示例以及 HTML 和 JSON 输出，请访问组件库。

技术详细信息 technical-details

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

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

“配置”对话框 configure-dialog

内容作者可以使用“配置”对话框定义个别 Teaser 的属性。在选中时，还有“编辑”对话框可修改 Teaser 图像。

Teaser 组件的“编辑”对话框中的“链接”选项卡

可从链接的页面或从第一个行动号召中链接的页面继承 Teaser 标题、描述和图像。如果未指定链接和行动号召，将从当前页面继承标题、描述和图像。

  • 链接 - 此文件链接到内容页面、外部 URL 或页面锚点。
  • 在新标签页中打开链接 - 如果启用，将在一个新的浏览器标签页中打开链接。
  • 行动号召 - 此选项允许链接到多个目标。
    • 在继承 Teaser 标题、描述或图像时使用第一个行动号召中链接的页面。

“文本”选项卡 text-tab

Teaser 组件的“编辑”对话框中的“文本”选项卡

  • 前标题 - 前标题显示在 Teaser 的标题之前。

  • 标题 - 定义显示为 Teaser 大标题的标题。

    • 从链接的页面获取标题 - 在选中时，使用链接页面的标题填充标题。

  • 描述 - 定义显示为 Teaser 子标题的描述。

    • 从链接的页面获取描述 - 在选中时，使用链接页面的描述填充描述。

  • ID - 利用此选项，可以控制 HTML 和 Data Layer 中的组件的唯一标识符。

    • 如果留空，系统会自动为您生成一个唯一 ID，可以通过检查结果页面找到该 ID。
    • 如果指定一个 ID，作者有责任确保它是唯一的。
    • 更改此 ID 会对 CSS、JS 和数据层跟踪产生影响。

“资源”选项卡 asset-tab

Teaser 组件的“编辑”对话框中的“图像”选项卡

  • 从页面继承精选图像 - 使用链接页面的页面属性中定义的图像，如果没有找到，则使用当前页面。

  • 图像资源 - 在资源浏览器中放置资源或点击​ 浏览 ​选项以从本地文件系统上传。

    • 点按或单击​ “清除” ​以取消选择当前选定的图像。

    • 点击或单击​ 选取 ​以打开资源浏览器以选择图像。

      • 如果启用了 远程资产支持，您有选择资产的多种选项：

        • 本地 ​从本地 AEM 资源库选择。
        • 远程 ​从您的 AEM 实例之外的 Dynamic Media 库选择。

    • 点击或单击​ 编辑 ​以在资源编辑器中管理资源的演绎版。

  • 用于辅助功能的替换文本 - 此字段允许您为视障用户定义图像的描述。

    • 从页面继承替换文本 - 此选项使用 DAM 中 dc:description 元数据的链接资源值的替代描述或当前页面的替代描述（如果未链接资源）。

  • 不提供替换文本 - 此选项将图像标记为被屏幕阅读器等辅助技术忽略，以用于图像纯粹起装饰作用或不向页面传达额外信息的情况。

“样式”选项卡 styles-tab-edit

Teaser 列表组件“编辑”对话框的“样式”选项卡

Teaser 组件支持 AEM 样式系统。

使用下拉菜单选择要应用于该组件的样式。在“编辑”对话框中所做的选择与从组件工具栏中选择的操作效果相同。

必须在“设计”对话框中为此组件配置样式，以便下拉菜单可用。

“编辑”对话框 edit-dialog

Teaser 组件将图像渲染委派给图像组件。因此，内容作者可以使用[“编辑”对话框]（图像组件的 image.md#edit-dialog）来处理 Teaser 图像。

“设计”对话框 design-dialog

利用“设计”对话框，模板作者可以定义内容作者在使用此组件时具有的 Teaser 选项。

“Teaser”选项卡 teaser-tab

Teaser 组件的“设计”对话框

  • 行动号召

    • 禁用行动号召 - 对内容作者隐藏​ 行动号召 ​选项

  • 元素

    • 隐藏前标题 - 对内容作者隐藏​ 前标题 ​选项
    • 隐藏标题 - 对内容作者隐藏​ 标题 ​选项
      • 在选中时，将隐藏​ 标题类型
    • 隐藏描述 - 对内容作者隐藏​ 描述 ​选项

  • 默认标题类型 - 定义由 Teaser 的标题使用的 H 标记。

  • 图像委派 - 信息性显示，指示 Teaser 将图像处理委派到的组件。

“样式”选项卡 styles-tab

Teaser 组件支持 AEM 样式系统。

Adobe Client Data Layer data-layer

Teaser 组件支持 Adobe Client Data Layer。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c