使用Edge Delivery Services專案進行WYSIWYG製作的內容模型 content-modeling
瞭解內容模型如何搭配Edge Delivery Services專案用於WYSIWYG創作，以及如何模型化您自己的內容。
先決條件 prerequisites
使用WYSIWYG製作與Edge Delivery Services的專案會繼承任何其他Edge Delivery Services專案的大部分機制，與內容來源或製作方法無關。
在開始為專案的內容建立模式之前，請確保先閱讀以下文件。
為了提出一個引人注目的內容模型 (採用與內容來源無關的方式)，了解這些概念至關重要。本檔案提供專為WYSIWYG編寫所實作的機制詳細資訊。
預設內容 default-content
預設內容 是作者直觀地放在頁面上而不加入任何額外語義的內容。這包括文字、標題、連結和影像。此類內容的功能和目的一目了然。
在 AEM 中，此內容是以非常簡單預定義模式的元件來實施，其中包括可以在 Markdown 和 HTML 中序列化的所有內容。
- 文字：RTF 文字 (包括列表元素和粗體或斜體文字)
- 標題：文字，類型 (h1-h6)
- 影像：來源、描述
- 按鈕：文字、標題、url、類型 (預設、主要、次要)
這些元件的模型是使用Edge Delivery Services進行WYSIWYG製作的樣板的一部分。
區塊 blocks
區塊是用來建立具有特定樣式和功能的更豐富內容。與預設內容相比，區塊確實需要額外的語義。區塊可以比喻為是 AEM 頁面編輯器中的元件。
區塊本質上是由 JavaScript 修飾並使用樣式表設定樣式的內容片段。
區塊模式定義 model-definition
搭配Edge Delivery Services使用WYSIWYG製作時，必須明確將區塊內容模型化，才能為作者提供建立內容的介面。 基本上，您需要建立一個模式，以便製作 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 模式 (第 2 步) 中找到。 更具體地說，區塊集合包含廣泛的內容模式組，用於常見使用者介面模式的特定使用案例。
使用Edge Delivery Services進行WYSIWYG製作時，這會產生一個問題：當資訊的製作表單由多個欄位組成，而非像RTF文字那樣編輯內容中的語意標籤時，如何提供引人入勝的語意內容模型。
為了解決這個問題，可以使用三種方法來建立令人信服的內容模式：
類型推斷 type-inference
若是有些值，我們可以從值本身推斷出語義意義。這類值包括：
- 影像 - 如果 AEM 中的資源參照是 MIME 類型並且是以
image/為開頭的資產，參照會呈現為<picture><img src="${reference}"></picture>。 - 連結 - 如果參照存在於 AEM 中且不是影像，或該值是以
https?://或者#為開頭，則參照呈現為<a href="${reference}">${reference}</a>。 - RTF 文字 - 如果裁剪後的值以段落 (
p,ul、ol、h1-h6等) 為開頭，則該值呈現為 RTF 文字。 - 類別名稱 -
classes屬性會視為區塊選項，並在簡單區塊，的資料表標頭中呈現，或是容器區塊中專案的值清單。如果您要以不同方式設定區塊的樣式，，但不需要建立全新的區塊，這會很有用。 - 值清單 - 如果某個值是多值屬性，且第一個值不是前面的任何一個值，則所有值將連接為逗號分隔清單。
其他所有內容都將呈現為純文字。
欄位摺疊 field-collapse
欄位摺疊是一種基於使用尾碼 (Title、Type, MimeType、Alt 和 Text；全部區分大小寫) 的命名慣例且將多個欄位值組合成單一語義元素的機制。任何以這些尾碼結尾的屬性都不會被視為值，而是被視為另一個屬性 (property) 的屬性 (attribute)。
影像 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 特定的屬性也可用：
- 以
modified-time(ISO8601 格式) 顯示的cq:lastModified - 文件最後發佈的時間為
published-time(ISO8601 格式) cq:tags作為cq-tags以逗號分隔的標記 ID 清單。
也可以為自訂頁面中繼資料定義元件模式，這可以讓作者用作 AEM Sites 頁面屬性對話方塊的標記。
若要如此做，請使用 ID page-metadata 建立元件模式。
{
"id": "page-metadata",
"fields": [
{
"component": "text",
"name": "theme",
"label": "Theme"
}
]
}
後續步驟 next-steps
現在您知道了如何模型化內容，您可以使用WYSIWYG編寫專案為自己的Edge Delivery Services建立區塊。
請參閱檔案建立用於萬用編輯器的區塊，瞭解如何建立用於萬用編輯器的區塊(透過Edge Delivery Services專案進行WYSIWYG製作)。
如果您已熟悉建立區塊，請參閱檔案使用Edge Delivery Services進行WYSIWYG編寫的開發人員快速入門手冊，以使用Edge Delivery Services和通用編輯器編寫內容，讓您啟動並執行新的Adobe Experience Manager網站。