版本 | 文章連結 |
---|---|
AEM 6.5 | 按一下這裡 |
AEM as a Cloud Service | 本文章 |
您可以建立並套用主題來設定最適化表單的樣式。 主題包含元件和面板的樣式詳細資訊。 樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。套用主題時,指定的樣式會反映在對應的元件上。主題是獨立管理,不需參照最適化表單,且可在多個最適化Forms中重複使用。
Forms (如Cloud Service所提供)下列核心元件型最適化Forms的主題:
主題是一個套件,其中包含定義最適化Forms樣式的CSS檔案、JavaScript檔案和資源(如圖示)。 最適化表單主題會依循特定組織,包含下列元件:
src/theme.scss
:此資料夾包含對整個主題有廣泛影響的CSS檔案。 它是定義和管理佈景主題樣式和行為的集中位置。 透過編輯此檔案,您可以進行在整個主題中普遍套用的變更,這會影響最適化Forms和AEM Sites頁面的外觀和功能。
src/site
:此資料夾包含套用至整個AEM網站頁面的CSS檔案。 這些檔案包含程式碼和樣式,會影響AEM網站頁面的整體功能和版面。 此處所做的任何修改會反映在您的網站的所有頁面中。 [何時使用?]
src/components
:此資料夾中的CSS檔案是針對個別AEM核心元件所設計。 元件的每個專用資料夾都包含 .scss
在最適化表單中設定該特定元件樣式的檔案。 例如,/src/components/accordion/_accordion.scss檔案包含Adaptive Forms摺疊式功能表元件的樣式資訊。
src/resources
:此資料夾包含靜態檔案,例如圖示、標誌和字型。 這些資源用於增強主題的視覺元素和整體設計。
Forms如Cloud Service所提供,以下是核心元件型最適化Forms的主題。
您可以 自訂任何這些主題以建立新主題.
自訂主題是指修改及個人化主題外觀的程式。 自訂主題時,您可以變更其設計元素、版面、顏色、印刷樣式,有時也會變更基礎程式碼。 它可讓您為網站或應用程式建立獨一無二且量身打造的外觀,同時維持主題提供的基本結構和功能。
瞭解先決條件並設定開發環境後,您就可以開始根據特定需求自訂主題。
自訂主題是多步驟的過程。 若要自訂主題,請依照列出的順序執行步驟:
檔案中提供的範例是根據 畫布 佈景主題,但請務必注意,您可以複製任何佈景主題,並使用相同的指示加以自訂。 這些指示適用於任何主題,可讓您根據特定需求修改主題。
若要複製以核心元件為基礎的最適化Forms主題,請選擇下列其中一種主題:
若要複製主題,請執行下列指示:
在本機開發環境中開啟命令提示字元或終端機視窗。
執行 git clone
複製佈景主題的命令。
git clone [Path of Git Repository of the theme]
取代 [主題的Git存放庫路徑] 和主題的對應Git存放庫的實際URL
例如,若要複製畫布主題,請執行下列命令:
git clone https://github.com/adobe/aem-forms-theme-canvas
成功執行命令後,您的電腦上便可在下列位置取得主題的本機復本: aem-forms-theme-canvas
資料夾。
以純文字編輯器開啟主題資料夾。 例如,若要開啟 aem-forms-theme-canvas
Visual Studio程式碼編輯器中的資料夾。
導覽至 aem-forms-theme-canvas
檔案夾。
執行以下命令:
code .
資料夾會在Visual Studio Code中開啟。
閇啟 package.json
檔案進行編輯。
設定 name
和 description
屬性。
name屬性用於唯一識別主題,例如"aem-forms-wknd-theme",並顯示在 樣式 標籤之 表單建立精靈. description屬性提供有關主題的其他詳細資訊,包括其用途和設計適用的情境。 您也可以指定主題的版本、說明和授權。
儲存並關閉檔案。
您可以使用佈景主題的全域變數來自訂個別元件或進行佈景主題層級變更。 對全域變數所做的任何變更都會影響所有個別元件。 例如,您可以使用全域變數來變更最適化表單所有元件的邊框顏色,並使用明亮的填色顏色來設定使用按鈕元件的CTA (行動號召):
此 variable.scss
檔案包含佈景主題的全域變數。 透過更新這些變數,您可以在主題層級進行樣式相關的變更。 若要套用佈景主題層級樣式,請依照下列步驟進行:
閇啟 <your-theme-sources>/src/site/_variables.scss
檔案進行編輯。
變更任何屬性的值。 例如,預設的錯誤顏色為 red
. 若要變更錯誤顏色 red
至 blue
,變更的顏色十六進位代碼 $errorvariable
. 例如,$error: #196ee5
。
儲存並關閉檔案。
同樣地,您可以使用 variable.scss
檔案來設定字型系列和型別、佈景主題和字型顏色、字型大小、佈景主題間距、錯誤圖示、佈景主題框線樣式,以及其他可影響多個最適化表單元件的變數。
您也可以變更特定最適化表單核心元件的字型、顏色、大小和其他CSS屬性。 例如,按鈕、核取方塊、容器、頁尾等。 您可以編輯特定元件的CSS檔案來設定按鈕或核取方塊的樣式,使其與貴組織的樣式一致。 若要自訂元件的樣式:
開啟檔案 <your-theme-sources>/src/components/<component>/<component.scss>
以進行編輯。 例如,若要變更按鈕元件的字型顏色,請開啟 <your-theme-sources>/src/components/button/button.scss
,檔案。
根據您的需求變更任何的值。 例如,若要將滑鼠懸停時按鈕元件的顏色變更為 green
,變更 color: $white
中的屬性 cmp-adaptiveform-button__widget:hover
類別至十六進位程式碼 #12B453
或任何其他陰影 green
. 最終程式碼如下所示:
.cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}
儲存並關閉檔案。
在主題和元件層級同時定義樣式時,在元件層級定義的樣式會優先執行。
若要預覽和測試本機環境中的變更,並根據不同AEM元件的需求自訂主題,請執行以下步驟:
以純文字編輯器開啟主題資料夾。 例如,開啟 aem-forms-theme-canvas
Visual Studio程式碼編輯器中的資料夾。
重新命名 env_template
檔案到 .env
檔案並新增下列引數:
* **AEM url**
AEM_URL=https://[author-instance]
* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name
* **AEM proxy port**
AEM_PROXY_PORT=7000
例如,表單的URL為 http://localhost:4502/editor.html/content/forms/af/contactusform.html
. 因此,的值:
http://localhost:4502/
contactusform
儲存檔案。
導覽至主題資料夾的根目錄。 在此案例中,主題資料夾名稱為 aem-forms-theme-canvas
.
開啟命令提示或終端機。
執行 npm install
以安裝相依性。
執行 npm run live
以在本機瀏覽器中預覽具有更新主題的表單。
如果在執行 npm run live
指令,在之前執行以下指令 npm run live
命令:
npm install parcel --save-dev
npm i @parcel/transformer-sass
這是熱門部署。 因此,無論您何時進行變更並儲存 _variables.scss
和 button.scss
檔案時,伺服器會自動挑選變更並預覽最新輸出。 直線 [Browsersync] File event [change]
表示伺服器已辨識出最新的變更,而且正在部署本機環境的變更。
在遵循主題層級和元件層級提供的範例進行主題自訂後,最適化表單的錯誤訊息將變更為 blue
顏色,而按鈕元件的標籤顏色會變更為 green
游標停留時。
預覽主題層級樣式
預覽元件層級樣式
您也可以測試AEM Formsas a Cloud Service執行個體上託管的最適化表單主題。 若要使用雲端例項上託管的Adaptive Forms來設定和設定本機環境以測試主題,請執行以下步驟:
以純文字編輯器開啟主題資料夾。 例如,開啟 aem-forms-theme-canvas
Visual Studio程式碼編輯器中的資料夾。
重新命名 env_template
檔案到 .env
檔案並新增下列引數:
* **AEM url**
AEM_URL=https://[author-instance]
* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name
* **AEM proxy port**
AEM_PROXY_PORT=7000
例如,雲端環境中的表單URL為 https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html
. 因此,的值:
https://author-XXXX-cmstg.adobeaemcloud.com/
contactusform
儲存檔案。
建立本機使用者。
若要建立本機使用者:
forms-users
群組。導覽至主題資料夾的根目錄。 在此案例中,主題資料夾名稱為 aem-forms-theme-canvas
.
執行 npm run live
系統會將您重新導向至本機瀏覽器。
按一下 SIGN IN LOCALLY (ADMIN TASKS ONLY)
並使用本機使用者的憑證登入。
您可以預覽含有最新變更的最適化表單。 一旦您滿意在主題資料夾中完成的修改,請使用前端管道將主題部署到AEM Cloud Service環境。
若要使用前端管道將主題部署到Cloud Service環境:
您需要存放庫才能部署主題。 登入您的 AEM Cloud Manager存放庫 並為您的主題新增存放庫。
按一下「 」,建立主題的新存放庫 存放庫 > 新增存放庫.
指定 存放庫名稱 在 新增存放庫 對話方塊。 例如,提供的名稱是 custom-canvas-theme-repo
.
按一下「儲存」。
按一下 複製存放庫URL 複製存放庫的URL。
custom-canvas-theme-repo
,用於畫布布主題、WKND主題和畫盤主題。 但是,要部署主題,您需要建立單獨的前端管道。 使用相應的前端管道部署特定主題的未來自訂。現在,將變更推送到AEM FormsCloud Service的主題存放庫。
導覽至主題資料夾的根目錄。 在此案例中,主題資料夾名稱為 aem-forms-theme-canvas
.
開啟命令提示或終端機。
以列出的順序執行以下命令:
git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]
例如:
git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo
使用部署主題 前端管道。。若要部署佈景主題,請執行下列步驟:
登入您的AEM Cloud Manager存放庫。
按一下 新增 按鈕來自 管道 區段。
選取 新增非生產管道 或 新增生產管道 根據Cloud Service環境而定。 例如,此處 新增生產管道 已選取選項。
在 新增生產管道 對話方塊作為 設定 步驟,指定管道的名稱。 例如,管道的名稱為 customcanvastheme
.
按一下「繼續」。
選取 目標部署 > 前端計畫碼 選項,在 原始碼 步驟。
選取 存放庫 和 Git分支 具有您最新變更的值。 例如,此處選取的存放庫名稱為 custom-canvas-theme-repo
Git分支為 main
.
選取 程式碼位置 作為 /
,如果您的變更位於根資料夾中。
按一下「儲存」。
管道設定完成後,會更新行動號召卡。
以滑鼠右鍵按一下已建立的管線。
按一下 執行 .
建置完成後,主題即可在製作例項上使用。 它會顯示在 樣式 索引標籤建立最適化表單時,使用最適化表單建立精靈中的這個索引標籤。
將主題套用至最適化表單的步驟如下:
登入您的AEM Forms作者執行個體。
選取 Adobe Experience Manager > Forms > Forms與檔案.
按一下 建立 > 最適化Forms. 建立最適化表單的精靈隨即開啟。
選取中的核心元件範本 來源 標籤。
選取中的主題 樣式 標籤。
按一下建立。
最適化表單主題用於最適化表單範本的一部分,以便在建立最適化表單時定義樣式。
避免使用其他主題的資產
編輯主題時,您可以瀏覽並從其他主題新增資產(例如影像)。 例如,您正在編輯頁面的背景。 例如,當您選取 頁面 > 背景 > 新增 > 影像,您會看到一個對話方塊,可讓您瀏覽並新增其他主題中的影像。
如果從其他主題新增資產,且移動或刪除了其他主題,您可能會遇到目前主題的問題。 建議您避免瀏覽和從其他主題新增資產。
變更容器面板配置寬度
不建議變更容器面板配置寬度。 當您指定容器面板的寬度時,其會變成靜態,且無法適應不同的顯示。
使用表單編輯器或主題編輯器來處理頁首和頁尾
如果要使用字型樣式、背景和透明度等樣式選項來設定頁首和頁尾的樣式,請使用主題編輯器。
如果您想在頁尾中提供標誌影像、公司名稱和版權資訊等資訊,請使用表單編輯器選項。
問: 在全域和元件層級的主題資料夾中進行自訂時,哪個自訂專案優先?
Ans: 在全域和元件層級進行自訂時,優先採用元件層級的自訂。