[AEM Forms]{class="badge positive" title="適用於AEM Forms)。"}
將最適化Forms主題內嵌於AEM Sites主題
您可以將最適化Forms主題(例如AEM Forms畫布主題)內嵌到您的AEM Sites主題中。 如此一來，單一主題會驅動您的網站頁面，以及這些頁面上內嵌的任何最適化Forms，透過AEM前端管道使用一個組建和一個部署。
本文適用於維護或自訂標準（或自訂） AEM Sites佈景主題，且想加入最適化表單樣式而不需管理個別Forms佈景主題部署的開發人員。
先決條件 prerequisites
開始之前，請確定您已：
- AEM as a Cloud Service已針對您的網站主題設定前端管道。
- 網站主題來源 — 例如標準網站範本主題 （包含具有
theme/、src/theme.scss等src/components/的存放庫）。 - Forms主題來源 - AEM Forms畫布主題 (或其他相容的Adaptive Forms主題)在本機複製或下載。
- Node.js和npm — 建立網站主題（請參閱主題README以取得支援的版本）。
- Maven — 如果您建置完整的網站範本套件（僅限佈景主題工作的選用專案）。
步驟1：建立最適化表單元件資料夾 step-1-create-folder
在您的網站主題存放庫中，建立Forms主題將顯示的資料夾：
theme/src/components/adaptiveform/
所有Forms主題資產將位於此資料夾下方，因此與現有網站元件分開。
步驟2：複製Forms主題元件和影像 step-2-copy-components-and-images
使用您的Forms主題 （例如aem-forms-theme-canvas）和您的 網站主題 路徑：
-
複製元件資料夾
從Forms佈景主題，將src/components/的整個內容複製到網站佈景主題，如下所示：code language-text theme/src/components/adaptiveform/因此您會獲得類似以下的路徑：
code language-text theme/src/components/adaptiveform/button/ theme/src/components/adaptiveform/checkbox/ theme/src/components/adaptiveform/container/ … (one folder per component)
-
複製影像
將Forms主題影像複製到網站主題：code language-text Forms theme: src/resources/images/* Site theme: theme/src/components/adaptiveform/resources/images/建立
theme/src/components/adaptiveform/resources/images/（若不存在），然後複製所有影像資產（例如question.svg、Chevron-Left.svg、busy-state.gif等）。
步驟3：複製變數和mixin step-3-copy-variables-and-mixins
Forms主題在src/site/下使用共用變數和mixin。 僅將這兩個檔案複製到 的 根adaptiveform/ （不在site子資料夾內）：
src/site/_variables.scsstheme/src/components/adaptiveform/_variables.scsssrc/site/_mixin.scsstheme/src/components/adaptiveform/_mixin.scss請 不 複製Forms佈景主題的src/site/資料夾的其餘部分；內嵌的表單樣式只需要這兩個檔案。
步驟4：在SCSS中修正影像路徑 step-4-fix-image-paths
在Forms佈景主題中，元件SCSS檔案通常會參照路徑如./resources/或url(resources/的影像。 複製到網站主題後，這些路徑必須指向theme/src/components/adaptiveform/resources/images/。
標準網站範本主題使用從url()解析theme/src/個路徑的Parcel。 因此，當影像位於theme/src/components/adaptiveform/resources/images/時，請使用路徑components/adaptiveform/resources/images/ （相對於theme/src/）。
在 下每 的.scss尋找並取代theme/src/components/adaptiveform/：
./resources/components/adaptiveform/resources/url(resources/url(components/adaptiveform/resources/url('resources/url('components/adaptiveform/resources/url(../resources/url(components/adaptiveform/resources/範例 — 之前(Forms佈景主題)：
.cmp-adaptiveform-button__questionmark {
background: url(./resources/images/question.svg) center center / cover no-repeat, #969696;
}
在之後（網站主題，adaptiveform/resources/images/中的影像）：
.cmp-adaptiveform-button__questionmark {
background: url(components/adaptiveform/resources/images/question.svg) center center / cover no-repeat, #969696;
}
對adaptiveform/下參考影像（按鈕、摺疊式功能表、精靈、容器、塗鴉等）的每個SCSS檔案重複此步驟。 建議在IDE中尋找/取代theme/src/components/adaptiveform/以上的專案。
步驟5：建立最適化表單入口點SCSS step-5-create-adaptiveform-scss
在網站主題中建立theme/src/components/adaptiveform/_adaptiveform.scss。 此檔案必須：
- 匯入共用的變數和mixin。
- 匯入每個最適化表單元件的主要SCSS檔案。
使用以下專案作為完整進入點（符合與所有核心元件型表單元件的標準整合）：
//== Adaptive Form components (forms theme integration)
// Variables and mixins for adaptive form components
@import 'variables';
@import 'mixin';
//== Core adaptive form components
@import './button/_button.scss';
@import './checkboxgroup/_checkboxgroup.scss';
@import './container/_container.scss';
@import './datepicker/_datepicker.scss';
@import './dropdown/_dropdown.scss';
@import './fileinput/_fileinput.scss';
@import './footer/_footer.scss';
@import './image/_image.scss';
@import './numberinput/_numberinput.scss';
@import './panelcontainer/_panelcontainer.scss';
@import './radiobutton/_radiobutton.scss';
@import './text/_text.scss';
@import './textinput/_textinput.scss';
@import './accordion/_accordion.scss';
@import './tabsontop/_tabsontop.scss';
@import './pageheader/_pageheader.scss';
@import './wizard/_wizard.scss';
@import './title/_title.scss';
@import './telephoneinput/_telephoneinput.scss';
@import './emailinput/_emailinput.scss';
@import './recaptcha/_recaptcha.scss';
@import './verticaltabs/_verticaltabs.scss';
@import './checkbox/_checkbox.scss';
@import './termsandconditions/_termsandconditions.scss';
@import './switch/_switch.scss';
@import './hcaptcha/_hcaptcha.scss';
@import './turnstile/_turnstile.scss';
@import './review/_review.scss';
@import './scribble/_scribble.scss';
@import './datetime/_datetime.scss';
如果您的Forms主題遺漏了某些元件（例如沒有塗鴉或驗證碼），請移除或註解相對應的@import行以避免建置錯誤。 以上清單符合畫布主題結構。
步驟6：匯入網站主題中的最適化表單主題 step-6-import-in-theme-scss
在 theme/src/theme.scss 中，在檔案的 端 新增單一匯入（在其他元件匯入之後）：
//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';
範例 - theme.scss結尾：
// ... existing site component imports ...
@import './components/embed/_embed.scss';
@import './components/pdfviewer/_pdfviewer.scss';
@import './components/socialmediasharing/_social_media_sharing.scss';
//== Adaptive Form components (forms theme)
@import './components/adaptiveform/_adaptiveform.scss';
這是現有網站主題結構中唯一需要的變更；所有表單特定程式碼都會保留在src/components/adaptiveform/之下。
步驟7：建置和部署 step-7-build-and-deploy
-
從主題根目錄建置網站主題：
code language-bash cd theme npm install npm run build
-
透過您現有的前端管道部署。 部署後，相同主題CSS將套用至網站頁面和內嵌的最適化Forms。
疑難排解 troubleshooting
theme/src/components/adaptiveform/resources/images/中。 在.scss下的每個adaptiveform/中，使用url(components/adaptiveform/resources/images/...)，這樣路徑會從theme/src/中解析（使用Parcel標準網站主題組建的必要專案）。 請勿單獨使用../resources/或resources/，除非您的套件組合器解析每個檔案的路徑；然後使用符合您影像資料夾的路徑。_variables.scss或_mixin.scss的「找不到檔案」src/site/複製到theme/src/components/adaptiveform/ （最適化表單根），而不是複製到site子資料夾內。_scribble.scss）的「找不到檔案」theme/src/components/adaptiveform/_adaptiveform.scss中，移除或註解該元件的@import行。theme.scss包含@import './components/adaptiveform/_adaptiveform.scss';行，且主題已重建並部署。cmp-adaptiveform-button）。 如果您看到衝突，請檢查自訂網站CSS是否覆寫這些類別，並調整特殊性或順序。