Responsive Layout是一種實現自適應網 頁設計的機制。這可讓使用者建立版面和尺寸視使用者使用的裝置而定的網頁。
這可與使用可調式網頁設計(主要針對傳統UI)的行動網頁機制進行比較。
AEM使用多種機制組合,為您的頁面實現互動式版面配置:
Layout Container元件
此元件提供格線段落系統,可讓您在回應式格線中新增和定位元件。 它可用作您頁面的預設參數,和/或讓元件瀏覽器中的作者使用。
預設的版面容器元件定義於:
/libs/wcm/foundation/components/responvegrid
您可以定義版面容器:
做為使用者可新增至頁面的元件。
作為頁面的預設參數。
兩者.
您可讓版面容器做為頁面的標準,同時允許使用者在其中新增更多版面容器;例如,要實現列控制。
版面
模式當版面容器定位在您的頁面上後,您就可以使用
「 版面」模式,將內容定位在回應式格線中。
模擬
器這可讓您建立和編輯互動式網站,透過互動方式調整元件大小,以根據裝置/視窗大小重新排列版面。然後,使用者就可以看到如何使用模擬器呈現內容。
雖然傳統UI中提供版面容器元件,但其完整功能僅在觸控式UI中提供。
有了這些互動式格點機制,您可以:
在現成可用的安裝中,已為We.Retail參考網站設定回應式版面。 您仍必須為其他頁面啟動「版面容器」元件。
這些工作可讓您在網站上看到回應式Emulator。
若要讓模擬器支援您的頁面,您必須註冊您的頁面元件。 請參閱註冊模擬的頁面元件。
要指定出現在模擬器「設備」清單中的設備組,請參閱指定設備組。
若要包含模擬器,您必須將網站連結至裝置群組。 請參閱新增裝置清單(適用於傳統和觸控最佳化的UI)。
這些程式用於啟用站點上的Layout模式。
中斷點:
用於互動式設計。
可定義:
定義標題和寬度:
使用模擬器時,在頁面編輯器頂部顯示為標籤。
繼承自父節點層次結構,可以隨意覆蓋。
有一個預設(現成可用)斷點,它覆蓋最後configured斷點之上的所有內容。
它們可使用CRXDE Lite或XML來定義。
如果您要設定新專案:
如果您要移轉現有專案(含現有內容),您需要:
繼承正在運作中時,您可以將繼承限制在內容的根頁面。
使用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>
*中斷點位於.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>
只有當頁面元件並非以基礎頁面元件為基礎時,才需要此功能。
將以下cq:infoProviders
節點結構複製到父頁元件中:
/libs/foundation/components/page/cq:infoProviders/responsive
這些過程是必需的,因此您可以在Layout模式中調整元件大小。
若要將頁面的主要參數設為版面容器,您必須將參數定義為:
wcm/foundation/components/responsivegrid
在下列任一項中:
以下兩個範例說明定義:
HTL:
<sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
JSP:
<cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
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
根據自適應格線大小,將調整保持在自適應容器中的元件大小(連同其各自的HTML DOM元素)。 因此,在這些情況下,建議避免(或更新)固定寬度(包含)DOM元素的定義。
例如:
變更前:
width=100px
變更後:
max-width=100px
在網格中調整元件大小時,將根據需要觸發以下偵聽程式:
beforeedit
beforechildedit
afteredit
afterchildedit
若要正確調整回應式格線中自適應影像的內容大小並更新,您必須將設定至REFRESH_PAGE
監聽器的afterEdit
新增至每個包含元件的EditConfig
檔案。
例如:
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
自適應影像機制通過控制窗口當前大小的正確影像選擇的指令碼來提供。 在DOM就緒或接收專用事件時啟動。 目前,頁面必須重新整理,才能正確反映使用者動作的結果。
自訂樣式表clientlibs必須載入為標題的一部分,才能在作者和發佈上正常運作。
這些工作可讓作者將Layout Container元件的例項拖曳至頁面上。
若要允許作者在內容頁面中新增更多回應式格點,您需要為頁面啟用「版面容器」元件。 您可以使用下列其中一種方式:
作者環境
使用設計模式來啟動頁面的圖層容器元件。
元件定義
定義元件時,請使用allowedComponent
或靜態包含。
您可以設定每個特定版面容器例項可用的欄數:
作者環境
您可以設定每個特定版面容器例項可用的欄數。
若要這麼做,請使用設計模式,然後開啟所需容器的設計對話方塊。 您可以在這裡指定定位和調整大小的欄數。 預設值為12。
XML
回應式格線的定義在:
etc/design/<*your-project-name*>/.content.xml
可定義下列參數:
可用欄數:
columns="{String}8"
可添加到當前元件的元件:
components="[/libs/wcm/foundation/components/responsivegrid, ...