回應式版面

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像素)。

screen_shot_2018-03-23at084058

選擇要模擬的設備

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

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

  2. 從頂部工具欄中選擇​模擬器​表徵圖:

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

    screen_shot_2018-03-23at084551

    模擬器工具列會顯示其他版面配置選項:

    • 旋轉裝置 -可讓您將裝置從垂直(縱向)方向旋轉至水準(橫向)方向,反之亦然。

    • 選擇設備 -定義要從清單中模擬的特定設備(有關詳細資訊,請參閱下一步)

  4. 要選擇要模擬的特定設備,您可以:

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

    screen_shot_2018-03-23at084818

  5. 選擇特定設備後,您可以:

    • 請參閱選取裝置的作用中標籤,例如​iPad。
    • 請參閱適當斷點的活動標籤,例如​Tablet。

    screen_shot_2018-03-23at084932

    • 藍色虛線代表所選設備的​折疊(這裡是​iPhone 6)。

    screen_shot_2018-03-23at084947

    • 折線也可視為內容的分頁符號(不要與中斷點混淆)。 此為顯示方便的項目,讓使用者在捲動之前,先在裝置上看到哪些內容。
    • 如果要模擬的裝置的高度高於螢幕大小,則不會顯示折線。
    • 為方便作者,會顯示折頁,而不會顯示在發佈的頁面上。

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

版面容器​是一個段落系統,可:

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

如果尚未提供,則​版面容器​必須針對段落系統/頁面](/docs/experience-manager-65/administering/operations/configuring-responsive-layout.html?lang=zh-Hant)明確啟動[(例如,使用​Design​模式)。

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

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

    screen_shot_2018-03-23at085500

在版面容器上選取並採取動作(編輯模式)

和其他元件一樣,您可以選取版面容器,然後對(剪下、複製、刪除)執行動作(在​編輯​模式中):

注意

由於版面容器是段落系統,刪除元件會同時刪除版面格線和容器內所有元件(及其內容)。

  1. 如果您滑鼠或點選格線預留位置,就會顯示動作選單。

    screen_shot_2018-03-23at085357

    您需要選擇​Parent​選項。

  2. 如果版面元件是巢狀的,選取​Parent​選項會顯示下拉式選項,讓您選取巢狀版面容器或其父項。

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

    • 最低的巢狀版面容器將以黑色勾勒出來。
    • 倒數第二低的巢狀版面容器會是深灰色。
    • 每個連續的容器都會變淺灰色。

    screen_shot_2018-03-23at085636

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

    screen_shot_2018-03-23at085724

定義版面(版面模式)

注意

您可以為每個斷點定義單獨的佈局(由模擬設備類型和方向確定)。

若要設定使用「版面容器」實作之回應式格線的版面,您必須使用「版面​」模式。

Layout 模式可以通過兩種方式啟動。

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

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

    • 使用元件快速動作功能表中的​Layout​選項,可切換至​Layout​模式。
    • 在編 輯元件時,Layoutmode會持續存在,一旦焦點變更至其 ​他元件,就會回復為「編輯」模式。

在版面模式下,您可以對網格執行各種操作:

  • 使用藍點調整內容元件的大小。 調整大小將始終靠齊網格。 調整背景格線大小時,會顯示以協助對齊:

    screen_shot_2018-03-23at090140

    注意

    當調整元件(例如​Images)的大小時,比例和比例將保持不變。

  • 在內容元件上按一下/點選,工具列可讓您:

    • 父代

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

    • 浮動至新行

      元件將移動到新行,這取決於網格中可用的空間。

    • 隱藏元件

      元件將變為不可見(可從版面容器的工具列還原)。
      screen_shot_2018-03-23at090246

  • 在​Layout​模式中,您可以點選/按一下​拖曳元件至此處​以選取整個元件。 這將顯示此模式的工具欄。

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

    • Parent —— 選擇父元件。

    • 顯示隱藏元件 -顯示所有或個別元件。數字表示當前隱藏的元件數。計數器顯示隱藏的元件數。

    • 恢復斷點佈局 -恢復為預設佈局。這表示不會強加自訂版面。

    • 浮點到新行 -如果間距允許,將元件向上移動。

    screen_shot_2018-03-23at090829

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

    注意

    在上述範例中,浮點和隱藏動作是可用的,因為此「版面容器」是巢狀內嵌在父「版面容器」中。

    • 取消隱
      藏元件選取父級元件,以顯示動作工具列,其中包含
      顯示隱藏 元件選項。在此示例中,隱藏了兩個元件。
      screen_shot_2018-03-23at091200

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

    screen_shot_2018-03-23at091224

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

本頁內容