AEM可讓您透過使用 配置容器 元件。
這提供了段落系統,可讓您在回應式格線中定位元件。 此格點可根據裝置/視窗大小和格式重新排列版面。 元件需與 版面 模式,可讓您根據裝置建立及編輯回應式版面。
配置容器:
之後,使用者便可使用模擬器檢視特定裝置的內容呈現方式。
AEM使用多種機制組合,為您的頁面實現回應式佈局:
配置容器 元件
此元件位於 元件瀏覽器 和提供了一個格點段落系統,可讓您在回應式格點內新增和定位元件。 它也可以設定為您的頁面上的預設段落系統。
將版面容器放置到頁面上後,您就可以使用 版面 在回應式格線中定位內容的模式。
模擬器
這可讓您建立並編輯回應式網站,這些網站可透過以互動方式調整元件大小,根據裝置/視窗大小重新安排版面。 之後,使用者便可使用模擬器檢視內容的呈現方式。
透過這些回應式格點機制,您可以:
根據您的專案,版面容器可能會用作頁面的預設段落系統,或用作可透過元件瀏覽器新增到頁面的元件(或兩者)。
Adobe提供 GitHub檔案 回應式佈局的參考資料,前端開發人員可參考該參考資料,以便在AEM之外使用AEM格線,例如在為未來的AEM網站建立靜態HTML模型時。
在範本上設定即可使用上述機制。 如需詳細資訊,請參閱設定回應式佈局。
當您建立網站內容時,您想要確保內容的顯示方式適合用來檢視內容的裝置。
AEM可讓您根據裝置的寬度來定義版面:
裝置 案頭沒有特定寬度的中斷點會與預設中斷點相關(亦即高於上次設定中斷點的所有內容)。
您可以為每個個別裝置定義中斷點,但這會大幅增加定義和維護版面配置所需的工作。
使用模擬器時,您會選取特定裝置來模擬和定義版面,相關的中斷點也會反白顯示。 您所做的任何配置變更都將適用於中斷點套用的其他裝置,亦即位於使用中中斷點標籤左側、但下一個中斷點標籤前的任何裝置。
例如,當您選取裝置時 iPhone 6 Plus (定義為540畫素的寬度)用於模擬和配置、中斷點 電話 (定義為768畫素)也會啟動。 您對版面所做的任何變更 IPHONE 6 將適用於下的其他裝置 電話 中斷點,例如 IPHONE 5 (定義為320畫素)。
開啟必要頁面以進行編輯。 例如:
http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html
選取 模擬器 圖示從上方工具列選取:
模擬器工具列將會開啟。
模擬器工具列會顯示其他版面選項:
若要選取要模擬的特定裝置,您可以:
選取特定裝置後,您可以:
A 配置容器 是段落系統,具備以下功能:
如果尚未提供,請 配置容器 必須為段落系統/頁面明確啟動。
「配 置容器 」是元件瀏覽器中的標準 元件。從這裡,您可以將其拖曳至頁面上的必要位置,之後您將看到「拖曳元件至此處 」預留位置。
然後,您可以將元件新增至版面容器。 這些元件將儲存實際內容:
與其他元件一樣,您可以選取版面容器,然後對其採取剪下、複製、刪除等動作(當在 編輯 模式):
由於版面容器是段落系統,刪除元件將會同時刪除版面格線以及容器內容納的所有元件(及其內容)。
如果您將滑鼠移到格點預留位置上或點選格點,則會顯示動作選單。
您需要選取 父級 選項。
如果配置元件為巢狀,請選取 父級 選項會顯示下拉式選取專案,讓您選取巢狀配置容器或其父項。
當您將滑鼠移至下拉式清單中的容器名稱上時,其外框將顯示在頁面上。
這將會反白顯示整個格線及其內容。 動作工具列隨即顯示,您可從中選取動作,例如 刪除。
您可以為每一個專案定義個別的配置 中斷點 (由模擬的裝置型別和方向所決定)。
若要設定以版面容器實作的回應式格線的版面,您需要使用 版面 模式。
版面 啟動模式的方式有兩種。
在版面配置模式中,您可以對格線執行各種動作:
使用藍點調整內容元件的大小。 調整大小一律靠齊格點。 當調整背景格點大小時,將顯示以協助對齊:
當元件(例如 影像 都會重新調整大小。
按一下/點選內容元件,工具列可讓您:
在 版面 模式:您可以點選/按一下 將元件拖曳到這裡 以選取整個元件。 這將會顯示此模式的工具列。
根據版面配置元件和屬於它的元件的狀態,工具列會有不同的選項。 例如:
父級 — 選取父元件。
顯示隱藏的元件 — 顯示所有或個別元件。 數字表示目前有多少個隱藏元件。 計數器會顯示已隱藏的元件數。
還原中斷點配置 — 還原至預設版面。 這表示不會強制使用自訂版面。
浮動至新行 — 如果間距允許,將元件向上移動一個位置。
隱藏元件 — 隱藏目前的元件。
在上述範例中,浮動和隱藏動作可供使用,因為此配置容器巢狀內嵌於上層配置容器中。
取消隱藏元件
選取父元件以顯示包含「 」的動作工具列
顯示隱藏的元件 選項。 在此示例中,隱藏了兩個元件。
選取「顯 示隱藏的元件 」(Show hidden components)選項,會以藍色顯示目前隱藏在原始位置的元件。
選取 全部還原 將取消隱藏所有隱藏的元件。