可视化内容片段 visual-content-fragments
内容片段包含用于JSON输出的结构化内容,不带设计或布局。 通过添加HTML模板,您可以使用HTML格式的结构化内容创建完全修饰的可视体验:
-
可视化内容片段有助于确保内容质量,允许利益相关者在使用内容之前查看内容,而无需打开内容片段编辑器
-
提供可视化片段有助于全渠道交付,以便跨渠道(如Web、电子邮件或移动应用程序)重用模块化体验。
使用附加的AEM模板的布局和设计的HTML内容片段的呈现输出称为可视内容片段。
HTML模板包含布局和设计信息,可实现内容片段的可视化。 模板与内容片段之间的连接是使用Handlebars语法建立的,以将HTML标记映射到内容片段模型中定义的数据类型(字段)。 此定义允许在内容片段编辑器的相应字段中创作的内容显示在模板内的相应位置。
您或您的开发团队可以创建和自定义您自己的HTML模板,然后上传一个或多个内容片段模型并将其附加到内容片段模型,以便相应的片段可以呈现到体验中,预览并按需要投放🔗。
创建模板 create-a-template
使用Handlebars开发的HTML模板允许您以HTML格式预览和交付可视化内容片段。 Handlebars.js语法为内容片段字段中创作的内容定义占位符。
有关开发您自己的模板的详细信息,请参阅可视化内容片段 — 模板。
上载并分配模板 upload-and-assign-your-template
模板与内容片段模型相关联,以便可以将其用于从该模型创建的任何内容片段。
要上传新的HTML模板,请执行以下操作:
-
在内容片段控制台中,打开 内容片段模型 的选项卡。
-
导航到片段模型的位置。
-
为所需模型选择信息图标(i):
将显示右侧面板。
-
向下滚动以显示HTML模板,已列出通用模板,因为它是默认模板:
-
选择 + 以从HTML文件(
.html)上载您的模板。 一个对话框将允许您 浏览 您的本地文件系统并选择您的模板文件。 -
上传模板的两个视图后,将显示供您查看:
- 左:无内容的模板的渲染
- 右:HTML代码,在导入到AEM之前,也可以在此处编辑该代码
-
选择 下一步 继续。
-
输入用于AEM的模板名称。
-
通过 创建模板 确认。
-
该模板将在AEM中创建,并在内容片段模型的属性中列在 HTML模板 下。
加载后可用于预览片段。您还可以 下载 或 删除 模板。
使用模板预览片段 preview-your-fragment-with-a-template
要使用模板预览内容片段,请执行以下操作:
-
在内容片段控制台导航到片段的位置。
-
可以任选其一:
- 在控制台中选择您的片段
- 在编辑器中打开您的片段
-
从的顶部工具栏中选择预览:
- 内容片段控制台
- 编辑器,您可以在其中选择模板
在这两种情况下,都将打开一个新的模式窗口。
-
如果没有可用的自定义模板,则AEM将使用 通用模板 显示您的片段。 通用模板:
- 以表格形式显示片段的字段;名称和内容
- 在同一视图中显示引用的片段的完全水合内容
-
如果自定义模板可用,则可以选择要使用的模板(包括通用模板)。
-
如果内容片段已发布,您还可以查看和复制其 预览URL 和发布URL。
例如,使用 通用模板 预览:
交付您的可视化内容片段 deliver-your-visual-content-fragment
可视内容片段可以采用HTML格式交付给一系列目标。
交付给浏览器 deliver-to-the-browser
复制 预览URL 或发布URL。 直接从浏览器访问它,查看您的可视化内容片段。
交付到Edge Delivery Services deliver-to-edge-delivery-services
您可以在Edge Delivery服务(EDS)页面中投放可视片段。
交付到AEM页面 deliver-to-an-AEM-page
您可以使用核心组件“内容片段”在AEM页面中交付可视化内容片段。
在您的页面🔗上配置内容片段 组件时:
-
指定所需的内容片段。
-
选择内容片段可视化图表。
-
从下拉列表中选择所需的可视化模板。
-
可视片段将显示在页面中。
下载您的模板 download-your-template
要从AEM下载HTML模板,请执行以下操作:
-
在内容片段控制台中,打开 内容片段模型 的选项卡。
-
导航到片段模型的位置。
-
为所需模型选择信息图标(i):
将显示右侧面板。
-
向下滚动以显示HTML模板。
-
按要下载的模板选取椭圆。
-
选择下载。
-
指定文件名和位置。
-
单击 保存 确认。
删除您的模板 delete-your-template
要删除新的HTML模板(从AEM),请执行以下操作:
-
在内容片段控制台中,打开 内容片段模型 的选项卡。
-
导航到片段模型的位置。
-
为所需模型选择信息图标(i):
将显示右侧面板。
-
向下滚动以显示HTML模板。
-
按要下载的模板选取椭圆。
-
选择删除。
-
在下面的对话框中,通过 删除 确认操作。