建立經檢測適用 Universal Editor 的區塊 create-block

瞭解如何在WYSIWYG製作和Edge Delivery Services專案中，建立可搭配通用編輯器使用的區塊。

先決條件 prerequisites

本指南提供逐步指示，說明如何透過Edge Delivery Services專案在WYSIWYG製作中建立為通用編輯器檢測的區塊。 內容包括新增元件、載入 Universal Editor 中的元件定義、發佈頁面、實施區塊裝飾和樣式、將變更引入生產以及進行變更驗證。完成本指南後，您可以為自己的專案建立和部署新區塊。

本指南必須具備WYSIWYG製作與Edge Delivery Services專案及通用編輯器的現有知識。 在開始執行本指南之前，您應該有 Edge Delivery Services 存取權並熟悉基本使用需知，包括：

本指南以開發人員快速入門手冊(使用Edge Delivery Services進行WYSIWYG製作)中完成的工作為基礎。

為您的專案新增區塊 add-block

在本指南中，您將建立一個區塊並在頁面上呈現令人難忘的引述。

為了簡化此範例，所有變更均針對專案儲存庫的 main 分支進行。當然，進行實際專案時應該遵照開發最佳實務進行，在不同的分支上進行開發，並在合併到main之前透過提取請求檢查所有變更。

Adobe 建議您採用三階段方法來開發區塊：

以下引述區塊範例即遵照此方法進行。

建立區塊定義和模式 create-block-model

1&amp；period；在本機複製您在開發人員快速入門手冊中建立的GitHub專案，以使用Edge Delivery Services進行WYSIWYG製作，並在您選擇的編輯器中開啟。

2&amp；句點；編輯專案根目錄中的component-definition.json檔案，並為您的新報價區塊新增下列定義並儲存檔案。

JSON範例

code language-json
{ "title": "Quote", "id": "quote", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Quote", "model": "quote", "quote": "<p>Think, McFly! Think!</p>", "author": "Biff Tannen" } } } } }

熒幕擷圖

3&amp；句點；編輯專案根目錄中的component-models.json檔案，並為您的新報價區塊新增下列模型定義並儲存檔案。

JSON範例

code language-json
{ "id": "quote", "fields": [ { "component": "text-area", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text-input", "valueType": "string", "name": "author", "label": "Author", "value": "" } ] }

熒幕擷圖

4&amp；句點；編輯專案根目錄中的component-filters.json檔案，並將引號區塊新增至篩選定義，以允許將區塊新增至任何區段並儲存檔案。

JSON範例

code language-json
{ "id": "section", "components": [ "text", "image", "button", "title", "hero", "cards", "columns", "quote" ] }

熒幕擷圖

5&amp；句點；使用Git，將這些變更提交至您的main分支。

使用區塊建立內容。 create-content

現在您的基本引述區塊已定義並提交給範例專案，您可以將引述區塊新增至現有頁面。

區塊的樣式 style-block

現在您已經有了一個可用的引述區塊，您可以對區塊套用樣式。

1&amp；句號；返回專案的編輯器。

2&amp；句點；在blocks資料夾下建立quote資料夾。

3&amp；句點；在新的quote資料夾中，新增quote.js檔案以新增下列JavaScript並儲存檔案來實施區塊裝飾。

JavaScript範例

code language-javascript
export default function decorate(block) { const [quoteWrapper] = block.children; const blockquote = document.createElement('blockquote'); blockquote.textContent = quoteWrapper.textContent.trim(); quoteWrapper.replaceChildren(blockquote); }

熒幕擷圖

4&amp；period；在quote資料夾中，新增一個quote.css檔案，藉由新增下列CSS程式碼來定義區塊的樣式並儲存檔案。

CSS範例

code language-css

.block.quote { background-color: #ccc; padding: 0 0 24px; display: flex; flex-direction: column; margin: 1rem 0; } .block.quote blockquote { margin: 16px; text-indent: 0; } .block.quote > div:last-child > div { margin: 0 16px; font-size: small; font-style: italic; position: relative; } .block.quote > div:last-child > div::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; height: 5px; width: 30px; background-color: darkgray; }

熒幕擷圖

5&amp；句點；使用Git，將這些變更提交至您的main分支。

6&amp；句號；返回至Universal Editor的瀏覽器索引標籤（您編輯專案的頁面），並重新載入頁面以檢視您設定樣式的區塊。

7&amp；句點；請參閱頁面上目前樣式的引號區塊。

8&amp；period；導覽至發佈的頁面，確認變更已推送至生產環境。 該連結類似 https://<branch>--<repo>--<owner>.hlx.page

恭喜！您現在擁有一個完全可使用且附樣式的引述區塊。您可以此範例為基礎，用來設計您自己專案的特定區塊。

區塊選項 block-options

如果您需要區塊的外觀或行為因特定情況而略有不同，但差異不足以成為新的區塊，您可以讓作者從區塊選項中進行選擇。

將classes屬性新增至區塊後，該屬性會呈現在簡單區塊的表格標頭中，或呈現為容器區塊中專案的值清單。

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

使用其他工作分支 other-branches

為了簡單起見，本指南會讓您直接使用main分支。對於範例存放庫中的實驗，這通常不是問題。進行實際專案工作時應該遵照開發最佳實務進行，在不同的分支上進行開發，並在合併到main之前透過提取請求檢查所有變更。

當你是在main分支上開發時，您可以在 Universal Editor 位置列中附加 ?ref=<branch>，以便從您的分支載入頁面。<branch> 是分支名稱，因為此分支會用於專案的預覽或即時 URL，例如 https://<branch>--<repo>--<owner>.hlx.page。

只有模式合併到main分支時，才支援發佈內容及新模式。

後續步驟 next-steps

既然您已經知道如何建立區塊，那麼了解如何以語義方式建立內容模式並實現精益開發人員體驗就很重要。

請參閱檔案使用Edge Delivery Services專案進行WYSIWYG製作的內容模型，瞭解內容模型如何用於使用Edge Delivery Services專案進行WYSIWYG製作。