回應式版面

AEM可讓您使用​版面容器​元件，為頁面提供回應式版面。

這提供了段落系統，可讓您在回應式格線中定位元件。 此網格可根據設備/窗口大小和格式重新排列佈局。 元件與​Layout mode搭配使用，可讓您建立和編輯依裝置而定的回應式版面。

版面容器：

• 提供與網格的水準對齊，以及將元件並排放置到網格中並定義元件何時應折疊/重流的功能。

• 使用預先定義的斷點（例如手機、平板電腦等） 來定義相關裝置/方向之內容的必要行為。

  • 例如，您可以自訂元件大小，或特定裝置上是否可看見元件。

• 可巢狀化以允許欄控制。

然後，使用者可以透過模擬器查看特定裝置呈現內容的方式。

AEM使用組合機制來實現頁面的回應式版面：

• 佈局容 器元件

  此元件在元件瀏覽器中可用，並提供了網格段落系統，允許您在響應網格中添加和定位元件。 也可將其設為頁面上的預設段落系統。

• 版面模式

  版面容器放置在頁面上後，您就可以使用​Layout​模式，將內容置於回應式格線內。

• 🔗
  模擬器這可讓您建立和編輯回應式網站，透過互動方式調整元件大小，根據裝置/視窗大小重新排列版面。然後，使用者就可以看到使用模擬器呈現內容的方式。

使用這些回應式格線機制，您可以：

• 使用斷點根據設備寬度（與設備類型和方向相關）定義不同的內容佈局。
• 使用這些相同的斷點和內容佈局來確保內容對案頭上的瀏覽器窗口大小有響應。
• 使用水準對齊網格，可讓您將元件置於網格中，根據需要調整大小，並定義元件何時應折疊/重排以並排或在上/下。
• 隱藏特定設備佈局的元件。
• 實現列控制。

根據您的專案，版面容器可能會作為頁面的預設段落系統，或作為可透過元件瀏覽器（或兩者）新增至頁面的元件。

佈局定義、設備模擬和斷點

建立網站內容時，您需要確定顯示的內容與用來檢視內容的裝置相適當。

AEM可讓您根據裝置寬度定義配置：

• 模擬器可讓您在一系列裝置上模擬這些配置。 除設備類型外，旋轉設備​選項選擇的方向還會影響寬度改變時選擇的斷點。

• 斷點是分隔佈局定義的點。

  • 它們使用特定版面有效定義任何裝置的最大寬度（以像素為單位）。
  • 斷點通常對於選擇的設備有效，取決於其顯示器的寬度。
  • 斷點的範圍向左延伸，直到下一個斷點。
  • 不能具體選擇斷點，選擇設備和方向將自動選擇相應的斷點。

設備​Desktop​不具有特定寬度，與預設斷點相關（即上次配置斷點上的所有內容）。

使用模擬器時，您為模擬和佈局定義選擇了特定設備，並將突出顯示相關斷點。 您所做的任何佈局更改都將適用於斷點應用到的其他設備，即位於活動斷點標籤左側、但位於下一個斷點標籤之前的任何設備。

例如，當您選擇設備​iPhone 6 Plus（定義為寬度為540像素）進行模擬和佈局時，斷點​Phone（定義為768像素）也將激活。 您對​iPhone 6​所做的任何佈局更改都將適用於​Phone​斷點下的其他設備，如​iPhone 5（定義為320像素）。

選擇要模擬的設備

1. 開啟所需的頁面進行編輯。 例如：

   http://localhost:4502/editor.html/content/we-retail/us/en/experience.html

2. 從頂部工具欄中選擇​Emulator​表徵圖：

   

3. 模擬器工具欄將開啟。

   

   模擬器工具列顯示其他版面選項：

   • 旋轉裝置 — 可讓您將裝置從垂直（縱向）方向旋轉為水準（橫向）方向，反之亦然。

   

   • 選取裝置 — 定義要從清單中模擬的特定裝置（如需詳細資訊，請參閱下一步）

   

4. 若要選取要模擬的特定裝置，您可以執行下列任一動作：

   • 使用「選取裝置」圖示，然後從下拉式選取器中選取。
   • 點選/按一下模擬器工具列中的裝置指示器。

   

5. 選取特定裝置後，您可以：

   • 請參閱所選設備的活動標籤，如​iPad。
   • 請參閱相應斷點的活動標籤，如​平板電腦。

   

   • 藍色虛線代表所選取裝置的​折（此處為​iPhone 6）。

   

   • 折頁也可視為內容的分頁符（請勿與斷點混淆）。 此畫面會隨即顯示，以方便顯示使用者在捲動前將在裝置上看到的內容。
   • 如果要模擬的設備的高度高於螢幕大小，則不會顯示折線。
   • 折頁會為作者方便而顯示，不會顯示在已發佈的頁面上。

新增版面容器及其內容 (編輯模式)

佈局容器​是段落系統，具有：

• 包含其他元件。
• 定義版面。
• 回應變更。

1. 「配 置容器 」是元件瀏覽器中的標準 元件。從這裡，您可以將其拖曳至頁面上的必要位置，之後您將看到「拖曳元件至此處 ​​」預留位置。

2. 然後，您可以將元件新增至版面容器。 這些元件將包含實際內容：

   

在佈局容器上選擇和執行操作（編輯模式）

與其他元件一樣，您可以選取「版面容器」，然後對（剪下、複製、刪除）「版面容器」採取動作（在​Edit​模式中時）:

1. 如果您滑鼠或點選格線預留位置，則會顯示動作功能表。

   

   您需要選擇​Parent​選項。

   

2. 如果嵌套佈局元件，則選擇​Parent​選項會顯示下拉選項，允許您選擇嵌套佈局容器或其父項。

   將滑鼠移至下拉式清單中的容器名稱上時，其外框會顯示在頁面上。

   • 最低巢狀佈局容器將以黑色外框。
   • 下一個最低的巢狀版面容器將以深灰色顯示。
   • 每個連續的容器都會有較淺的灰色。

   

3. 這將會反白顯示整個格線及其內容。 將顯示操作工具欄，您可以在其中選擇操作，如​Delete。

   

定義佈局（佈局模式）

若要設定使用「配置容器」實作的回應式格線的配置，您需要使用​Layout​模式。

​​Layoutmode可透過兩種方式啟動。

• 使用工具列 中的模式選單 ，然後選擇「 版面模式」

  • 選取「 版面 」模式，就像切換至「編輯 」模式或「 定位 ​​」模式。
  • 配置模式 (Layout mode)會維持持續性，而且您必須先透過模式選取器 選取其他模式，才能離開「配置」模式。

• 當編輯個別元件時。

  • 使用元件快速操作菜單中的​Layout​選項，可以切換到​Layout​模式。
  • ​​版面模式在編輯元件時持續存在，且一旦焦點變更至 ​​其他元件，就會回復為編輯模式。

在版面模式中時，您可以在格線上執行各種動作：

• 使用藍點調整內容元件的大小。 重新調整大小將始終靠齊網格。 調整背景網格大小時，將顯示以輔助對齊：

  

  注意

  調整​Images​等元件的大小時，將維持比例和比率。

• 按一下/點選內容元件，工具列可讓您：

  • 父級

    可讓您選取整個版面容器元件，以對整體採取動作。

  • 浮動至新行

    元件將根據網格中的可用空間移動到新行。

  • 隱藏元件

    元件將變為不可見（可從佈局容器的工具欄還原）。
    

• 在​Layout​模式中，您可以點選/按一下​Drag components here​以選取整個元件。 這會顯示此模式的工具列。

  工具列會根據版面元件的狀態及其所屬元件而有不同的選項。 例如：

  • 上層 — 選取上層元件。

  

  • 顯示隱藏的元件 — 顯示所有或個別元件。數字表示目前有多少個隱藏的元件。 計數器會顯示隱藏的元件數。

  

  • 還原斷點佈局 — 還原為預設佈局。這表示不會強加自訂版面。

  

  • 浮點到新行 — 如果間距允許，將元件上移一個位置。

  

  • 隱藏元件 — 隱藏當前元件。

  

  注意

  在上例中，浮點和隱藏操作是可用的，因為此「佈局容器」嵌套在父「佈局容器」中。

  • 取消隱
    藏元件選擇父元件以顯示操作工具欄，其中
    顯示隱藏的 元件選項。在此示例中，隱藏了兩個元件。
    

  選取「顯 示隱藏的元件 」(Show hidden components)選項，會以藍色顯示目前隱藏在原始位置的元件。

  

  選擇​Restore all​將取消隱藏所有隱藏的元件。