Teaser组件

核心组件Teaser组件可显示图像、标题、富文本以及（可选）链接到其他内容。

使用

Teaser组件允许内容作者轻松创建Teaser以使用图像、标题或富文本进一步创建内容，并链接到其他内容或其他操作。

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

版本和兼容性

Teaser组件的当前版本为v1,2018年7月随核心组件的2.1.0版引入v1，该版本在本文档中进行了说明。

下表详细列出了组件的所有受支持版本、与组件版本兼容的AEM版本以及指向先前版本文档的链接。

示例组件输出

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

技术详细信息

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

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

配置对话框

内容作者可以使用配置对话框定义单个Teaser的属性。 还有一个编辑对话框，用于修改选择了Teaser图像的Teaser图像。

图像

• 图像资产
  • 从资产浏览器中删除资产，或点按​浏览​选项，从本地文件系统中上传。
  • 点按或单击​清除​以取消选择当前选定的图像。
  • 点按或单击​编辑​以在资产编辑器中管理资产的演绎版。

文本

• 预标题 -预标题将显示在Teaser的标题之前。
• 标题 -定义要显示为Teaser标题的标题。
  • 从链接的页面获取标题 -选中此项后，标题将填充链接页面的标题。
• 描述 -定义要显示为Teaser子标题的描述。
  • 从链接的页面获取描述 -选中此选项后，描述将填充链接页面的描述。
• ID —— 此选项允许控制HTML和数据层中组件的唯一标 识符。
  • 如果留空，则会自动为您生成唯一ID，并可通过检查生成的页面找到该ID。
  • 如果指定了ID，则作者有责任确保它是唯一的。
  • 更改ID可能会影响CSS、JS和数据层跟踪。

链接和操作

• 链接 -应用于Teaser的链接。使用路径浏览器选择链接目标。
• 启用行动动员 -选中后，启用行动动员定义。列表中的第一个行动动员链接用作其他Teaser元素的链接。

编辑对话框

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

设计对话框

设计对话框允许模板作者定义内容作者在使用此组件时具有的Teaser选项。

Teaser选项卡

• 行为召唤
  • 禁用行动动员 -隐藏 内容作者 的行动动员选项
• 元素
  • 隐藏预标题 -隐藏内 ​​容作者的预标题选项
  • 隐藏标题 -隐藏内容 ​​作者的标题选项
    • 选择​标题类型​后，将隐藏
  • 隐藏描述 -隐藏内容作 ​​者的“描述”选项
• 标题类 型——定义Teaser标题要使用的H标记。
• 链接
  • 不链接图像 -选中后，Teaser图像未链接
  • 不链接标题 -选中后，Teaser标题未链接
• 图像委派 -指示Teaser委派图像处理的组件的信息显示。

样式选项卡

Teaser组件支持AEM 样式系统。