用于WYSIWYG创作的Edge Delivery Services建模与内容项目 content-modeling
了解内容建模如何用于WYSIWYG创作和Edge Delivery Services项目，以及如何对您自己的内容建模。
先决条件 prerequisites
使用WYSIWYG创作和Edge Delivery Services的项目将继承任何其他Edge Delivery Services项目的大部分机制，这与内容源或创作方法无关。
在开始为项目内容建模之前，请确保先阅读以下文档。
必须理解这些概念，才能设计出通过与内容源无关方式工作的引人注目的内容模型。本文档详细介绍专门为WYSIWYG创作实施的机制。
默认内容 default-content
默认内容 是作者在不添加任何额外语义的情况下直观地放置在页面上的内容。其中包括文本、标题、链接和图像。此类内容的功能和用途不言自明。
在 AEM 中，此内容作为具有非常简单的预定义模型的组件来实施，其中包括可在 Markdown 和 HTML 中序列化的所有内容。
- 文本：富文本（包括列表元素和粗体或斜体文本）
- 标题：文本、类型 (h1-h6)
- 图像：来源、描述
- 按钮：文本、标题、URL、类型（默认、主要、辅助）
这些组件的模型是用于WYSIWYG创作的Edge Delivery Services样板的一部分。
区块 blocks
区块用于创建具有特定样式和功能的更丰富的内容。与默认内容相比，区块确实需要额外语义。可将区块比作 AEM 页面编辑器中的组件。
区块实际上是由 JavaScript 装饰并使用样式表设置样式的内容片段。
区块模型定义 model-definition
在将WYSIWYG创作与Edge Delivery Services结合使用时，必须显式建模块的内容，以便为作者提供创建内容的界面。 从本质上讲，您需要创建一个模型，以便创作 UI 知道根据区块向作者提供哪些选项。
component-models.json 文件定义了区块的模型。组件模型中定义的字段将作为属性保留在 AEM 中，并在构成区块的表中呈现为单元格。
{
"id": "hero",
"fields": [
{
"component": "reference",
"valueType": "string",
"name": "image",
"label": "Image",
"multi": false
},
{
"component": "text-input",
"valueType": "string",
"name": "imageAlt",
"label": "Alt",
"value": ""
},
{
"component": "text-area",
"name": "text",
"value": "",
"label": "Text",
"valueType": "string"
}
]
}
请注意，并非每个区块都必须具有模型。一些区块只是子级列表的容器，其中每个子级都具有自己的模型。
还需要定义哪些区块存在并可使用 Universal Editor 将其添加到页面中。component-definitions.json 文件列出了由 Universal Editor 提供的组件。
{
"title": "Hero",
"id": "hero",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "Hero",
"model": "hero"
}
}
}
}
}
可以对多个区块使用一个模型。例如，一些区块可以共享一个定义文本和图像的模型。
对于每个区块，开发人员：
在将区块添加到页面时，所有这些信息都存储在 AEM 中。如果缺少资源类型或区块名称，则该区块将不会在页面上呈现。
区块结构 block-structure
区块的属性在组件模型中定义并保留在 AEM 中。属性呈现为区块的表状结构中的单元格。
简单区块 simple
在最简单的形式中，区块按照在模型中定义属性的顺序以单行/列形式呈现每个属性。
在以下示例中，在模型中依次定义图像和文本。因此，依次呈现图像和文本。
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
您可能会发现，一些类型的值允许推断标记中的语义，并且属性将并入单个单元格中。类型推断部分中描述了此行为。
键值区块 key-value
在许多情况下，建议装饰呈现的语义标记、添加 CSS 类名称、添加新节点或在 DOM 中移动它们，以及应用样式。
但在其他情况下，区块将被读取为类似键值对的配置。
一个示例是部分元数据。在此用例中，可以将区块配置为呈现为键值对表。请参阅部分和部分元数据部分以了解更多信息。
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
容器区块 container
前面的两个结构都具有一个维度：属性列表。容器区块允许添加子级（通常属于相同类型或模型），因此是二维的。这些区块仍支持首先将其属性呈现为具有单列的行。但它们还允许添加子级，其中每个项目呈现为行，每个属性呈现为该行中的列。
在以下示例中，区块接受链接图标列表作为子级，其中每个链接的图标均有一个图像和一个链接。请注意区块数据中设置的过滤器 ID，以便引用过滤器配置。
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
为区块创建语义内容模型 creating-content-models
利用解释的区块结构的机制，可以创建一个内容模型，将 AEM 中保留的内容一对一映射到投放层。
在每个项目的早期阶段，必须仔细考虑每个区块的内容模型。它必须与内容源和创作体验无关，以允许作者在重用区块实施和样式时切换或组合它们。有关更多详细信息和一般指南，请参阅 David's Model (take 2)。更具体地说，区块集合包含一组广泛的内容模型，可用于常见用户界面模式的特定用例。
对于使用Edge Delivery Services进行WYSIWYG创作，这就提出了一个问题：当使用由多个字段组成的表单创作信息时，如何提供引人注目的语义内容模型，而不是像富文本那样编辑上下文中的语义标记。
要解决此问题，可以使用三种方法来创建引人注目的内容模型：
类型推断 type-inference
对于某些值，我们可以从值本身推断语义含义。此类值包括：
- 图像 - 如果对 AEM 中资源的引用是 MIME 类型的以
image/开头的资源，则该引用将呈现为<picture><img src="${reference}"></picture>。 - 链接 - 如果引用在 AEM 中存在且不是图像，或者值以
https?://或#开头，则引用将呈现为<a href="${reference}">${reference}</a>。 - 富文本 - 如果修剪后的值以段落（
p、ul、ol、h1-h6等）开头，该值将呈现为富文本。 - 类名 -
classes属性被视为块选项，并在简单块的表标头中呈现，或作为容器块中项目的值列表呈现。如果您希望以不同方式设置块的样式，，但不需要创建全新的块，则此功能非常有用。 - 值列表 - 如果一个值是多值属性，并且第一个值不是前一个值，则所有值都以逗号分隔的列表形式连接起来。
所有其他内容都将呈现为纯文本。
字段折叠 field-collapse
字段折叠是根据使用后缀 Title、Type、MimeType、Alt 和 Text（均区分大小写）的命名约定，将多个字段值合并为一个语义元素的机制。任何以这些后缀结尾的属性将不被视为值，而被视为另一个属性的特性。
图像 image-collapse
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
链接和按钮 links-buttons-collapse
| code language-json |
|---|
|
无 linkType 或 linkType=default
| code language-html |
|---|
|
linkType=primary
| code language-html |
|---|
|
linkType=secondary
| code language-html |
|---|
|
| code language-text |
|---|
|
标题 headings-collapse
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
元素分组 element-grouping
字段折叠是指将多个属性合并为单个语义元素，元素分组是指将多个语义元素连接成单个单元格。在应限制作者可创建的元素的类型和数量的用例中，这特别有用。
例如，Teaser 组件可能只会允许作者创建一个子标题、标题和单个段落描述，并与最多两个动作按钮相结合。将这些元素分组在一起会产生一个语义标记，无需进一步操作即可设置其样式。
元素分组会使用命名约定，其中组名称与组中的每个属性之间用下划线分隔。组中属性的字段折叠的工作原理如前所述。
| code language-json |
|---|
|
| code language-html |
|---|
|
| code language-text |
|---|
|
部分和部分元数据 sections-metadata
利用开发人员用来对多个区块进行定义和建模的方式，可以定义不同的部分。
Edge Delivery Services 的内容模型有意只允许单级嵌套，即部分包含的任何默认内容或区块。这意味着，要拥有可包含其他组件的更复杂的视觉组件，必须使用自动屏蔽客户端将它们作为部分进行建模和组合。典型示例是选项卡和可折叠部分，例如可折叠项。
可按照定义区块的方式定义部分，但资源类型为 core/franklin/components/section/v1/section。部分可具有一个名称、一个过滤器 ID（仅由 Universal Editor 使用）和一个模型 ID（用于呈现部分元数据）。这样一来，模型便为部分元数据区块的模型，如果它不为空，则会自动作为键值区块附加到部分中。
默认部分的模型 ID 和过滤器 ID 是 section。它可用于更改默认部分的行为。以下示例将一些样式和背景图像添加到部分元数据模型。
{
"id": "section",
"fields": [
{
"component": "multiselect",
"name": "style",
"value": "",
"label": "Style",
"valueType": "string",
"options": [
{
"name": "Fade in Background",
"value": "fade-in"
},
{
"name": "Highlight",
"value": "highlight"
}
]
},
{
"component": "reference",
"valueType": "string",
"name": "background",
"label": "Image",
"multi": false
}
]
}
以下示例定义一个选项卡部分，可用于通过在自动遮蔽期间将连续部分与选项卡标题数据属性组合成选项卡区块来创建选项卡区块。
{
"title": "Tab",
"id": "tab",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/section/v1/section",
"template": {
"name": "Tab",
"model": "tab",
"filter": "section"
}
}
}
}
}
页面元数据 page-metadata
文档可以具有页面元数据区块，它用于定义哪些 <meta> 元素呈现在页面的 <head> 中。AEM as a Cloud Service 中页面的页面属性映射到 Edge Delivery Services 的现成页面属性，例如 title、description、keywords 等。
在进一步探索如何定义自己的元数据之前，请先查看以下文档以了解页面元数据的概念。
还可以通过两种方式定义其他页面元数据。
元数据电子表格 metadata-spreadsheets
可以在 AEM as a Cloud Service 中以类似表格的方式定义每个路径或每个路径模式的元数据。有一个可用于类似 Excel 或 Google Sheets 的表格数据的创作 UI。
要创建此类表，请创建一个页面并使用 Sites 控制台中的元数据模板。
在电子表格的页面属性中，定义所需的元数据字段以及 URL。然后添加每个页面路径或页面路径模式的元数据。
在发布之前，请确保也已将电子表格添加到您的路径映射中。
{
"mappings": [
"/content/site/:/",
"/content/site/metadata:/metadata.json"
]
}
页面属性 page-properties
AEM 中提供的许多默认页面属性都映射到文档中相应的页面元数据。例如，包括 title、description、robots、canonical url 或者 keywords。还提供一些特定于 AEM 的属性：
cq:lastModified（ISO8601 格式）显示的modified-time- 文档最后发布的时间为
published-time（ISO8601 格式） cq:tagsascq-tags作为逗号分隔标记 ID 列表。
还可以为自定义页面元数据定义组件模型，作者可以将其作为 AEM Sites 页面属性对话框的选项卡使用。
为此，请使用 ID page-metadata 创建组件模型。
{
"id": "page-metadata",
"fields": [
{
"component": "text",
"name": "theme",
"label": "Theme"
}
]
}
后续步骤 next-steps
现在您知道了如何对内容进行建模了，可以使用所见即所得创作项目为自己的Edge Delivery Services创建块。
请参阅文档创建检测用于通用编辑器的块，了解如何创建检测用于通用编辑器的块(通过Edge Delivery Services项目进行所见即所得创作)。
如果您已熟悉创建块，请参阅文档用于Edge Delivery ServicesWYSIWYG创作的开发人员快速入门指南，以使用Edge Delivery Services和通用编辑器进行内容创作，启动并运行新的Adobe Experience Manager站点。