網頁自適應設計

注意

Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器（例如_React_）。了解更多.

設計網頁，以配合顯示網頁的用戶端檢視區。透過多方互動設計，可以在多種裝置上以兩種方向有效顯示相同的頁面。下列影像示範頁面回應檢視區大小變更的一些方式：

版面配置：對較小的視區使用單欄版面，對較大的視區使用多欄版面。
文字大小：在較大的檢視區中使用較大的文字大小（如適當時，例如標題）。
內容：在較小的裝置上顯示時，僅包含最重要的內容。
導覽：提供裝置專用工具以存取其他頁面。
影像：為客戶端視區提供適合的映像轉譯。根據窗口尺寸。

chlimage_1-4

開發Adobe Experience Manager(AEM)應用程式，以產生可適應多種視窗大小和方向的HTML5頁面。例如，下列視區寬度範圍與各種裝置類型和方向相對應

最大寬度為480像素（手機、縱向）
最大寬度為767像素（手機、橫向）
768像素和979像素之間的寬度（平板電腦、縱向）
寬度介於980像素和1199像素（平板電腦、橫向）
寬度為1200像素或更高（桌上型）

如需實作互動式設計行為的相關資訊，請參閱下列主題：

在設計時，請使用Sidekick來預覽各種螢幕大小的頁面。

在開發之前

在您開發支援網頁的AEM應用程式之前，應先做幾項設計決策。例如，您需要有下列資訊：

您要定位的裝置。
目標視區大小。
每個目標視區大小的頁面佈局。

應用程式結構

典型的AEM應用程式結構支援所有互動式設計實作：

頁面元件位於/apps/application_name/components下方
範本位於/apps/application_name/templates下
設計位於/etc/designs下方

使用媒體查詢

媒體查詢可選擇性使用CSS樣式來轉換頁面。 AEM開發工具和功能可讓您在應用程式中有效且有效率地建置媒體查詢。

W3C群組提供描述此CSS3功能和語法的媒體查詢建議。

建立CSS檔案

在CSS檔案中，根據您所定位裝置的屬性來定義媒體查詢。以下實施策略對於管理每個媒體查詢的樣式非常有效：

使用ClientLibraryFolder來定義在轉譯頁面時組合的CSS。
在個別的CSS檔案中定義每個媒體查詢和相關的樣式。使用代表媒體查詢裝置功能的檔案名稱很實用。
在個別的CSS檔案中定義所有裝置通用的樣式。
在ClientLibraryFolder的css.txt檔案中，依組合的CSS檔案中的要求來排序清單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

提示:描述性檔案名稱可讓您輕鬆識別目標的檢視區大小。

將媒體查詢與AEM頁面搭配使用

在頁面元件的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包含用於選擇裝置的裝置下拉式選單。當您選取裝置時，頁面會隨著檢視區大小而改變。

chlimage_1-5

若要在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來啟動資源請求。

以下策略載入使用媒體查詢選擇的單個資源：

為每個資源版本添加DIV元素。將資源的URI作為屬性值。瀏覽器不會將屬性解譯為資源。
將媒體查詢添加到適合該資源的每個DIV元素。
當檔案載入或視窗調整大小時，javascript程式碼會測試每個DIV元素的媒體查詢。
根據查詢結果，確定要包括的資源。
在參考資源的DOM中插入HTML元素。

使用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中實作最適化影像

若要在AEM應用程式中實作最適化影像，您需要新增必要的javascript程式庫，並在您的頁面中加入必要的HTML標籤。

資料庫

取得下列javascript程式庫，並將它們加入用戶端程式庫資料夾：

matchMedia.js （適用於未實作MediaQueryList介面的瀏覽器）
picturefindler.js
jquery.js（可透過/etc/clientlibs/granite/jquery用戶端程式庫資料夾取得）（類別= jquery）
jquery.debouncedresize.js （在調整視窗大小後發生一次的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
產生HTML的指令碼：/libs/foundation/components/adaptiveimage/adaptiveimage.jsp

後續部分提供了有關此元件的詳細資訊。

瞭解AEM中的影像演算

若要自訂影像演算，您應瞭解預設的AEM靜態影像演算實作。 AEM提供影像元件和影像轉換servlet，可搭配運作來轉換網頁的影像。當頁面的段落系統中包含影像元件時，會發生下列事件順序：

編寫：作者會編輯影像元件，以指定要包含在HTML頁面中的影像檔案。檔案路徑儲存為Image元件節點的屬性值。
頁面要求：頁面元件的JSP會產生HTML程式碼。 Image元件的JSP將生成一個img元素並將其添加到頁面中。
影像要求：網頁瀏覽器會載入頁面，並根據img元素的src屬性要求影像。
影像演算：影像轉換servlet會將影像傳回至網頁瀏覽器。

chlimage_1-6

例如，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會安裝下列您可使用或擴充的實作。

產生媒體查詢的Adaptive Image基礎元件，以及對可調整影像的Adaptive Image元件Servlet的HTTP請求。
Geometrixx Commons套件會安裝影像參考修改Servlet範例servlet，以變更影像解析度。

瞭解最適化影像元件

自適應影像元件生成對自適應影像元件Servlet的調用，以呈現根據設備螢幕調整大小的影像。該元件包括以下資源：

JSP:新增div元素，將媒體查詢與呼叫關聯至最適化影像元件Servlet。
用戶端程式庫：clientlibs資料夾是cq:ClientLibraryFolder，會組合matchMediapolyfill javascript程式庫和已修改的Pictureincljavascript程式庫。
編輯對話框：cq:editConfig節點覆寫CQ基礎影像元件，以便放置目標建立自適應影像元件而不是基礎影像元件。

添加DIV元素

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以支援寬度。

瞭解Adaptive Image元件Servlet

最適化影像元件Servlet會根據指定的寬度調整JPEG影像的大小，並設定JPEG品質。

自適應映像元件Servlet的介面

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接受有限數量的影像寬度和質量。預設支援下列寬度（以像素為單位）:

完整
320
480
476
620

完整值表示無縮放。

支援下列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 屬性是多值字串值。

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品質套用至影像。

影像參考修改Servlet(Geometrixx Common)

示例Image Reference Modification Servlet為img元素生成大小屬性，以在網頁上縮放影像。

調用servlet

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):

256x192
370x150
480x200
127x127
770x360
620x290
480x225
320x150
375x175
303x142
1170x400
940x340
770x300
480x190

支援下列影像品質值：

低
中
高

使用AEM時，有幾種方法可管理此類服務的組態設定；如需詳細資訊，請參閱設定OSGi。

指定影像資源

映像路徑、維和質量值必須儲存為儲存庫中節點的屬性：

節點名稱為image。
父節點是cq:page資源的jcr:content節點。
影像路徑儲存為名為fileReference的屬性的值。

製作頁面時，請使用Sidekick來指定影像並將image節點新增至頁面屬性：

在Sidekick中，按一下Page標籤，然後按一下Page Properties。
按一下「影像」標籤並指定影像。
按一下「確定」。

實施詳細資訊

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:

頁面元件：新增div元素，代表內容區塊的列。代表內容區塊的div元素包含作者新增內容的parsys元件。
客戶端庫資料夾：提供包含div元素之媒體查詢和樣式的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資料夾下的其他用戶端程式庫資料夾中。

子格線

如果元件包含多個內容區塊，請在列內新增內容區塊，以建立頁面上的子格線：

使用與包含頁面元件相同的類別名稱，將div元素表示為列和內容區塊。
若要覆寫頁面設計的CSS實作的行為，請為列div元素使用第二個類別名稱，並在用戶端資料庫資料夾中提供相關的CSS。

例如，/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用戶端程式庫資料夾：

CSS使用與頁面元件相同的媒體查詢，以建立相同離散頁面寬度的版面配置變更。
選擇器使用行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技術，您可以建置格線並加以控制，以根據不同的檢視區大小調整頁面版面：

HTML div元素包含跨多個特定欄的內容區塊。
當這些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 { }。
為每個選取器新增寬度樣式：
1. 將content選擇器的寬度設定為頁面的絕對大小，例如width:480px。
2. 將所有列流體選擇器的寬度設為100%。
3. 將所有範圍選擇器的寬度設定為內容塊的絕對寬度。瑣碎的網格使用相同寬度的均勻分佈列：(absolute width of page)/(number of columns)。
4. 將.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
   }
}