Teaser 组件 (v1) teaser-component

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

创建对象：

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

用途 usage

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

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

本文档介绍了 Teaser 组件 v1，此版本随 2018 年 7 月的核心组件发行版本 2.1.0 的发布引入。

CAUTION

本文档介绍了 Teaser 组件 v1。

有关当前版本的 Teaser 组件的详细信息，请参阅 Teaser 组件文档。

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

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

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

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

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

图像资源
- 通过资源浏览器拖放资源或点击浏览选项，以从本地文件系统上传。
- 点按或单击 “清除” 以取消选择当前选定的图像。
- 点击或单击 “编辑” 可在资源编辑器中管理资源的再现。

NOTE

Dynamic Media 功能当前在 Teaser 组件中不可用。

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

前标题 - 前标题显示在 Teaser 的标题之前。
标题 - 定义显示为 Teaser 大标题的标题。
- 从链接的页面获取标题 - 在选中时，使用链接页面的标题填充标题。
描述 - 定义显示为 Teaser 子标题的描述。
- 从链接的页面获取描述 - 在选中时，使用链接页面的描述填充描述。
ID - 利用此选项，可以控制 HTML 和 Data Layer 中的组件的唯一标识符。
- 如果留空，系统会自动为您生成一个唯一 ID，可以通过检查结果页面找到该 ID。
- 如果指定一个 ID，作者有责任确保它是唯一的。
- 更改此 ID 会对 CSS、JS 和 Data Layer 跟踪产生影响。

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

Teaser 组件将图像渲染委派给图像组件。因此，内容作者可以使用图像组件的“编辑”对话框来处理 Teaser 图像。

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

Teaser 组件的“设计”对话框

行动号召
- 禁用行动号召 - 对内容作者隐藏 行动号召 选项
元素
- 隐藏前标题 - 对内容作者隐藏 前标题 选项
- 隐藏标题 - 对内容作者隐藏标题选项
  - 在选中时，将隐藏 标题类型
- 隐藏描述 - 对内容作者隐藏描述选项
标题类型 - 定义由 Teaser 的标题使用的 H 标记。
链接
- 不链接图像 - 在选中时，不链接 Teaser 图像
- 不链接标题 - 在选中时，不链接 Teaser 标题
图像委派 - 信息性显示，指示 Teaser 将图像处理委派到的组件。

Teaser 组件支持 AEM 样式系统。

recommendation-more-help

d2be9096-a81e-404b-9952-d8925af7219c