Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器(例如_React_)。 了解更多.
設計網頁,以配合顯示網頁的用戶端檢視區。 透過多方互動設計,可以在多種裝置上以兩種方向有效顯示相同的頁面。 下列影像示範頁面回應檢視區大小變更的一些方式:
開發Adobe Experience Manager(AEM)應用程式,以產生可適應多種視窗大小和方向的HTML5頁面。 例如,下列視區寬度範圍與各種裝置類型和方向相對應
如需實作互動式設計行為的相關資訊,請參閱下列主題:
在設計時,請使用Sidekick來預覽各種螢幕大小的頁面。
在您開發支援網頁的AEM應用程式之前,應先做幾項設計決策。 例如,您需要有下列資訊:
典型的AEM應用程式結構支援所有互動式設計實作:
媒體查詢可選擇性使用CSS樣式來轉換頁面。 AEM開發工具和功能可讓您在應用程式中有效且有效率地建置媒體查詢。
W3C群組提供描述此CSS3功能和語法的媒體查詢建議。
在CSS檔案中,根據您所定位裝置的屬性來定義媒體查詢。 以下實施策略對於管理每個媒體查詢的樣式非常有效:
We.Retail Media範例使用此策略來定義網站設計中的樣式。 We.Retail使用的CSS檔案位於*/apps/weretail/clientlibs/clientlib-site/less/grid.less
。
下表列出css子檔案夾中的檔案。
檔案名稱 | 說明 | 媒體查詢 |
---|---|---|
style.css | 常用樣式。 | N/A |
bootstrap.css | 常用樣式,由Twitter引導定義。 | 不適用 |
responsive-1200px.css | 寬或寬1200像素的所有媒體樣式。 | @media(最小寬度:1200px){ |
responsive-980px-1199px.css | 介質的樣式,介於980像素和1199像素寬之間。 | @media(最小寬度:980px)和(最大寬度:1199px){ |
responsive-768px-979px.css | 介質的樣式,介於768像素和979像素寬之間。 | @media(最小寬度:768像素)和(最大寬度:979px){ |
responsive-767px-max.css | 寬度小於768像素的所有媒體樣式。 | @media(最大寬度:767px){ |
responsive-480px.css | 寬度小於481像素的所有媒體樣式。 | @media(最大寬度:480){ ... } |
/etc/designs/weretail/clientlibs
資料夾中的css.txt檔案會列出用戶端資料庫資料夾所包含的CSS檔案。 檔案順序實現樣式優先。 當裝置大小減少時,樣式會更具體。
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
提示:描述性檔案名稱可讓您輕鬆識別目標的檢視區大小。
在頁面元件的JSP指令碼中包含用戶端程式庫資料夾,以產生包含媒體查詢的CSS檔案,並參考該檔案。
<ui:includeClientLib categories="apps.weretail.all"/>
apps.weretail.all
用戶端程式庫資料夾會內嵌clientlibs程式庫。
JSP指令碼生成以下引用樣式表的HTML代碼:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css?lang=zh-Hant" type="text/css">
<link href="/etc/designs/weretail.css?lang=zh-Hant" rel="stylesheet" type="text/css">
檢視不同檢視區大小的頁面預覽,以測試互動式設計的行為。 在預覽模式中,Sidekick包含用於選擇裝置的裝置下拉式選單。 當您選取裝置時,頁面會隨著檢視區大小而改變。
若要在Sidekick中啟用裝置預覽,您必須設定頁面和MobileEmulatorProvider服務。 另一頁配置控制顯示在設備清單中的設備清單。
當您的頁面包含轉譯Devices清單的JSP指令碼時,Devices清單會出現在Sidekick中。 若要將Devices清單新增至Sidekick,請在您頁面的head
區段中加入/libs/wcm/mobile/components/simulator/simulator.jsp
指令碼。
在定義head
節的JSP中包含以下代碼:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp?lang=zh-Hant"/>
若要查看範例,請在CRXDE Lite中開啟/apps/weretail/components/page/head.jsp
檔案。
若要啟用裝置模擬器來支援您的頁面,請使用MobileEmulatorProvider工廠服務註冊您的頁面元件,並定義mobile.resourceTypes
屬性。
使用AEM時,有幾種方法可管理此類服務的組態設定;如需詳細資訊,請參閱設定OSGi。
例如,要在應用程式中建立 [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.html?lang=zh-Hant#adding-a-new-configuration-to-the-repository)
節點:
父資料夾:/apps/application_name/config
名稱: com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
- *alias*
尾碼是必需的,因為MobileEmulatorProvider服務是工廠服務。 使用此工廠唯一的別名。
jcr:primaryType: sling:OsgiConfig
添加以下節點屬性:
名稱: mobile.resourceTypes
類型: String[]
值:呈現您網頁的頁面元件路徑。 例如,geometrixx-media應用程式使用下列值:
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
要指定出現在「設備」清單中的設備組,請將cq:deviceGroups
屬性添加到站點根頁的jcr:content
節點。 屬性值是到設備組節點的路徑陣列。
設備組節點位於/etc/mobile/groups
資料夾中。
例如,Geometrixx Media網站的根頁面為/content/geometrixx-media
。 /content/geometrixx-media/jcr:content
節點包含以下屬性:
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
使用工具控制台建立和編輯設備組](/docs/experience-manager-64/sites-developing/groupfilters.html?lang=zh-Hant)。[
對於用於自適應設計的設備組,請編輯設備組,並在「常規」頁籤上選擇「禁用模擬器」。 此選項可防止模擬器轉盤出現,這與自適應設計無關。
您可以使用媒體查詢來選擇要顯示在頁面中的影像資源。 但是,使用媒體查詢條件化其使用的每個資源都會下載到客戶端。 媒體查詢僅確定是否顯示下載的資源。
對於大型資源(例如影像),下載所有資源並非對用戶端資料管道的有效使用。 若要選擇性下載資源,請在媒體查詢執行選擇後,使用javascript來啟動資源請求。
以下策略載入使用媒體查詢選擇的單個資源:
W3C定義的MediaQueryList介面實作可讓您使用javascript評估媒體查詢。 您可以將邏輯套用至媒體查詢結果,並執行目前視窗的指令碼:
實作MediaQueryList介面的瀏覽器支援window.matchMedia()
函式。 此函式會測試特定字串的媒體查詢。 該函式返回一個MediaQueryList
對象,該對象提供對查詢結果的訪問。
對於未實作介面的瀏覽器,您可使用matchMedia()
多角度填色,例如matchMedia.js,免費可用的javascript程式庫。
W3C建議的圖片元素使用媒體查詢來確定用於影像元素的源。 圖片元素使用元素屬性將媒體查詢與影像路徑關聯。
可自由使用的picturefill.js庫提供與建議的picture
元素類似的功能,並使用類似的策略。 picturefill.js庫調用window.matchMedia
來評估為一組div
元素定義的媒體查詢。 每個div
元素也指定影像來源。 當div
元素的媒體查詢返回true
時,將使用源。
picturefill.js
程式庫需要類似下列範例的HTML程式碼:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
</div>
在呈現頁面時,picturefull.js會將img
元素插入為<div data-picture>
元素的最後一個子項:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
<img src="path to medium image">
</div>
在AEM頁面中,data-src
屬性的值是儲存庫中資源的路徑。
若要在AEM應用程式中實作最適化影像,您需要新增必要的javascript程式庫,並在您的頁面中加入必要的HTML標籤。
資料庫
取得下列javascript程式庫,並將它們加入用戶端程式庫資料夾:
/etc/clientlibs/granite/jquery
用戶端程式庫資料夾取得)(類別= jquery)提示:您 可以透過內嵌自動串連多個用戶端程式庫 資料夾。
HTML
建立元件,以產生pictureincl.js程式碼所需的div元素。 在AEM頁面中,data-src屬性的值是儲存庫中資源的路徑。 例如,頁面元件可在DAM中硬式編碼媒體查詢和影像轉譯的相關路徑。 或者,建立自訂的影像元件,讓作者可以選取影像轉譯或指定執行時期轉譯選項。
下列範例HTML會從相同影像的2個DAM轉譯中選取。
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
最適化影像基礎元件可建置最適化影像:
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
後續部分提供了有關此元件的詳細資訊。
若要自訂影像演算,您應瞭解預設的AEM靜態影像演算實作。 AEM提供影像元件和影像轉換servlet,可搭配運作來轉換網頁的影像。 當頁面的段落系統中包含影像元件時,會發生下列事件順序:
例如,Image元件的JSP將生成以下HTML元素:
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg?lang=zh-Hant">
當瀏覽器載入頁面時,會使用src屬性的值作為URL來要求影像。 Sling會解構URL:
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
image_0
節點的jcr:resourceType
值foundation/components/image
,sling:resourceSuperType
值foundation/components/parbase
。 parbase元件包含img.GET.java指令碼,該指令碼與選擇器和請求URL的檔案副檔名匹配。 CQ使用此指令碼(servlet)來呈現影像。
若要查看指令碼的原始碼,請使用CRXDE Lite來開啟/libs/foundation/components/parbase/img.GET.java
檔案。
根據用戶端檢視器的特性,在執行時期縮放影像,以提供符合自適應設計原則的影像。 使用與靜態影像演算相同的設計模式,使用servlet和編寫元件。
元件需要執行以下任務:
div
元素,以呈現影像。網頁用戶端使用matchMedia和Picturefilljavascript程式庫(或類似程式庫)來評估媒體選擇器。
處理映像請求的Servlet需要執行以下任務:
可用的解決方案
AEM會安裝下列您可使用或擴充的實作。
自適應影像元件生成對自適應影像元件Servlet的調用,以呈現根據設備螢幕調整大小的影像。 該元件包括以下資源:
cq:ClientLibraryFolder
,會組合matchMediapolyfill javascript程式庫和已修改的Pictureincljavascript程式庫。cq:editConfig
節點覆寫CQ基礎影像元件,以便放置目標建立自適應影像元件而不是基礎影像元件。adaptive-image.jsp指令碼包含以下生成div元素和媒體查詢的代碼:
<div data-picture data-alt='<%= alt %>'>
<div data-src='<%= path + ".img.320.low." + extension + suffix %>' data-media="(min-width: 1px)"></div> <%-- Small mobile --%>
<div data-src='<%= path + ".img.320.medium." + extension + suffix %>' data-media="(min-width: 320px)"></div> <%-- Portrait mobile --%>
<div data-src='<%= path + ".img.480.medium." + extension + suffix %>' data-media="(min-width: 321px)"></div> <%-- Landscape mobile --%>
<div data-src='<%= path + ".img.476.high." + extension + suffix %>' data-media="(min-width: 481px)"></div> <%-- Portrait iPad --%>
<div data-src='<%= path + ".img.620.high." + extension + suffix %>' data-media="(min-width: 769px)"></div> <%-- Landscape iPad --%>
<div data-src='<%= path + ".img.full.high." + extension + suffix %>' data-media="(min-width: 1025px)"></div> <%-- Desktop --%>
<%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
<noscript>
<img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
</noscript>
</div>
path
變數包含當前資源的路徑(adaptive-image元件節點)。 代碼生成一系列div
元素,其結構如下:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
data-scr
屬性的值是Sling解析至轉譯影像的Adaptive Image Component Servlet的URL。 data-media屬性包含根據用戶端屬性評估的媒體查詢。
以下HTML代碼是JSP生成的div
元素的示例:
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg' data-media="(min-width: 320px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg' data-media="(min-width: 321px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg' data-media="(min-width: 481px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg' data-media="(min-width: 769px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg' data-media="(min-width: 1025px)"></div>
如果自定義最適化映像元件並更改寬度選擇器,則還必須配置最適化映像元件Servlet以支援寬度。
最適化影像元件Servlet會根據指定的寬度調整JPEG影像的大小,並設定JPEG品質。
Adaptive Image Component Servlet會系結至預設的Sling Servlet,並支援。jpg、.jpeg、.gif和。png副檔名。 servlet選擇器是img。
AEM不支援動態。gif檔案以進行最適化轉譯。
因此,Sling會將下列格式的HTTP要求URL解析為此servlet:
*path-to-node*.img.*extension*
例如,Sling會將URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
的HTTP請求轉送至Adaptive Image Component Servlet。
另外兩個選擇器會指定要求的影像寬度和JPEG品質。 以下範例要求寬度為480像素且中等品質的影像:
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
支援的影像屬性
Servlet接受有限數量的影像寬度和質量。 預設支援下列寬度(以像素為單位):
完整值表示無縮放。
支援下列JPEG品質值:
數值分別為0.4、0.82和1.0。
變更預設支援寬度
使用Web Console(http://localhost:4502/system/console/configMgr)或sling:OsgiConfig節點來設定Adobe CQ Adaptive Image Component Servlet支援的寬度。
如需如何設定AEM服務的詳細資訊,請參閱「設定OSGi](/docs/experience-manager-64/deploying/configuring/configuring-osgi.html?lang=zh-Hant)」。[
Web控制台 | sling:OsgiConfig | |
---|---|---|
服務或節點名稱 | 「配置」頁籤上的服務名是Adobe CQ Adaptive Image Component Servlet | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
屬性 | 支援的寬度
|
adapt.supported.widths
|
com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
類擴展了AbstractImageServlet類。 AdaptiveImageComponentServlet原始碼位於/libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
資料夾中。
類使用Felix SCR注釋來配置servlet所關聯的資源類型和檔案副檔名以及第一個選擇器的名稱。
@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value ={
"jpg",
"jpeg",
"png",
"gif"
}, propertyPrivate = true)
})
Servlet使用屬性SCR注釋來設定預設支援的影像質量和尺寸。
@Property(value = {
"320", // iPhone portrait
"480", // iPhone landscape
"476", // iPad portrait
"620" // iPad landscape
},
label = "Supported Widths",
description = "List of widths this component is permitted to generate.")
AbstractImageServlet
類提供處理HTTP請求的doGet
方法。 此方法確定與請求關聯的資源,從儲存庫中檢索資源屬性,並在ImageContext對象中返回它們。
com.day.cq.commons.DownloadResource類提供getFileReference method
,用於檢索資源的fileReference
屬性的值。
AdaptiveImageComponentServlet
類覆蓋createLayer
方法。 該方法從ImageContext
對象獲得影像資源的路徑和所請求的影像寬度。 然後,它調用info.geometrixx.commons.impl.AdaptiveImageHelper
類的方法,該類執行實際的影像縮放。
AdaptiveImageComponentServlet類還覆蓋writeLayer方法。 此方法會將JPEG品質套用至影像。
示例Image Reference Modification Servlet為img元素生成大小屬性,以在網頁上縮放影像。
Servlet綁定到cq:page
資源,並支援。jpg檔案副檔名。 servlet選擇器為image
。 因此,Sling會將下列格式的HTTP要求URL解析為此servlet:
path-to-page-node.image.jpg
例如,Sling會將URL http://localhost:4502/content/geometrixx/en.image.jpg
的HTTP請求轉送至Image Reference Modification Servlet。
另外3個選擇器會指定所要求的影像寬度、高度和(選擇性)品質。 以下範例要求寬度為770像素、高度為360像素和中等品質的影像。
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
支援的影像屬性
Servlet接受有限數量的影像尺寸和質量值。
預設支援下列值(widthxheight):
支援下列影像品質值:
使用AEM時,有幾種方法可管理此類服務的組態設定;如需詳細資訊,請參閱設定OSGi。
映像路徑、維和質量值必須儲存為儲存庫中節點的屬性:
節點名稱為image
。
父節點是cq:page
資源的jcr:content
節點。
影像路徑儲存為名為fileReference
的屬性的值。
製作頁面時,請使用Sidekick來指定影像並將image
節點新增至頁面屬性:
info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet類可擴展AbstractImageServlet類。 如果您已安裝cq-geometrixx-commons-pkg套件,ImageReferenceModificationServlet原始碼就位於/apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
資料夾中。
類使用Felix SCR注釋來配置servlet所關聯的資源類型和檔案副檔名以及第一個選擇器的名稱。
@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})
Servlet使用屬性SCR注釋來設定預設支援的影像質量和尺寸。
@Property(label = "Image Quality",
description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
"256x192", // Category page article list images
"370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
"480x200", // "Most popular" phone
"127x127", // article summary phone square images
"770x360", // article summary, desktop
"620x290", // article summary, tablet
"480x225", // article summary, phone (landscape)
"320x150", // article summary, phone (portrait) and fallback
"375x175", // 2-column article summary, desktop
"303x142", // 2-column article summary, tablet
"1170x400", // carousel, full
"940x340", // carousel min-width: 980px
"770x300", // carousel min-width: 768px
"480x190" // carousel min-width: 480px
},
label = "Supported Resolutions",
description = "List of resolutions this component is permitted to generate.")
AbstractImageServlet
類提供處理HTTP請求的doGet
方法。 此方法確定與調用相關聯的資源,從儲存庫中檢索資源屬性,並將它們保存在ImageContext對象中。
ImageReferenceModificationServlet
類別會覆寫createLayer
方法,並實作決定要演算的影像資源的邏輯。 該方法檢索頁面jcr:content
節點的子節點,該節點名為image
。 從此image
節點建立Image對象,並且getFileReference
方法從影像節點的fileReference
屬性返回到影像檔案的路徑。
com.day.cq.commons.DownloadResource類提供getFileReference方法。
AEM可讓您有效率地建置流暢格點。 本頁說明如何將流暢格點或現有的格點實作(例如Bootstrap)整合至AEM應用程式。
如果您不熟悉流暢格線,請參閱本頁底部的流暢格線簡介一節。 本文概述了流體網格的設計,並對流體網格的設計進行了指導。
使用頁面元件來產生定義頁面內容區塊的HTML元素。 頁面參照的ClientLibraryFolder提供控制內容區塊配置的CSS:
例如,範例geometrixx-media應用程式包含media-home元件。 此頁元件插入兩個指令碼,這些指令碼生成兩個row-fluid
類的div
元素:
第一行包含span12
類的div
元素(內容涵蓋12欄)。 div
元素包含parsys元件。
第二行包含兩個div
元素,一個是span8
類,另一個是span4
類。 每個div
元素都包含parsys元件。
<div class="page-content">
<div class="row-fluid">
<div class="span12">
<cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
</div>
</div>
<div class="row-fluid">
<div class="span8">
<cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
</div>
<div class="span4">
<cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
</div>
</div>
</div>
當元件包含多個引用parsys元件的cq:include
元素時,每個path
屬性必須有不同的值。
與geometrixx-media頁面元件(/etc/designs/geometrixx-media
)關聯的設計包含clientlibs
ClientLibraryFolder。 此ClientLibraryFolder為row-fluid
類、span*
類和span*
類定義CSS樣式,這些類是row-fluid
類的子類。 媒體查詢可針對不同的視區大小重新定義樣式。
以下範例CSS是這些樣式的子集。 此子集著重於span12
、span8
和span4
類,以及兩種視區大小的媒體查詢。 請注意CSS的下列特性:
.span
樣式使用絕對數字定義元素寬度。.row-fluid .span*
樣式將元素寬度定義為父項的百分比。 百分比是從絕對寬度計算。Geometrixx Media範例將Bootstrapjavascript架構整合至其流暢格點實作。 Bootstrap架構提供bootstrap.css檔案。
/* default styles (no media queries) */
.span12 { width: 940px }
.span8 { width: 620px }
.span4 { width: 300px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.95744680851064% }
.row-fluid .span4 { width: 31.914893617021278% }
@media (min-width: 768px) and (max-width: 979px) {
.span12 { width: 724px; }
.span8 { width: 476px; }
.span4 { width: 228px; }
.row-fluid .span12 { width: 100%;}
.row-fluid .span8 { width: 65.74585635359117%; }
.row-fluid .span4 { width: 31.491712707182323%; }
}
@media (min-width: 1200px) {
.span12 { width: 1170px }
.span8 { width: 770px }
.span4 { width: 370px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.81196581196582% }
.row-fluid .span4 { width: 31.623931623931625% }
}
範例Geometrixx Media應用程式的頁面會以水準方式在廣角區域中散布內容區塊列。 在較小的視區中,相同的區塊垂直分佈。 下列範例CSS顯示媒體首頁元件所產生之HTML程式碼實作此行為的樣式:
媒體歡迎頁面的預設CSS會為span*
類別中的row-fluid
類別指派float:left
樣式。
對較小視區的媒體查詢為相同類指定float:none
樣式。
/* default styles (no media queries) */
.row-fluid [class*="span"] {
width: 100%;
float: left;
}
@media (max-width: 767px) {
[class*="span"], .row-fluid [class*="span"] {
float: none;
width: 100%;
}
}
將元件模組化,以有效率地使用程式碼。 您的網站可能使用幾種不同的頁面類型,例如歡迎頁面、文章頁面或產品頁面。 每種頁面類型都包含不同的內容類型,並可能使用不同的版面。 不過,當每個版面的某些元素在多個頁面間共用時,您可以重複使用實作該部分版面的程式碼。
使用頁面元件覆蓋
建立首頁元件,該元件提供用於生成頁面各部分的指令碼,如主體內的head
和body
部分,以及header
、content
和footer
部分。
建立使用首頁面元件作為cq:resourceSuperType
的其他頁面元件。 這些元件包含可視需要覆寫首頁面指令碼的指令碼。
例如,goemetrixx-media應用程式包含頁面元件(sling:resourceSuperType
是基礎頁面元件)。 數個子元件(例如文章、類別和媒體首頁)會將此頁面元件用作sling:resourceSuperType
。 每個子元件都包含一個content.jsp檔案,該檔案會覆蓋頁元件的content.jsp檔案。
重複使用指令碼
建立多個JSP指令碼,這些指令碼生成多個頁面元件常用的行和列組合。 例如,文章的content.jsp
指令碼和media-home元件都會參照8x4col.jsp
指令碼。
依目標檢視區大小組織CSS樣式
在個別檔案中加入CSS樣式和媒體查詢,以檢視不同的檢視區大小。 使用用戶端程式庫資料夾來串連這些資料夾。
當元件產生單一內容區塊時,通常頁面元件建立的格線會控制內容的放置。
作者應注意,內容區塊可以以各種大小和相對位置呈現。 內容文字不應使用相對方向來參照其他內容區塊。
如有必要,元件應提供其產生之HTML程式碼所需的任何CSS或javascript程式庫。 在元件內使用用戶端程式庫資料夾來產生CSS和JS檔案。 若要公開檔案,請建立相依關係,或將程式庫內嵌在/etc資料夾下的其他用戶端程式庫資料夾中。
子格線
如果元件包含多個內容區塊,請在列內新增內容區塊,以建立頁面上的子格線:
例如,/apps/geometrixx-media/components/2-col-article-summary
元件會產生兩欄內容。 其產生的HTML具有下列結構:
<div class="row-fluid mutli-col-article-summary">
<div class="span6">
<article>
<div class="article-summary-image">...</div>
<div class="social-header">...</div>
<div class="article-summary-description">...</div>
<div class="social">...</div>
</article>
</div>
</div>
頁面CSS的.row-fluid .span6
選擇器會套用至此HTML中相同類別和結構的div
元素。 不過,此元件也包含/apps/geometrixx-media/components/2-col-article-summary/clientlibs用戶端程式庫資料夾:
div
元素的multi-col-article-summary
類覆蓋頁面row-fluid
類的行為。例如,/apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
檔案中包含下列樣式:
@media (max-width: 480px) {
.mutli-col-article-summary .article-summary-image {
float: left;
width: 127px;
}
.mutli-col-article-summary .article-summary-description {
width: auto;
margin-left: 127px;
}
.mutli-col-article-summary .article-summary-description h4 {
padding-left: 10px;
}
.mutli-col-article-summary .article-summary-text {
margin-left: 127px;
min-height: 122px;
top: 0;
}
}
流暢格點可讓頁面版面配合用戶端檢視區的尺寸。 格線由邏輯欄和行組成,這些列將內容區塊放置在頁面上。
使用HTML5技術,您可以建置格線並加以控制,以根據不同的檢視區大小調整頁面版面:
div
元素包含跨多個特定欄的內容區塊。針對您要定位的每個檢視區寬度範圍,請使用固定寬度的靜態頁面寬度和內容區塊。 當手動調整瀏覽器視窗大小時,內容大小的變更會發生在離散視窗寬度(也稱為中斷點)。 因此,頁面設計會更緊密地黏附在一起,讓使用者體驗最大化。
使用格點來縮放內容區塊,以配合不同的檢視區大小。 內容區塊會跨越特定數目的欄。 隨著欄寬的增加或減少以適合不同的檢視區大小,內容區塊的寬度也隨之增加或減少。 縮放可支援大型和中型的檢視區,其寬度足以容納內容區塊並排放置。
內容區塊的大小可以受到最小寬度的限制,超過此限度縮放不再有效。 對於較小的視區,格線可用來垂直分佈內容區塊,而非水準分佈。
決定您在頁面上放置內容區塊所需的欄和列。 您的頁面版面會決定跨網格的欄數和列數。
欄數
在所有版面中加入足夠的欄,以水準放置內容區塊(視區大小)。 您應使用比目前需要多的欄來容納未來的頁面設計。
列內容
使用列來控制內容區塊的垂直位置。 確定共用相同列的內容區塊:
建立CSS類別和樣式,以控制頁面上內容區塊的版面配置。 頁面設計通常根據檢視區內內容區塊的相對大小和位置。 視區會決定內容區塊的實際大小。 您的CSS必須考慮相對和絕對大小。 您可以使用三種類型的CSS類別來實作流暢格點:
div
元素的類,它是所有行的容器。 此類設定網格的絕對寬度。div
元素的類。 此類別控制其所含內容區塊的水準或垂直位置。div
元素的類別,代表不同寬度的內容區塊。 寬度以父項(行)的百分比表示。定位的檢視區寬度(及其相關的媒體查詢)會標定用於頁面版面的離散寬度。
通常,內容區塊類的width
樣式是根據您頁面和格線的下列特性:
CSS包含一系列使用下列結構的媒體查詢:
@media(query_for_targeted_viewport){
.class_for_container{ width:absolute_page_width }
.class_for_row { width:100%}
/* several selectors for content blocks */
.class_for_content_block1 { width:absolute_block_width1 }
.class_for_content_block2 { width:absolute_block_width2 }
...
/* several selectors for content blocks inside rows */
.class_for_row .class_for_content_block1 { width:relative_block_width1 }
.class_for_row .class_for_content_block2 { width:relative_block_width2 }
...
}
使用下列演算法來開發頁面的元素類別和CSS樣式。
為包含所有行的div元素定義類名,例如content.
為div元素定義一個CSS類別,該元素代表行,例如row-fluid
。
定義內容區塊元素的類別名稱。 對於所有可能的寬度(以列範圍而言),都需要一個類。 例如,對於跨3列的div
元素使用span3
類,對於跨4列的span4
類。 定義網格中任意多個類。
針對您所定位的每個檢視區大小,將對應的媒體查詢新增至CSS檔案。 在每個媒體查詢中新增下列項目:
content
類別的選擇器,例如.content{}
。.span3{ }
。row-fluid
類別的選擇器,例如.row-fluid{ }
.row-fluid span3 { }
。為每個選取器新增寬度樣式:
content
選擇器的寬度設定為頁面的絕對大小,例如width:480px
。(absolute width of page)/(number of columns)
。.row-fluid .span
選擇器的寬度設為總寬度的百分比。 使用(absolute span width)/(absolute page width)*100
公式計算此寬度。使用.row-fluid
類的浮點樣式來控制行中的內容塊是水準排列還是垂直排列。
float:left
或float:right
樣式會造成子元素(內容區塊)的水準分佈。
float:none
樣式會導致子元素的垂直分佈。
將樣式新增至每個媒體查詢內的.row-fluid
選擇器。 根據您用於該媒體查詢的頁面配置設定值。 例如,下圖說明了一行,該行水準分佈內容用於寬視區,垂直分佈內容用於窄視區。
下列CSS可實作此行為:
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
針對您要定位的每個檢視區大小的頁面版面配置,決定每個內容區塊涵蓋的欄數。 然後,確定要用於這些內容塊的div元素的類。
建立div類別後,您可以使用AEM應用程式實作格線。