建立、更新和重構區塊 block-development
使用Experience Modernization Agent進行持續的Edge Delivery Services開發和移轉。 從製作人的需求和實際內容開始，然後選擇支援這些需求的最小實作。
在此工作中，代理程式會遵循內容導向開發(CDD)。 它會從實際內容以及作者建立內容的方式開始，並在之後撰寫程式碼。 這可讓內容模型方便作者使用，並避免只有開發人員才能填入的區塊。
連線預期的存放庫和分支、確認修改許可權，並識別儲存內容的🔗。 在變更共用程式碼或內容模型之前保留基準線。
在建立區塊前撰寫 composition
HTML元素是基本的建置單位（或原子）：標題、段落、連結、清單和影像。 作者應儘可能針對這些使用預設內容（區塊外的內容）。 全域樣式和CSS自訂屬性（或設計權杖）定義共用的印刷樣式、顏色、間距和連結/按鈕簡報。
區塊可讓作者標籤哪些內容構成一個元件，例如一組卡片或輪播，此時程式碼無法將其與周圍的預設內容區分開來。 在您的網站所提供的HTML中，區塊是以區塊名稱作為類別的div。 專案的blocks/<name>/<name>.js和blocks/<name>/<name>.css會在瀏覽器中加以裝飾。 程式碼可辨識預設內容中的模式，但可以建置區塊本身，aem.live會呼叫自動封鎖：例如，AEM樣板會將指向/widgets/頁面的連結轉換為Widget區塊。 保持區塊輕量且重點。 視覺差異本身並不需要新區塊：CSS和JavaScript可以設定預設內容的樣式，而變體或區段樣式則可以有所差異。
David的模型會針對作者可輕鬆建立的內容收集aem.live規則：偏好預設內容、避免區塊內部的區塊、保持區塊和變體的數量較少，以及讓按鈕從它們所在的區塊或區段取得樣式。 當區塊執行與區塊集合中相同的工作時，請重複使用該區塊的內容模型。
在產生程式碼之前，請檢查專案的慣例：
Edge Delivery Services沒有內建的按鈕群組或註腳控制項。 每個都是專案的程式碼套用至所編寫內容的慣例，因此請檢查您的專案如何實作並測試轉譯的結果。
範例：沒有原子區塊的彈性Teaser composition-example
元件式Adobe Experience Manager專案通常會提供Teaser元件，或個別的標題、影像、文字和按鈕元件，讓作者可加以組合。 例如，WKND範例網站的首頁會以核心元件Teaser來提升每個行程。 使用Edge Delivery Services時，作者可在區段或區塊儲存格中，直接撰寫與預設內容相同的元素：
[Image]
## Downhill Skiing Wyoming
A skier's paradise far from crowds and close to nature.
**[View trip](/adventures/downhill-skiing-wyoming)**
_[All adventures](/adventures)_
在目前的AEM樣板中，單獨存在於段落中的連結在格式化後會變成按鈕：主要按鈕為粗體，次要按鈕為斜體，重音按鈕為粗加斜體。 純連結或句子內的連結仍維持連結。 全域樣式可讓這些按鈕在預設內容與內部區塊中具有相同外觀。
作者可以新增、移除或重新排序標題、文字、影像和連結，而不需要新元件。 只有在作者必須標籤哪些元素屬於一起時，才需要Teaser或主圖區塊；CSS和JavaScript也可以將影像放置在預設內容中的文字旁。 專案可以變更這些慣例，因此請要求代理程式在依賴專案指令碼和樣式之前檢查專案指令碼和樣式。
區塊提示 block-prompts
您可以先從簡短提示開始，例如「建立證明區塊」。 新增內容以協助代理程式符合特定內容：
參考頁面或熒幕擷圖會顯示目標外觀。 它不會定義作者編輯的內容，因此也這樣說。
重複使用現有區塊 reuse-blocks
在代理程式建立區塊之前，它會尋找要重複使用或調整的區塊：在您的專案的blocks資料夾中，以及在區塊集合和區塊關係人中，以取得參考代碼。 在移轉期間，它會檢查您的區塊資料庫 （如果有的話）。
- 若要重複使用其他存放庫中的區塊，請先將它們新增至此專案的
blocks資料夾，例如透過將其推送至您的分支，然後將程式碼提取至主控台。 - 在專案指示檔案中記錄您的命名、變體及內容慣例，以便新的區塊會依循這些慣例。
一次建置一個區塊 iterate-blocks
當您需要多個區塊時，請勿在一個提示中要求所有區塊。 請先建置一或兩個代表性區塊，並檢查其內容模型、樣式和製作。 然後繼續其他決策，以便您所做的決策（例如名稱、變體和間距）得以延續。 在移轉中，請先產生並驗證一個代表範本的區塊，然後再驗證其餘的區塊；請參閱大量匯入工作流程。
在移轉前設定區塊行為 block-instructions
移轉會從來源頁面上找到的內容產生區塊。 若要在代理程式產生區塊之前調整區塊建置方式，請執行下列動作：
- 在移轉提示中描述它，例如，哪些來源區段會成為具有變體的一個區塊、哪些部分作者會編輯，或清單必須動態載入其專案中。
- 開始之前，請先在專案指示檔中寫入持續慣例。
- 在Planning檢視中，在產生程式碼之前，請先更正區塊型別和變體。 若要描述區塊應該如何表現，請選取該區塊，選擇新增至聊天，然後撰寫您的要求。
自動模式在執行期間不會接受指示。 之後在主控台中調整其區塊。
建立區塊 create
提供作者工作、範例內容、您想要的行為和設計、儲存內容的位置以及測試頁面。
- 請要求代理程式檢查現有區塊和適當的參考實作。 偏好重複使用或變體而非重複專案。
- 定義作者可瞭解的內容模型。 自然使用標題、連結、影像和分組內容，而不是公開CSS或實作詳細資訊作為欄位。
- 先建立代表性內容。 包含長文字、缺少可選值、多個專案和有意義的影像/連結。
- 僅實作所需的HTML裝飾、CSS和JavaScript。 重複使用專案權杖和共用公用程式。
- 若為Experience Manager製作，請更新來源模型/元件組態，並透過專案工作流程重新產生彙總。 區塊的模型會定義作者在通用編輯器中編輯的欄位；編輯器會讀取模型，而非檔案中的表格，因此只有當區塊的模型定義了這些欄位後，才能在那裡編輯區塊。 檢查轉換和編寫提示。
- 驗證，然後記錄作者可以編輯的範例和允許的變體。
例如：
為我們的檔案式頁面建立證明區塊。 從下列實際內容範例開始：
/about和/customers。 請先檢查現有區塊。 作者需要編輯報價、歸因和選用的影像，而不需要配置版面。 使用我們的Token。 包括長文字和無影像範例。 請勿上傳、推送或發佈。
將範例路徑取代為您自己的路徑。
產生的結果是可重複使用的程式碼、作者需要編輯的模型，以及作者可編輯的範例內容。
代理程式提供的區塊 block-deliverables
- 區塊檔案：當移轉建立區塊時，它會從您頁面上找到的內容模型產生區塊，並新增開發人員的README和作者的撰寫指南。 檢閱兩者，在變更區塊時保持最新狀態，並從專案的指示檔案中參照它們，以便後續對話遵循區塊慣例。
- 範例內容：代理程式會為區塊產生範例內容，以便您可以使用真實的內容來預覽。 在網站目錄中，使用 檢視範例 開啟區塊的範例頁面。
- 區塊資料庫：區塊資料庫可讓作者找到您的自訂區塊，並將其插入頁面，範例內容會顯示每個區塊的使用方式。 若要進行設定，請要求代理程式為Experience Workspace （取代檔案製作）或Experience Manager製作產生區塊程式庫，包括範例內容和程式庫設定。 區塊程式庫設定是可為您的專案開啟的選用功能。 檢查編寫體驗中的結果。 將設定中的 資料庫URL 設定為資料庫的
library.json檔案，其中會列出可用的區塊、其變數以及範例內容。
更新現有區塊 update
提供區塊名稱、目前的範例/變體、要求的變更和相容性要求。
- 使用區塊、共用樣式/公用程式及現有測試來識別頁面。
- 說明必須保持不變的內容，包括現有的內容結構和互動。
- 進行變更。 簡報變更僅限CSS或JavaScript，因此不會接觸內容模型或需要重新匯入內容。
- 針對代表性內容測試已變更的行為和未受影響的變體。
- 如果需要進行不相容的模型變更，請先同意現有內容的移轉方式，以及接受編寫影響的人員，再套用內容。
例如：
更新
cards以便核准的次要連結變體能在/products和/blog上運作。 保留現有的預設和影像變體及其編寫的內容。 檢查鍵盤互動和行動包裝。 請勿重寫其他頁面或上傳內容。
將範例路徑取代為您自己的路徑。
交出已變更的行為、受影響的變體、作者指示及任何必要的內容變更。
重新調整而不變更結果 refactor
重構可改善實作，同時保留一致的行為。 這與重新分組目錄、重新設計區塊或移轉其內容模型不同。
- 命名要改善的程式碼及原因，例如重複的裝飾邏輯。
- 記錄不得變更的內容：內容模型、外觀、回應式行為、協助工具、其他程式碼所依賴的選擇器和API，以及整合。
- 建立基準線範例和現有的測試。 在合併共用程式碼和樣式之前，請先檢查其使用情況。
- 要求達到目標的最小重構。 保持任何必要的行為/模型變更明確且分開。
- 比較受影響頁面和變體的前後差異、執行專案檢查及檢查差異。
例如：
在
blocks/cards/cards.js和blocks/teaser/teaser.js中重構重複的卡片裝飾邏輯。 保留已編寫的模型、輸出語意、外觀、連結行為、鍵盤存取和Analytics勾點。 使用/products和/blog作為回歸範例。 報告相容性風險和測試結果。 請勿移轉內容或推送變更。
將範例路徑取代為您自己的路徑。
沒有單獨的重構命令：您在聊天中詢問，而代理程式會在您設定的限制內，以開發人員的身份變更程式碼。
建置動態區塊 dynamic-blocks
動態區塊會在瀏覽器中載入或計算其內容，而非只顯示作者所寫的內容。 例如，最新文章的清單、搜尋結果或篩選的清單。 要求代理程式在移轉後像任何其他區塊一樣建立區塊，或變更移轉的區塊以便以此方式運作。 說明：
- 資料來源，例如網站的查詢索引、以JSON格式傳送的試算表或API。
- 哪些作者控制，例如專案數、要清單的資料夾或排序順序。 代理程式會將這些設定建模為組態區塊：索引鍵和值的兩欄表格。 它僅適用於變更區塊載入或顯示內容的設定，並使用變體來區分樣式差異。
- 每個專案顯示的內容，以及沒有結果或無法載入資料時區塊顯示的內容。
例如：
建立文章清單區塊，顯示網站查詢索引中最新的六篇文章，包含影像、標題和日期。 作者設定要在索引鍵值表中列出的文章數和資料夾。 沒有文章時顯示簡短訊息。 在/news上測試。 請勿上傳、推送或發佈。
查詢索引僅包含已發佈的頁面，且僅包含其設定所擷取的特性，因此請在測試前檢查兩者。 驗證空白和錯誤狀態以及一般結果。
連線服務與應用程式 integrations
代理程式會撰寫將您的網站連線到其他系統的程式碼，包括其附加元件未涵蓋的系統。 超越Edge Delivery Services的工作說明如何透過與它整合來運作。 本節說明該程式碼的執行位置。
Edge Delivery Services頁面會在訪客的瀏覽器中執行此程式碼，因此每個連線都是區塊、Widget或專案指令碼的一部分。 如果代理程式必須在運作時呼叫需要金鑰的API，請在 設定 中新增金鑰，而不是在聊天中新增金鑰。
- 應用程式：表單、搜尋頁面、商店定位器或帳戶區域幾乎沒有編寫的內容。 將其建置為Widget：存放庫的
/widgets/資料夾中的獨立應用程式，作者透過插入其連結將其置於頁面上。 現有應用程式（例如使用React建置的應用程式）可透過相同方式改寫。 - API：區塊或Widget會從瀏覽器呼叫API。 API必須接受來自您網站網域的請求，包括預覽和即時網站。 如果其他網站必須讀取您網站的資源，請針對所需的路徑設定自訂標頭，絕不針對所有原始網站。
- 密碼：存放庫中的所有內容都會傳送到瀏覽器，因此無法儲存API金鑰或權杖。 當API需要秘密時，請透過儲存該秘密的伺服器端服務（例如Adobe App Builder或API Mesh）呼叫它，然後讓區塊呼叫該服務。
- 地圖、視訊和其他內嵌服務：某些服務會發行給瀏覽器的金鑰，例如許多地圖服務，而您會將每個金鑰限制在您網站的網域，包括預覽和即時網站。 該限制會保護金鑰，因為每個訪客都可以讀取。 在訪客到達服務時而非在頁面其餘部分載入服務，以免減慢頁面速度。
- Commerce： Commerce頁面涵蓋Adobe Commerce店面的附加元件和其他商務平台的路線。
- Forms： 表單提交內容涵蓋Adobe Experience Manager Forms的附加元件，以及如何將表單連線到任何目的地。
- Analytics、標籤管理和同意：請在頁面轉譯後載入這些指令碼，以免減慢速度。 檢視保留Lighthouse分數100。 使用自動模式的包含整合，代理程式會新增支援的設定，在您開啟這些設定之前會關閉。
附加元件是可選功能，當工作需要時，代理程式會提供這些功能，以便開啟。 哪些系統連線、誰擁有這些系統，以及誰接受結果是專案決策。 檢視專案剩餘工作。
表單提交 form-submissions
Edge Delivery Services會傳送表單，但不會儲存提交內容或執行提交後的專案。 在來源網站上，伺服器處理每次提交，而頁面匯入無法看見該伺服器。 不論是否移轉，在任何Edge Delivery Services網站上，連線目的地都是相同工作，而且代理程式是一般用途的程式碼代理程式，因此您隨時都可以要求。
Forms附加元件的功能 forms-add-on
Forms附加元件是專為授權Adobe Experience Manager Forms的組織所建置。 它為Experience Manager Forms的Edge Delivery Services準備表單。 對於具有兩個或多個欄位的每個來源表單，它會在表單定義中記錄欄位，該表單會在頁面旁邊儲存一個工作表，其中每個欄位有一列：其名稱、標籤、型別、選項和驗證。 接著會在連結至定義的頁面上放置表單區塊。 欄位和標籤是該定義中的內容，而不是表單後端中保留的資料。 每個表單都使用相同的區塊（名為form），其定義會決定顯示的內容，因此代理程式不會建立區塊的變體。 附加元件會將每個定義儲存在頁面的資料夾中，以來源表單命名，而在其他頁面上找不到相同的表單。 若要將數個頁面顯示在一個位置的表單維持不變，請要求代理程式將這些頁面連結至單一定義。
如果專案還沒有表單區塊，附加元件會新增Experience Manager Forms的表單區塊。 該區塊會將所有提交內容傳送至Forms提交服務，該服務會依據表單定義的路徑來識別表單，並將資料儲存在連結至定義提交列的試算表中。 附加元件不會連結試算表，也不會保留來源表單提交到的位址，因此在表單上線前先連線目的地。 請參閱選擇目的地。 附加元件本身不需要授權，但表單區塊和Forms提交服務需要Experience Manager Forms授權。
如果沒有Experience Manager Forms，附加元件的欄位清查仍然有幫助：它擷取每個表單的欄位、標籤、型別、選項和驗證。 代理程式沒有適用於其他表單平台的技能，所以應先閱讀您平台的檔案，如超越Edge Delivery Services的工作中所述。 接著，它可以建立可讀取相同定義並提交至平台的表單區塊，或內嵌平台託管的表單。
附加元件會讀取來源伺服器從HTML傳送的每個表單，包括來自協力廠商提供者的表單（當其欄位存在於該HTML中時）。 指令碼新增到瀏覽器中的表單（例如內嵌自行銷平台的表單）不在該HTML中，因此附加元件不會匯入它。 請要求代理程式重建該表單，或從您的平台再次內嵌該表單。
選擇目的地 form-destination
例如，潛在客戶表單屬於您的團隊已在行銷自動化平台或客戶關係管理(CRM)系統中處理潛在客戶的地方：
- Adobe Marketo Engage
- Salesforce，透過Sales Cloud或Marketing Cloud帳戶參與
- Microsoft Dynamics 365
- HubSpot
- Oracle Eloqua
當提交作業必須連線至數個系統時，請將它們傳送至整合平台（例如Adobe Workfront Fusion或Microsoft Power Automate）或您自己的API。 透過Experience Manager Forms，Forms提交服務會將提交內容儲存在試算表中或透過電子郵件傳送，然後提交在Experience Manager上執行的動作，以將提交內容轉送至其他系統，例如Marketo Engage、Workfront Fusion、Power Automate或REST端點。 請參閱設定提交動作。
這些平台中，有許多會在表單端點接受來自瀏覽器的提交作業，且這些提交作業不需要加密。 如果平台的API需要金鑰，請透過儲存該金鑰的伺服器端服務傳送提交內容，如上方 密碼 所述。
告知代理程式：
- 目的地：平台與接收資料的表單、清單或行銷活動，及其端點與檔案，或伺服器端服務的URL。
- 欄位對應：哪個表單欄位會進入哪個平台欄位、哪些欄位是必要欄位及其格式。
- 隱藏值：訪客未輸入的值，例如潛在客戶來源、促銷活動、頁面URL和造訪的UTM引數。
- 同意：選擇加入核取方塊、核准的措辭，以及隱私權原則的連結。
- 垃圾郵件保護：您的平台支援的方法，例如CAPTCHA或隱藏的蜜罐欄位。
- 提交後：確認訊息或感謝頁面，以及提交失敗時訪客看到的內容。
- 測試：測試表單或沙箱，以及如何標籤測試專案。
例如：
請先在
https://developer.example.com/forms閱讀我們的CRM有關表單提交的檔案。 然後將/contact上的表單連線至https://forms.example.com/submit/contact-us的CRM表單contact-us。 將名字、姓氏、電子郵件、公司及國家/地區對應至CRM欄位FirstName、LastName、Company及Country；需要電子郵件和公司。 為潛在客戶來源「網站」、頁面URL和造訪的UTM引數新增隱藏欄位。 顯示此同意核取方塊，取消勾選：「我同意透過電子郵件接收產品新聞。」 提交成功後，顯示「謝謝，我們會聯絡。」；如果提交失敗，請保留訪客的輸入，並重試顯示錯誤。 在https://sandbox.example.com針對CRM的沙箱進行測試。 請勿上傳、推送或發佈。
將範例URL、名稱和措辭替換為您自己的名稱。
代理程式會更新表單定義及表單區塊的程式碼。 它也可以編寫伺服器端服務的程式碼，您的團隊會使用密碼部署該服務。 在接收平台中，其管理員會設定：
- 表單或端點，以及其預期的欄位及其驗證。
- 允許提交的網域：您的預覽和已上線的網站，以及您的生產網域。
- 伺服器上的垃圾郵件篩選。 簽入瀏覽器可協助訪客填寫表單；他們不保護平台。
- 新提交內容如何與現有連絡人比對，好讓一個人不會變成兩個銷售機會。
- 潛在客戶來源和促銷活動歸因、評分，以及路由給正確的銷售團隊。
- 確認電子郵件、內部通知和後續計畫。
- 同意記錄，以及個人資料的保留位置及保留時間。
從預覽網站提交測試專案。 檢查它是否隨每個欄位一起遞送、啟動預期的工作流程，並標籤為測試。 在交換器之後對生產網域重複檢查。
Commerce 頁面 commerce-pages
商務頁面附加元件可擴充Experience現代化代理程式的Adobe Commerce店面頁面匯入工作流程。 它會從訊號（例如產品結構化資料、URL模式以及數量欄位、產品格線或篩選器等頁面元素）識別來源網站上的產品詳細資訊頁面和產品清單頁面（無論執行哪個平台）。 它會將每個區段重建為頁面，在商業區塊中僅保留產品的SKU或類別路徑，並在標準區塊中保留周邊內容，例如橫幅和促銷活動。 產品資料不會匯入：商業區塊會在訪客每次開啟頁面時從目錄載入。 代理程式會使用標準工作流程移轉其他頁面。
附加元件不會寫入商務區塊。 它會使用專案已擁有的產品和清單區塊，否則會預期commerce storefront樣板的product-details和product-list-page區塊。 從該樣板開始專案，並將店面連線至您的目錄，以便當您檢查產品時匯入的頁面會顯示產品。 附加元件本身不需要授權，但店面的插入式元件需要Adobe Commerce as a Cloud Service或Adobe Commerce Optimizer授權。 Adobe Commerce Optimizer還可以在其他商務平台處理購物車、結帳和訂單時提供目錄。 請參閱後端選項。
對於另一個沒有Adobe Commerce Optimizer的Commerce平台，該附加元件不適用。 代理程式會建置從平台API載入其資料的產品和清單區塊，並依照超越Edge Delivery Services中的說明從平台檔案運作。
附加元件可搭配檔案型內容使用。 對於使用Experience Manager編寫的專案，代理程式會使用標準移轉，這會匯入每個產品頁面目前顯示的內容。 請與您的團隊決定這些頁面如何連線至目錄。
驗證並傳遞 validation
使用專案的宣告lint和測試命令，加上瀏覽器實際內容的檢查。 要求代理程式報告命令和結果，而不僅僅是測試命令和結果。
檢查：
- 所有受影響的變體和內容邊緣案例。
- 案頭/行動版面配置、長內容及影像行為。
- 鍵盤存取、焦點、語意、標籤和閱讀順序。
- 現有的互動和整合。
- 當模型或內容變更時，作者可以在編輯器中編輯、儲存和重新開啟內容，且內容會正確預覽。
- 相關的效能檢查且沒有新的瀏覽器錯誤。
如果檢查失敗，請保留失敗的範例並修復最小的受影響圖層。 將過時的預覽/程式碼分支問題與模型或實施失敗區分開來。 重新執行失敗檢查和相關的回歸。
檢閱差異、僅暫存預定檔案，以及推入存放庫原則。 僅在獲得授權時上傳測試或生產內容；程式碼推送不會儲存它。 合併至main後，區塊代碼會套用至使用區塊之已上線網站上的每個頁面；請參閱變更如何上線。
若要復原，請透過Git還原程式碼，並分別還原已變更的遠端內容。 保留相容的舊範例，直到接受任何必要的內容移轉為止。
使用專案交接來保留變更的檔案、模型、範例、驗證結果、剩餘風險，以及下一個人員或代理程式的復原方法。