使用通用編輯器開始使用 AEM Forms 適用的 Edge Delivery Services

1. 存取 AEM Forms 樣板專案範本

   • 前往 https://github.com/adobe-rnd/aem-boilerplate-forms

   
   圖：含有預先設定的自適應表單區塊的 AEM Forms 樣板專案存放庫

2. 建立您的存放庫

   • 按一下「使用此範本」>「建立新存放庫」。

   
   圖：使用範本建立新的存放庫

3. 設定存放庫

   • 所有者：選取您的 GitHub 帳戶或組織
   • 存放庫名稱：選擇一個說明性名稱 (例如 my-forms-project)
   • 可見度：選取「公開」(Edge Delivery Services 建議使用)
   • 按一下「建立存放庫」

   
   圖：將新存放庫的可見度設為公開

驗證： ​確認您擁有以 AEM Forms 樣板專案範本為基礎的新 GitHub 存放庫。

AEM Code Sync 會自動同步您的 AEM 製作環境和 GitHub 存放庫之間的內容變更。

1. 安裝 GitHub 應用程式

   • 前往 https://github.com/apps/aem-code-sync/installations/new

2. 設定存取權限

   • 選取「僅選取存放庫」
   • 選擇您新建立的存放庫
   • 按一下「儲存」

   
   圖：安裝 AEM Code Sync 並有特定存放庫的權限

查核點： AEM Code Sync 現已安裝並可存取您的存放庫。

fstab.yaml檔案將您的 GitHub 存放庫連接到 AEM 製作環境以進行內容同步。

1. 導覽到您的存放庫

   • 前往新建立的 GitHub 存放庫
   • 您應該會看到 AEM Forms 樣板專案檔案

2. 建立 fstab.yaml 檔案

   • 在根目錄中按一下「新增檔案」>「建立新檔案」
   • 將檔案命名為 fstab.yaml

   
   圖：建立 fstab.yaml 設定檔案

3. 新增您的 AEM 連線詳細資訊

   複製貼上以下設定，取代預留位置：

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   取代：

   • <aem-author>：您的 AEM as a Cloud Service 作者 URL (例如 author-p12345-e67890.adobeaemcloud.com)
   • <owner>：您的 GitHub 使用者名稱或組織
   • <repository>：您的存放庫名稱

   範例：

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   圖：設定 AEM 整合的掛載點

4. 認可設定

   • 新增認可訊息：「新增 AEM 整合設定」
   • 按一下「認可新檔案」。

   
   圖：認可 fstab.yaml 設定

驗證： ​確認您的 GitHub 存放庫與 AEM 的連線。

1. 存取 AEM Sites 控制台

   • 登入您的 AEM as a Cloud Service 製作實例。
   • 導覽至「Sites」

   
   圖：存取 AEM Sites 控制台

2. 開始建立網站

   • 按一下「建立」>「使用範本建立網站」。

   
   圖：使用範本建立新網站

3. 選取 Edge Delivery Services 範本

   • 選擇 Edge Delivery Services 網站 ​範本
   • 按一下「下一步」。

   
   圖：選取 Edge Delivery Services 網站範本

   note note
   NOTE
   範本無法使用？ 如果您沒有看到 Edge Delivery Services 範本：
   請按一下「匯入」來上傳範本 從 GitHub 發行版本下載範本

4. 設定您的網站

   輸入下列資訊：

   table 0-row-3 1-row-3 2-row-3 3-row-3
   欄位	值	範例
   網站標題	網站的說明性名稱	「我的表單專案」
   網站名稱	URL 易記名稱	「my-forms-project」
   GitHub URL	您的存放庫 URL	https://github.com/mycompany/my-forms-project

   
   圖：設定新的 AEM 網站並整合 GitHub

5. 完成網站建立

   • 審閱您的設定
   • 按一下「建立」。

   
   圖：確認建立網站

   成功！ ​您的 AEM 網站現已建立並連線至 GitHub。

6. 在通用編輯器中開啟

   • 在 Sites 控制台中，找到您的新網站
   • 選取 index 頁面
   • 按一下「編輯」

   
   圖：開啟您的網站進行編輯

   通用編輯器在新標籤中開啟，提供 WYSIWYG 製作功能。

   
   圖：您的網站已在通用編輯器中開啟，以進行 WYSIWYG 編輯

驗證： ​確認您的 AEM 網站已準備好進行表單製作。

發佈後，您的網站可以在 Edge Delivery Services 上供全球存取。

1. 從 Sites 控制台快速發佈

   • 返回 AEM Sites 控制台
   • 選取您的網站頁面 (或使用 Ctrl+A 選擇全部)
   • 按一下「快速發佈」

   
   圖：選取要快速發佈的頁面

2. 確認發佈

   • 在確認對話框中，按一下「發佈」

   
   圖：確認發佈動作

   替代方案： ​您也可以使用發佈按鈕直接從通用編輯器發佈。

   
   圖：從通用編輯器直接發佈

3. 存取您的上線網站

   您的網站現已上線：

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL 結構說明：

   • <branch>：GitHub 分支 (通常為 main)
   • <repo>：您的存放庫名稱
   • <owner>：您的 GitHub 使用者名稱或組織
   • <site-name>：您的 AEM 網站名稱

   範例：

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

驗證： 確認您的網站已在 Edge Delivery Services 上線。

下一步：建立第一份表單

1. 導覽到您的本機專案

   code language-bash
   cd /path/to/your/aem-project

2. 從 AEM Forms 樣板專案下載必要檔案

   從 AEM Forms 樣板專案存放庫複製以下檔案：

   table 0-row-3 1-row-3 2-row-3 3-row-3
   來源	目的地	用途
   blocks/form/	blocks/form/	核心表單功能
   scripts/form-editor-support.js	scripts/form-editor-support.js	通用編輯器整合
   scripts/form-editor-support.css	scripts/form-editor-support.css	編輯器樣式

3. 更新編輯器支援

   • 用 AEM Forms 樣板專案中的 editor-support.js取代 /scripts/editor-support.js 檔案

驗證： ​確認表單區塊檔案在您的專案中。

1. 更新區段模型

   開啟 /models/_section.json 並將表單元件新增至篩選器：

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   其作用： ​在通用編輯器元件選擇器中啟用表單元件。

驗證： ​確認表單元件出現在通用編輯器中。

為什麼執行此步驟： ​防止來自表單特定檔案的 linting 錯誤並設定適當的驗證規則。

1. 更新 .eslintignore

   將這幾行加入 /.eslintignore：

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. 更新 .eslintrc.js

   將這些規則加入 /.eslintrc.js 中的 rules 物件：

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

驗證： ​確認 ESLint 可與表單元件搭配使用。

1. 安裝相依性並建置

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   其作用：

   • 使用表單元件更新 component-definition.json
   • 使用表單模型產生 component-models.json
   • 使用篩選規則建立 component-filters.json

2. 驗證所產生的檔案

   檢查專案根目錄中的這些檔案是否包含與表單相關的物件：

   • component-definition.json
   • component-models.json
   • component-filters.json

3. 認可並推送變更

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

驗證： ​確認您的專案包含表單功能。

1. 在通用編輯器中開啟頁面

   • 導覽至 AEM 中的 Sites 控制台
   • 選取要新增表單的頁面 (例如 index)
   • 按一下「編輯」

   您的頁面在通用編輯器中開啟，以進行 WYSIWYG 編輯。

2. 新增自適應表單元件

   • 開啟​ 內容樹 ​面板 (左側邊欄)
   • 導覽到您想要新增表單的區段
   • 按一下「新增」(+) 圖示
   • 從元件清單中選取​ 自適應表單

   
   圖：將自適應表單區塊新增至頁面

驗證： ​確認您有一個空的表單容器。

1. 導覽到您的表單區塊

   • 在內容樹中尋找您最近新增的自適應表單區段

   
   圖：內容樹中的自適應表單區塊

2. 新增表單元件

   您可以用兩種方式新增元件：

   方法 A：按一下來新增

   • 按一下表單區段中的「新增」(+) 圖示
   • 在​ 自適應表單元件 ​清單中選取元件

   方法 B：拖放

   • 將元件直接從元件面板拖曳到表單中

   
   圖：新增元件至表單中

   建議的啟動元件：

   • 文字輸入 (姓名、電子郵件)
   • 文字區域 (用於訊息)
   • 提交按鈕

3. 設定元件屬性

   • 選取任何表單元件

   • 使用​ 屬性 面板 (右側邊欄) 進行設定：

     • 標籤和預留位置
     • 驗證規則
     • 必填欄位設定

   
   圖：設定元件屬性

4. 預覽您的表單

   您的表單大概是下面這個樣子：

   
   圖：使用通用編輯器建立的範例表單

驗證： ​確認您的表單已準備好發佈。

1. 從通用編輯器發佈

   • 在通用編輯器中按一下「發佈」按鈕

   
   圖：從通用編輯器發佈表單

2. 確認發佈

   • 在確認對話框中，按一下「發佈」

   
   圖：確認發佈動作

   您將看到確認出版的成功訊息。

   
   圖：出版成功確認

3. 檢視您的上線表單

   您的表單現已上線，網址：

   code language-none
   https://<branch>--<repo>--<owner>.aem.live/content/<site-name>/

   範例 URL：

   code language-none
   https://main--my-forms-project--mycompany.aem.live/content/my-forms-project/

   
   圖：您在 Edge Delivery Services 上發佈的表單頁面

恭喜！ ​您的表單現已上線並準備收集提交內容。

1. 安裝 AEM CLI

   AEM CLI 簡化本機開發任務：

   code language-bash
   npm install -g @adobe/aem-cli

2. 原地複製您的存放庫

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   使用您實際的 GitHub 詳細資訊取代 <owner> 和 <repo>。

3. 啟動本機開發伺服器

   code language-bash
   aem up

   這樣會啟動具有熱重新載入功能的本機伺服器。

4. 進行自訂

   • 編輯 blocks/form/ 目錄裡的檔案以修改表單樣式和行為
   • 修改 form.css 以自訂樣式
   • 更新 form.js 來自訂行為

   在您的瀏覽器中​ 立即查看變更，網址：http://localhost:3000

5. 部署您的變更

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   您可以透過以下位置檢視變更：

   • 預覽：https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • 生產：https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

問題： ​建置失敗或 linting 錯誤

解決方案 1：處理 Linting 錯誤

如果遇到 linting 錯誤：

1. 在專案根目錄中開啟 package.json

2. 找到 lint 指令碼：

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. 暫時停用 linting：

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. 認可並推送變更

解決方案 2：模組路徑錯誤

如果您看到「無法解析模組『/scripts/lib-franklin.js』的路徑」：

1. 導覽至 blocks/form/form.js

2. 更新匯入語句：

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

問題： ​表單提交無法運作

解決方案：

• 確認您有一個提交按鈕元件
• 檢查表單動作 URL 設定
• 確認表單驗證規則
• 先在預覽模式下測試

問題： ​樣式問題

解決方案：

• 檢查 blocks/form/ 中的 CSS 檔案路徑
• 清除瀏覽器快取
• 驗證 CSS 語法
• 在本機開發環境中測試

問題： ​表單元件未出現在通用編輯器中

解決方案：

• 確認 AEM Code Sync 是否已安裝並正在執行
• 檢查 fstab.yaml 具有正確的 AEM 作者 URL
• 確保您的 AEM 實例已啟用搶先體驗功能
• 確認 component-definition.json 包括表單元件

問題： ​發佈後看不見變更

解決方案：

• 等待內容傳遞網路快取重新整理
• 檢查瀏覽器快取 (嘗試無痕視窗/私人模式)
• 確認是否使用正確的 URL 格式