可视化内容片段 visual-content-fragments

内容片段包含用于JSON输出的结构化内容,不带设计或布局。 通过添加HTML模板,您可以使用HTML格式的结构化内容创建完全修饰的可视体验:

  • 可视化内容片段有助于确保内容质量,允许利益相关者在使用内容之前查看内容,而无需打开内容片段编辑器

  • 提供可视化片段有助于全渠道交付,以便跨渠道(如Web、电子邮件或移动应用程序)重用模块化体验。

使用附加的AEM模板的布局和设计的HTML内容片段的呈现输出称为​可视内容片段

HTML模板包含布局和设计信息,可实现内容片段的可视化。 模板与内容片段之间的连接是使用Handlebars语法建立的,以将HTML标记映射到内容片段模型中定义的数据类型(字段)。 此定义允许在内容片段编辑器的相应字段中创作的内容显示在模板内的相应位置。

您或您的开发团队可以创建和自定义您自己的HTML模板,然后上传一个或多个内容片段模型并将其附加到内容片段模型,以便相应的片段可以呈现到体验中,预览并按需要投放🔗

NOTE
通用模板​始终作为默认模板在AEM中可用,并与每个模型关联。 利用此模板,可采用简洁的表格样式格式显示结构化内容中的键/值对,以支持内容质量Assurance (QA)用例。

创建模板 create-a-template

使用Handlebars开发的HTML模板允许您以HTML格式预览和交付可视化内容片段。 Handlebars.js语法为内容片段字段中创作的内容定义占位符。

有关开发您自己的模板的详细信息,请参阅可视化内容片段 — 模板

上载并分配模板 upload-and-assign-your-template

模板与内容片段模型相关联,以便可以将其用于从该模型创建的任何内容片段。

要上传新的HTML模板,请执行以下操作:

  1. 在内容片段控制台中,打开​ 内容片段模型 ​的选项卡。

  2. 导航到片段模型的位置。

  3. 为所需模型选择信息图标(i):

    内容片段控制台 — 信息图标

    将显示右侧面板。

  4. 向下滚动以显示​HTML模板,已列出​通用模板,因为它是默认模板:

    使用通用HTML模板预览片段

  5. 选择​ + ​以从HTML文件(.html)上载您的模板。 一个对话框将允许您​ 浏览 ​您的本地文件系统并选择您的模板文件。

  6. 上传模板的两个视图后,将显示供您查看:

    • 左:无内容的模板的渲染
    • 右:HTML代码,在导入到AEM之前,也可以在此处编辑该代码

    在上传时查看HTML模板

  7. 选择​ 下一步 ​继续。

  8. 输入用于AEM的​模板名称

  9. 通过​ 创建模板 ​确认。

  10. 该模板将在AEM中创建,并在内容片段模型的属性中列在​ HTML模板 ​下。
    加载后可用于预览片段。您还可以​ 下载 ​或​ 删除 ​模板。

使用模板预览片段 preview-your-fragment-with-a-template

要使用模板预览内容片段,请执行以下操作:

NOTE
由于​ 通用模板 ​始终可用,因此您可以预览片段,而无需加载任何自定义模板。
  1. 在内容片段控制台导航到片段的位置。

  2. 可以任选其一:

    • 在控制台中选择您的片段
    • 在编辑器中打开您的片段
  3. 从的顶部工具栏中选择​预览

    • 内容片段控制台
    • 编辑器,您可以在其中选择​模板

在这两种情况下,都将打开一个新的模式窗口。

  1. 如果没有可用的自定义模板,则AEM将使用​ 通用模板 ​显示您的片段。 通用模板

    • 以表格形式显示片段的字段;名称和内容
    • 在同一视图中显示引用的片段的完全水合内容
  2. 如果自定义模板可用,则可以选择要使用的模板(包括​通用模板)。

  3. 如果内容片段已发布,您还可以查看和复制其​ 预览URL ​和​发布URL

例如,使用​ 通用模板 ​预览:

使用通用HTML模板预览片段

交付您的可视化内容片段 deliver-your-visual-content-fragment

可视内容片段可以采用HTML格式交付给一系列目标。

交付给浏览器 deliver-to-the-browser

复制​ 预览URL ​或​发布URL。 直接从浏览器访问它,查看您的可视化内容片段。

交付到Edge Delivery Services deliver-to-edge-delivery-services

您可以在Edge Delivery服务(EDS)页面中投放可视片段。

  1. 导航到您的EDS项目。
  2. 添加或访问​ 嵌入 ​类型的​
  3. 将​ 发布URL ​粘贴到块。
  4. 发布EDS页面。 可以看到片段的HTML表示形式。
NOTE
有关完整的详细信息,请参阅与Edge Delivery Services(嵌入块)的集成

交付到AEM页面 deliver-to-an-AEM-page

您可以使用核心组件“内容片段”在AEM页面中交付可视化内容片段。

在您的页面🔗上配置​内容片段 组件时:

  1. 指定所需的​内容片段

  2. 选择​内容片段可视化图表

  3. 从下拉列表中选择所需的​可视化模板

    为可视化片段配置内容片段组件

  4. 可视片段将显示在页面中。

NOTE
有关完整详细信息,请参阅集成 — AEM Sites与核心组件

下载您的模板 download-your-template

要从AEM下载HTML模板,请执行以下操作:

  1. 在内容片段控制台中,打开​ 内容片段模型 ​的选项卡。

  2. 导航到片段模型的位置。

  3. 为所需模型选择信息图标(i):

    内容片段控制台 — 信息图标

    将显示右侧面板。

  4. 向下滚动以显示​HTML模板

  5. 按要下载的模板选取椭圆。

  6. 选择​下载

  7. 指定文件名和位置。

  8. 单击​ 保存 ​确认。

删除您的模板 delete-your-template

要删除新的HTML模板(从AEM),请执行以下操作:

  1. 在内容片段控制台中,打开​ 内容片段模型 ​的选项卡。

  2. 导航到片段模型的位置。

  3. 为所需模型选择信息图标(i):

    内容片段控制台 — 信息图标

    将显示右侧面板。

  4. 向下滚动以显示​HTML模板

  5. 按要下载的模板选取椭圆。

  6. 选择​删除

  7. 在下面的对话框中,通过​ 删除 ​确认操作。

recommendation-more-help
experience-manager-cloud-service-help-main-toc