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)選項,會以藍色顯示目前隱藏在原始位置的元件。
選取 全部還原 會取消隱藏所有隱藏的元件。