您可以建立並套用主題,以使用核心元件將最適化表單風格化。 主題包含元件和面板的樣式詳細資訊。 樣式包含背景顏色、狀態顏色、透明度、對齊方式及大小等屬性。 套用主題時,指定的樣式會反映在相應的元件上。 主題可獨立管理,不需參考最適化表單。
當您 建立最適化表單 使用核心元件時,現成可用的主題會顯示在 樣式 標籤。 依預設,僅 畫布 主題已推出。
將主題套用至最適化表單的步驟如下:
登入您的AEM Forms作者執行個體。
點選 Adobe Experience Manager > Forms > Forms與檔案.
按一下 建立 > 最適化Forms. 建立最適化表單的精靈隨即開啟。
選取中的核心元件範本 來源 標籤。
使用核心元件建立最適化表單時,會在「樣式」標籤下看到畫布主題。 這是目前唯一可用的現成佈景主題。 但您可以透過設定前端管道將主題變更為喜歡並儲存以供未來使用。
選取中的畫布主題 樣式 標籤。
按一下建立。
最適化表單主題用作最適化表單範本的一部分,以便在建立最適化表單時定義樣式。
若要自訂佈景主題,
若要自訂畫布主題:
開啟命令提示字元並執行下列命令以複製畫布主題:
git clone https://github.com/adobe/aem-forms-theme-canvas
「表單建立精靈」的「樣式」標籤會顯示與package.json檔案相同的主題名稱。
最適化表單主題是包含CSS、JavaScript和靜態資源的套件,這些資源定義表單的樣式並符合最適化表單主題的結構。 最適化表單主題具有下列前端專案的典型結構:
src/components
:AEM核心元件專屬的JavaScript和CSS檔案src/resources
:圖示、標誌和字型等靜態檔案src/site
:套用至整個AEM Sites頁面的JavaScript和CSS檔案src/theme.ts
:JavaScript & CSS主題的主要進入點src\theme.scss
:套用至整個主題的JavaScript和CSS檔案此 src/components
資料夾中有專用於所有AEM核心元件(例如按鈕、核取方塊、容器、頁尾等)的JavaScript和CSS檔案。 您可以編輯AEM元件專屬的CSS檔案,以設定按鈕或核取方塊的樣式。
若要自訂主題,您可以啟動本機Proxy伺服器,根據實際AEM內容即時檢視主題自訂。
更新中畫布主題的名稱和版本 package.json
和 package_lock.json
檔案。
名稱不應包含 @aemforms
標籤之間。 它應該是簡單文字,作為使用者提供的名稱。
建立 .env
檔案並新增下列引數:
AEM url
AEM_URL=https://[author-instance]
AEM網站名稱
AEM_ADAPTIVE_FORM=Form_name
AEM Proxy連線埠
AEM_PROXY_PORT=7000
從命令列,瀏覽至本機電腦上主題的根目錄。
執行 npm install
和npm會擷取相依性並安裝專案。
執行 npm run live
Proxy伺服器就會啟動。
點選或按一下 本機登入(僅限管理員工作) 並使用AEM管理員提供給您的Proxy使用者認證登入。
http://localhost:[port]/
在 .env
畫布布主題的檔案,系統會將您直接重新導向至瀏覽器。登入後,請變更瀏覽器中的URL,使其指向AEM管理員提供給您的範例內容路徑。
/content/formname.html?wcmmode=disabled
,將URL變更為 http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled
導覽至最適化表單,檢視套用至最適化表單的畫布主題。
在編輯器中,開啟檔案 <your-theme-sources>/src/site/_variables.scss
.
您可以編輯「 」,直接設定網站中所有最適化表單元件的樣式。 site/_variables.scss
檔案。
編輯的變數 font colour
至 red
.
設定不同AEM元件的樣式
您可以在編輯器中變更最適化表單的CSS檔案,以設定其不同元件的樣式。 Canvas Theme資料夾中的每個Adaptive Form核心元件都有不同的CSS資料夾。
若要在主題編輯器中指定特定元件的樣式,您可以在主題資料夾中編輯CSS。 例如,如果您想要變更文字方塊欄位的邊框顏色,請在編輯器中開啟CSS檔案並變更其邊框顏色。
當您儲存檔案時,Proxy伺服器會透過行來辨識變更 [Browsersync] File event [change]
.
切換回本機Proxy伺服器的瀏覽器時,變更會立即顯示。
主題設計人員會預覽本機Proxy伺服器中的變更,並根據不同AEM元件的需求自訂主題。
將變更提交至AEM Git存放庫之前,您需要存取 Git存放庫資訊.
變更主題並使用本機Proxy伺服器測試主題後,請將變更提交至AEM FormsCloud Service的Git存放庫。 它讓自訂主題可在您的FormsCloud Service環境中提供給Adaptive Forms作者使用。
在將變更提交至AEM FormsCloud Service的Git存放庫之前,您需要在本機電腦上複製存放庫。 複製存放庫:
按一下「 」,建立新的主題存放庫 存放庫 選項。
按一下 新增存放庫 並指定 存放庫名稱 在 新增存放庫 對話方塊。 按一下「儲存」。
按一下 複製存放庫URL 複製已建立存放庫的URL。
開啟命令提示字元並複製上述建立的雲端存放庫。
git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
使用類似於的命令將您正在編輯的主題存放庫檔案移動到雲端存放庫中
cp -r [source-theme-folder]/* [destination-cloud-repo]
例如,使用此命令
cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]
在雲端存放庫的目錄中,使用下列命令提交您移動到的主題檔案。
git add .
git commit -a -m "Adding theme files"
git push
自訂會推送至Git存放庫。
您的自訂內容現在會安全地儲存在Git存放庫中。
如果您在畫布主題資料夾中進行任何修改,未來需要重新執行上述管道。 因此,必須記住管道的名稱。
.env
檔案主題資料夾並新增引數: AEM URL, AEM_ADAPTIVE_FORM 和 AEM_PROXY_PORT.red
顏色並儲存變更。執行管道後,該主題便可在「樣式」標籤下使用。
避免使用其他主題的資產
編輯主題時,您可以瀏覽並新增其他主題中的資產(例如影像)。 例如,您正在編輯頁面的背景。 例如,當您選取 頁面 > 背景 > 新增 > 影像,您會看到對話方塊,可讓您瀏覽並新增其他主題中的影像。
如果從其他主題新增資產,而另一個主題被移動或刪除,則您可能會遇到目前主題的問題。 建議您避免瀏覽和新增其他主題中的資產。
變更容器面板配置寬度
不建議變更容器面板配置寬度。 當您指定容器面板的寬度時,它會變成靜態,不會適應不同的顯示。
使用表單編輯器或主題編輯器來處理頁首和頁尾
如果要使用字型樣式、背景和透明度等樣式選項來設定頁首和頁尾的樣式,請使用主題編輯器。
如果您想在頁尾中提供標誌影像、公司名稱和版權資訊等資訊,請使用表單編輯器選項。