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 配置容器 是段落系統:
如果尚未提供,請使用 配置容器 必須為段落系統/頁面明確啟動。
「配 置容器 」是元件瀏覽器中的標準 元件。從這裡,您可以將其拖曳至頁面上的必要位置,之後您會看到 將元件拖曳到這裡 預留位置。
然後,您可以將元件新增至版面容器。 這些元件將儲存實際內容:
與其他元件一樣,您可以選取「配置容器」(Layout Container),然後對其執行剪下、複製、刪除等動作(當執行 編輯 模式):
由於版面容器是段落系統,刪除元件將會同時刪除版面格線以及容器內容納的所有元件(及其內容)。
如果您將滑鼠移到格點預留位置上或選取該預留位置,則會顯示動作選單。
您必須選取 父級 選項。
如果版面元件為巢狀,請選取 父級 選項會顯示下拉式選取專案,讓您選取巢狀配置容器或其父項。
將滑鼠移至下拉式清單中的容器名稱上方時,其外框會顯示於頁面上。
整個格線會以其內容反白顯示。 畫面會顯示動作工具列,您可在其中選取動作,例如 刪除。
您可以為每一個專案定義個別的配置 中斷點 (由模擬的裝置型別和方向所決定)。
若要設定以「配置容器」實作的回應式格線的配置,您需要使用 版面 模式。
版面 啟動模式有兩種方式。
在版面模式中,您可以在格線上執行各種動作:
使用藍點調整內容元件的大小。 調整大小永遠靠齊格點。 調整大小時,背景格點會顯示,以協助對齊:
當元件(如 影像 都會重新調整大小。
選取內容元件,工具列可讓您:
在 版面 模式您可以選取 將元件拖曳到這裡 以選取整個元件。 工具列會針對此模式顯示。
根據配置元件及其所屬元件的狀態,工具列有不同的選項。 例如:
父級 — 選取父元件。
顯示隱藏的元件 — 顯示所有或個別元件。 數字表示目前有多少個隱藏的元件。 計數器顯示隱藏的元件數量。
還原中斷點配置 — 還原為預設版面。 不會強制使用自訂版面。
浮動至新行 — 如果間距允許,將元件向上移動一個位置。
隱藏元件 — 隱藏目前的元件。
在上述範例中,浮動和隱藏動作可供使用,因為此配置容器是巢狀內嵌於上層配置容器中。
取消隱藏元件
選取父元件以顯示包含「 」的動作工具列 顯示隱藏的元件 選項。 在此範例中,隱藏了兩個元件。
選取「顯 示隱藏的元件 」(Show hidden components)選項,會以藍色顯示目前隱藏在原始位置的元件。
選取 全部還原 會取消隱藏所有隱藏的元件。