設定配置容器和配置模式
瞭解如何設定版面容器和版面模式，以便為內容作者啟用回應式版面。
-
配置容器 — 此元件提供格線段落系統，可讓您在回應式格線中新增及放置元件。
-
它可作為您頁面的預設Parsys使用，和/或在元件瀏覽器中可供作者使用。
-
預設 配置容器 元件定義在
/libs/wcm/foundation/components/responsivegrid下。 -
您可以定義配置容器：
- 作為使用者可新增至頁面的元件。
- 做為頁面的預設parsys。
- 作為元件和預設parsys。
- 您可以將版面容器設為頁面的標準版面容器，同時允許使用者在此容器中新增更多版面容器；例如，實現欄控制。
-
-
佈局模式 — 一旦佈局容器放置到您的頁面上，您就可以使用 佈局 模式在回應式格線內放置內容。
-
模擬器 — 這可讓您建立並編輯回應式網站，這些網站會根據裝置/視窗大小，以互動方式調整元件大小，重新排列版面。 之後，使用者可以使用模擬器檢視內容的呈現方式。
利用這些回應式格點機制，您可以：
- 使用中斷點（表示裝置分組）可依據裝置配置定義不同的內容行為。
- 根據裝置群組隱藏元件（定義元件將隱藏在哪個中斷點）。
- 使用水準貼齊格點（將元件放入格點，視需要調整大小，定義它們何時應該摺疊/重排成並排或上下對齊）。
- 實現欄控制。
啟用網站的佈局模式
配置 模式允許您使用模擬器來調整不同裝置的內容配置。 WKND範例網站已針對 配置 模式啟用。 請依照下列步驟啟用您自己的網站。
設定中斷點
中斷點對於回應式設計而言至關重要，而且可定義將內容調整至目標裝置的方法和時機。 不過，請務必小心，因為您引進的每個中斷點都會為作者產生額外的工作，以便容納內容。 很多時候，兩個中斷點就足夠了，包括永遠存在的預設中斷點。 Adobe建議不要建立超過三個中斷點，包括預設值，亦即在cq:responsive/breakpoint下不超過兩個節點。
-
中斷點具有標題和寬度：
- 標題說明一般裝置群組，並視需要提供方向。
- 例如，
phone，tablet
- 例如，
- 寬度會定義該一般裝置群組的最大寬度（畫素）。
- 例如，如果中斷點電話的寬度為768，那麼就會是電話裝置所使用的配置寬度上限。
- 標題說明一般裝置群組，並視需要提供方向。
-
可以定義中斷點：
- 在頁面範本上，設定會從中複製到使用該範本建立的任何頁面。
- 在頁面節點上，任何子頁面會從中繼承設定。
-
使用模擬器時，中斷點會在頁面編輯器頂端顯示為標籤。
-
中斷點繼承自父節點階層，並可隨意覆寫。
-
有一個預設（現成）中斷點，其涵蓋了上次設定的中斷點以上所有內容。
-
可以使用CRXDE Lite或XML定義中斷點。
新專案和現有專案都應該考量中斷點。
-
如果您要設定新專案，則應將中斷點新增至範本。
-
如果您要移轉現有專案（包含現有內容），您必須：
- 將中斷點新增至範本。
- 將相同的中斷點新增至現有頁面。
由於繼承關係，您只需對內容的根頁面執行此動作。
使用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>
- 名稱：
