設定配置容器和配置模式 configuring-layout-container-and-layout-mode
瞭解如何設定配置容器和配置模式。
概觀 overview
回應式佈局是一種實現回應式網頁設計的機制。 這可讓使用者建立根據其使用者使用之裝置而具有版面配置與尺寸的網頁。
AEM使用一組機製為頁面實現回應式佈局：
-
配置容器 元件
此元件提供格線段落系統，讓您在回應式格線內新增及放置元件。 它可作為您頁面的預設Parsys使用，和/或在元件瀏覽器中可供作者使用。
-
預設 配置容器 元件定義於：
/libs/wcm/foundation/components/responsivegrid -
您可以定義配置容器：
-
作為使用者可新增至頁面的元件。
-
做為頁面的預設parsys。
-
兩者。
您可以將版面容器設為頁面的標準版面容器，同時允許使用者在此容器中新增更多版面容器；例如，實現欄控制。
-
-
-
配置模式
將配置容器放置到頁面上後，您就可以使用 配置 模式在回應式格線內放置內容。 -
模擬器
這可讓您建立及編輯回應式網站，這些網站會透過以互動方式調整元件大小，根據裝置/視窗大小重新安排版面。 之後，使用者可以使用模擬器檢視內容的呈現方式。
利用這些回應式格點機制，您可以：
- 使用中斷點（表示裝置分組）可依據裝置配置定義不同的內容行為。
- 根據裝置群組隱藏元件（定義元件將隱藏在哪個中斷點）。
- 使用水準貼齊格點（將元件放入格點，視需要調整大小，定義它們何時應該摺疊/重排成並排或上下對齊）。
- 實現欄控制。
設定回應式模擬器 configuring-the-responsive-emulator
此任務可讓您在網站上看到回應式 模擬器。
註冊頁面元件以進行模擬 register-your-page-components-for-emulation
若要讓模擬器支援您的頁面，您必須註冊頁面元件。 請參閱註冊模擬的頁面元件。
指定裝置群組 specify-the-device-groups
若要指定出現在模擬器之[裝置]清單中的裝置群組，請參閱指定裝置群組。
將您的網站連結至指定的裝置群組 link-your-site-to-the-specified-device-groups
若要加入模擬器，請將您的網站連結至裝置群組。 請參閱新增裝置清單 （針對傳統和觸控最佳化UI）。
啟用網站的佈局模式 activate-layout-mode-for-your-site
這些程式用於啟用網站上的 配置 模式。
設定中斷點 configure-the-breakpoints
中斷點：
-
用於回應式設計。
-
可定義：
- 在頁面範本上，設定會從中複製到使用該範本建立的任何頁面。
- 在頁面節點上，任何子頁面會從中繼承設定。
-
定義標題和寬度：
- 標題說明一般裝置群組，必要時會提供方向；例如，手機、平板電腦、桌上型電腦橫向。
- 寬度會定義該一般裝置群組的最大寬度（畫素）。 例如，如果中斷點電話的寬度為768，那麼就會是電話裝置所使用的配置寬度上限。
-
使用模擬器時，會在頁面編輯器頂端顯示為標籤。
-
繼承自父節點階層，並可隨意覆寫。
-
有一個預設（現成）中斷點，其涵蓋上一個 已設定的 中斷點以上的所有內容。
它們可以使用CRXDE Lite或XML來定義。
- 將中斷點新增至範本。
-
將中斷點新增至範本
-
將相同的中斷點新增至現有頁面
由於繼承正在運作，您可以將此限製為內容的根頁面。
使用CRXDE Lite設定中斷點 configuring-breakpoints-using-crxde-lite
-
使用CRXDE Lite（或同等專案），導覽至：
- 您的範本定義。
- 您頁面的
jcr:content節點。
-
在
jcr:content下建立節點：- 名稱：
cq:responsive - 類型：
nt:unstructured
- 名稱：
-
在此之下建立節點：
- 名稱：
breakpoints - 類型：
nt:unstructured
- 名稱：
-
在中斷點節點下，您可以建立任意數目的中斷點。 每個定義都是具有下列屬性的單一節點：
- 名稱：
<descriptive name> - 類型：
nt:unstructured - 標題：
String*<descriptive title seen in Emulator>* - 寬度：
Decimal*<value of breakpoint>*
- 名稱：
使用XML設定中斷點 configuring-breakpoints-using-xml
中斷點位於.context.html的<jcr:content>區段內，在適當的範本（或內容）資料夾下。
範例定義：
<cq:responsive jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
<tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
</breakpoints>
</cq:responsive>
新增回應式資訊提供者 add-a-responsive-information-provider
將下列cq:infoProviders節點結構複製到您的上層頁面元件中：
/libs/foundation/components/page/cq:infoProviders/responsive
啟用頁面元件大小調整 enable-component-resizing-for-the-page
需要這些程式，才能在 配置 模式中調整元件大小。
將配置容器設定為主要Parsys set-layout-container-as-main-parsys
若要將頁面的主要parsys設定為配置容器，請將parsys定義為：
wcm/foundation/components/responsivegrid
在：
- 頁面元件
- 頁面範本（供日後使用）
以下兩個範例說明定義：
-
HTL：
code language-html <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/> -
JSP：
code language-html <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
包含回應式CSS include-the-responsive-css
使用LESS的中斷點CSS css-for-breakpoints-using-less
AEM使用LESS來產生必要CSS的部分，這些需要包含在您的專案中。
您也必須建立使用者端程式庫，以提供額外的設定和函式呼叫。 以下LESS擷取是您必須新增至專案的最小值範例：
@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
基底格點定義可在下列位置找到：
/libs/wcm/foundation/clientlibs/grid/grid_base.less
樣式考量事項 styling-considerations
保持在回應式容器中的元件會根據回應式格線大小調整大小(連同其各自的HTMLDOM元素)。 因此，在這些情況下，建議避免（或更新）固定寬度（包含） DOM元素的定義。
例如：
-
之前：
width=100px
-
之後：
max-width=100px
調整大小和調整影像法規遵循 resizing-and-adaptive-image-compliance
在格線內調整元件大小的任何動作，都會視情況觸發下列接聽程式：
-
beforeedit -
beforechildedit -
afteredit -
afterchildedit
若要正確調整回應式格線中所包含的最適化影像內容大小並加以更新，您必須將設為REFRESH_PAGE的afterEdit接聽程式新增至每個所包含元件的EditConfig檔案。
例如：
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
可透過指令碼使用最適化影像機制，該指令碼控制選擇符合目前視窗大小的正確影像。 在DOM準備就緒或收到專用事件時，它會啟動。 目前必須重新整理頁面，才能正確反映使用者動作的結果。
啟用頁面的配置容器元件 enable-the-layout-container-component-for-page
這些工作可讓作者將 配置容器 元件的執行個體拖曳到頁面上。
啟用配置容器元件以進行頁面編輯 enable-the-layout-container-component-for-page-editing
若要讓作者更能回應式地新增網格至內容頁面，您必須啟用頁面的「配置容器」元件。 您可以透過以下其中一種方式來達成此目的：
-
作者環境
使用設計模式來啟用頁面的 圖層容器 元件。
-
元件定義
定義元件時使用
allowedComponent或靜態包含。
設定配置容器的格線 configure-the-grid-of-the-layout-container
您可以設定可用於配置容器的每個特定執行個體的欄數：
-
作者環境
您可以設定可用於配置容器的每個特定執行個體的欄數。
若要這麼做，請使用設計模式，然後開啟所需容器的設計對話方塊。 您可在此指定有多少欄位可供定位和調整大小。 預設值為12。
-
XML
回應式格線的定義指定於：
etc/design/<*your-project-name*>/.content.xml可以定義下列引數：
-
可用的欄數：
columns="{String}8"
-
可新增至目前元件的元件：
components="[/libs/wcm/foundation/components/responsivegrid, ...
-
巢狀回應式格點 nested-responsive-grids
在某些情況下，您可能會發現有必要巢狀內嵌回應式格線以支援專案的需求。 不過，請記住，Adobe建議的最佳實務是儘可能將結構保持平坦。
當您無法避免使用巢狀回應式格點時，請確定：
- 所有容器（容器、標籤、摺疊式功能表等）都有屬性
layout = responsiveGrid。 - 請勿在容器階層中混合屬性
layout = simple。
這包括頁面範本中的所有結構容器。
內部容器的欄位編號絕不可大於外部容器的欄位編號。 下列範例符合此條件。 雖然在預設的（案頭）畫面中，外部容器的欄位編號為8，但內部容器的欄位編號為4。
| code language-text |
|---|
|
| code language-html |
|---|
|