AEM可讓您使用Layout Container元件,為您的頁面建立互動式版面。
這提供了段落系統,可讓您將元件定位在回應式格線中。 此格線可根據裝置/視窗大小和格式重新排列版面。 此元件與Layout模式搭配使用,可讓您根據裝置建立和編輯回應式版面。
版面容器:
提供水準對齊格線的功能,以及將元件並排放在格線中,並定義元件何時應收合/重排的功能。
使用預先定義的中斷點(例如手機、平板電腦等) 可讓您定義相關裝置/方向之內容所需行為。
可以巢狀內嵌,以允許欄控制。
然後,使用者就可以看到如何使用模擬器來呈現特定裝置的內容。
雖然傳統UI中提供「版面容器」元件,但其完整功能僅在觸控式UI中提供並支援。
AEM使用多種機制組合,為您的頁面實現互動式版面配置:
Layout Container元件
此元件可在元件瀏覽器中使用,並提供格線段落系統,讓您在回應式格線中新增和定位元件。 您也可以將其設為頁面上的預設段落系統。
一旦版面容器放置在您的頁面上,您就可以使用Layout模式將內容定位在回應式格線中。
模擬
器這可讓您建立和編輯互動式網站,透過互動方式調整元件大小,以根據裝置/視窗大小重新排列版面。然後,使用者就可以看到如何使用模擬器呈現內容。
有了這些互動式格點機制,您可以:
依您的專案而定,「版面容器」可能會用作您頁面的預設段落系統,或是可透過元件瀏覽器(或兩者)新增至頁面的元件。
Adobe提供回應式版面的GitHub檔案做為參考,可提供給前端開發人員,讓他們在AEM以外使用AEM格線,例如為未來的AEM網站建立靜態HTML模型。
通過模板上的配置啟用上述機制的使用。 如需詳細資訊,請參閱設定回應式版面。
當您建立網站內容時,您需要確定顯示的內容與用來檢視該內容的裝置相符。
AEM可讓您根據裝置寬度來定義版面:
模擬器可讓您在多種裝置上模擬這些版面。 除了設備類型外,由旋轉設備選項選擇的方向還會影響寬度更改時選擇的斷點。
中斷點是分隔版面定義的點。
設備Desktop不具有特定寬度,它與預設斷點(即上一個配置的斷點上的所有內容)相關。
您可以為每個裝置定義中斷點,但這會大幅增加版面定義與維護的工作量。
使用模擬器時,選擇特定設備進行模擬和佈局定義,並將突出顯示相關斷點。 您所做的任何佈局更改都將適用於應用斷點的其它設備,即位於活動斷點標籤左側但位於下一個斷點標籤之前的任何設備。
例如,當您選取裝置iPhone 6 Plus(定義寬度為540像素)以進行模擬和版面配置時,也會啟動中斷點Phone(定義為768像素)。 您對iPhone 6所做的任何版面變更,都適用於Phones中斷點下的其他裝置,例如iPhone 5(定義為320像素)。
開啟所需的頁面進行編輯。 例如:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
從頂部工具欄中選擇模擬器表徵圖:
將會開啟模擬器工具欄。
模擬器工具列會顯示其他版面配置選項:
要選擇要模擬的特定設備,您可以:
選擇特定設備後,您可以:
版面容器是一個段落系統,可:
如果尚未提供,則版面容器必須針對段落系統/頁面](/docs/experience-manager-64/administering/operations/configuring-responsive-layout.html?lang=zh-Hant)明確啟動[(例如,使用Design模式)。
「配 置容器 」是元件瀏覽器中的標準 元件。從這裡,您可以將其拖曳至頁面上的必要位置,之後您將看到「拖曳元件至此處 」預留位置。
然後,您可以新增元件至版面容器。 這些元件將包含實際內容:
和其他元件一樣,您可以選取版面容器,然後對(剪下、複製、刪除)執行動作(在編輯模式中):
由於版面容器是段落系統,刪除元件會同時刪除版面格線和容器內所有元件(及其內容)。
如果您滑鼠或點選格線預留位置,就會顯示動作選單。
您需要選擇Parent選項。
如果版面元件是巢狀的,選取Parent選項會顯示下拉式選項,讓您選取巢狀版面容器或其父項。
當您將滑鼠移至下拉式清單中的容器名稱上方時,其外框會顯示在頁面上。
這會反白顯示整個格線及其內容。 將顯示操作工具欄,您可從中選擇操作,如Delete。
您可以為每個斷點定義單獨的佈局(由模擬設備類型和方向確定)。
若要設定使用「版面容器」實作之回應式格線的版面,您必須使用「版面」模式。
Layout 模式可以通過兩種方式啟動。
使用工具列 中的模式選單 ,然後選擇「 版面模式」
在版面模式下,您可以對網格執行各種操作:
使用藍點調整內容元件的大小。 調整大小將始終靠齊網格。 調整背景格線大小時,會顯示以協助對齊:
當調整元件(例如Images)的大小時,比例和比例將保持不變。
在內容元件上按一下/點選,工具列可讓您:
父代
可讓您選取整個版面配置容器元件,以對整體採取動作。
浮動至新行
元件將移動到新行,這取決於網格中可用的空間。
隱藏元件
元件將變為不可見(可從版面容器的工具列還原)。
在Layout模式中,您可以點選/按一下拖曳元件至此處以選取整個元件。 這將顯示此模式的工具欄。
工具列會根據版面元件的狀態和所屬的元件而有不同的選項。 例如:
在上述範例中,浮點和隱藏動作是可用的,因為此「版面容器」是巢狀內嵌在父「版面容器」中。
選取「顯 示隱藏的元件 」(Show hidden components)選項,會以藍色顯示目前隱藏在原始位置的元件。
選擇Restore all將取消隱藏所有隱藏的元件。