使用Edge Delivery Services進行WYSIWYG編寫的開發人員快速入門手冊 edge-dev-getting-started

Last update: Wed Sep 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Edge Delivery Services

建立對象：

管理員
開發人員

本指南將引導您開始使用新的Adobe Experience Manager網站(使用Edge Delivery Services和WYSIWYG內容製作的Universal Editor)。

先決條件 prerequisites

在開始執行本指南之前，您應該要熟悉 Edge Delivery Services 的基礎知識並有權存取 Edge Delivery Services，其內容包括：

開發 Edge Delivery Services 時的核心概念 core-concepts

Edge Delivery Services 以區塊概念為基礎。AEM 包含完整的預先定義區塊資料庫，您可以擴充該資料庫來符合專案需求。Edge Delivery Services 專案的程式碼是在 GitHub 中管理。

區塊 blocks

區塊是由 Edge Delivery Services 提供的頁面最基本部分。區塊可封裝驅動內容頁面邏輯元件的樣式和程式碼。

AEM 會提供標準區塊，作為本產品在專案範本中的一部分。這些區塊包括標題、文字、影像、連結、清單等。

TIP

請參閱 Edge Delivery Services 文件的「建置」區段，了解有關區塊以及如何開發 Edge Delivery Services 更多詳細資訊。

Edge Delivery Services 和 GitHub github-edge

Edge Delivery 運用 GitHub，可讓您直接從自己的 GitHub 存放庫管理和部署程式碼。

您的作者可以使用以文件為主的製作來建立內容，或使用 Universal Editor 在 AEM 中建立內容。無論作者如何建立他們的內容，開發人員都可以使用 GitHub 中的 CSS 和 JavaScript 來自訂網站的功能。

系統會自動為您的每個分部建立網站，從內容預覽到生產都包括在內。您放入 GitHub 存放庫的每個資源都可以在您的網站上使用，無需任何建置程序。

TIP

請參閱 Edge Delivery Services 文件的「建置」區段，了解有關區塊以及如何開發 Edge Delivery Services 更多詳細資訊。

WYSIWYG製作和Edge Delivery Services快速入門 getting-started

滿足先決條件並選擇使用Universal Editor 後，您就可以開始製作自己的專案。

建立您的 GitHub 專案 create-github-project

首先，您需要根據 Adobe 範本在 GitHub 上建立一個新專案。

瀏覽至 https://github.com/adobe-rnd/aem-boilerplate-xwalk，然後按一下「使用此範本」並選取「建立新存放庫。
- 您需要登入 GitHub 才能看到此選項。
預設情況下，將會指派存放庫給您。請根據需要進行變更，並提供存放庫名稱和說明，然後按一下「建立存放庫」。
在同一瀏覽器的新標籤中，瀏覽至 https://github.com/apps/aem-code-sync，然後按一下「設定」。
請對您在上一個步驟中建立新存放庫的組織，按一下「設定」。
在 AEM Code Sync GitHub 頁面的「存放庫存取權」底下，選取「僅選取存放庫」，選取您在上一個步驟中建立的存放庫，然後按一下「儲存」。
安裝 AEM Code Sync 後，您會收到確認畫面。返回新存放庫的瀏覽器標籤。
按一下「fstab.yaml」檔案將其打開，然後按一下「編輯此檔案」圖示進行編輯。
編輯 fstab.yaml 檔案以更新專案的掛載點。將預設的 Google 文件 URL 替換為 AEM as a Cloud Service 製作執行個體的 URL，然後按一下「提交變更…」。
- https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
- 變更掛載點會告訴 Edge Delivery Services 在哪裡可以找到網站的內容。
根據需要新增提交訊息，然後按一下「提交變更」，將其直接提交到 main 分支。
返回存放庫的根目錄，按一下「paths.json」，然後按一下「編輯此檔案」圖示。
預設對應將使用存放庫的名稱。使用 /content/<site-name>/:/ 依您的專案需求更新預設對應，然後按一下「提交變更…」。
- 提供您自己的 <site-name>。後續步驟中還會需要它。
- 對應會告訴 Edge Delivery Services 如何將 AEM 存放庫中的內容對應到網站 URL。
根據需要新增提交訊息，然後按一下「提交變更」，將其直接提交到 main 分支。

TIP

如需有關路徑對應的詳細資訊，請參閱檔案Edge Delivery Services的路徑對應。

建立和編輯新的 AEM 網站 create-aem-site

現在您已擁有 GitHub 專案，接著必須建立該專案可以使用的新 AEM 網站。

NOTE

若要使用 Universal Editor 編輯您的網站，您必須使用 Chromium 式瀏覽器。

從GitHub https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases下載使用Edge Delivery Services網站範本編寫的最新WYSIWYG。
登入您的 AEM as a Cloud Service 製作執行個體，並瀏覽至 Sites 主控台，然後點選或按一下「建立 -> 根據範本的網站」。
在建立網站精靈的「選取網站範本」標籤上，按一下「匯入」按鈕以匯入新範本。
上傳您從GitHub下載的WYSIWYG製作與Edge Delivery Services網站範本。
- 該範本只能上傳一次。上傳後，可以重複使用它來建立其他網站。
匯入範本後，該範本將出現在精靈中。點選或按一下以選取該範本，然後點選或按一下「下一步」。
提供以下欄位，然後點選或按一下「建立」。
- 網站標題 - 為網站新增描述性標題。
- 網站標題 - 使用您在上一個步驟中定義的 <site-name>。
- GitHub URL - 使用您在上一個步驟中建立的 GitHub 專案的 URL。
AEM 會透過對話方塊確認建立網站。點選或按一下「確認」以關閉對話方塊。
在網站主控台上，瀏覽到新建立網站的 index.html，然後在工具列中點選或按一下「編輯」。
Universal Editor 會在新標籤中開啟。您可能需要點選或按一下「使用 Adobe 登入」進行身分驗證以編輯您的頁面。

現在您可以使用 Universal Editor 編輯您的網站。如需詳細資訊，請參閱 Universal Editor 文件。

發佈您的新網站 publishing

使用 Universal Editor 編輯完新網站後，您就可以發佈內容。

在網站主控台上，選取所有您為新網站建立的頁面，然後點選或按一下工具列中的「快速發佈」。
點選或按一下確認對話方塊中的「發佈」以啟動該程序。
在同一瀏覽器中開啟一個新標籤並瀏覽到新網站的 URL。
- https://main--<repository-name>--<owner>.hlx.page
查看您發佈的內容。