網頁自適應設計

注意

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" type="text/css">
<link href="/etc/designs/weretail.css" 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"/>

若要查看範例，請在CRXDE Lite中開啟/apps/weretail/components/page/head.jsp檔案。

註冊頁面元件以進行模擬

若要啟用裝置模擬器來支援您的頁面，請使用MobileEmulatorProvider工廠服務註冊您的頁面元件，並定義mobile.resourceTypes屬性。

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

例如，要在應用程式中建立 [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.md#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

使用工具控制台建立和編輯設備組。

注意

對於用於自適應設計的設備組，請編輯設備組，並在「常規」頁籤上選擇「禁用模擬器」。此選項可防止模擬器轉盤出現，這與自適應設計無關。

使用最適化影像

您可以使用媒體查詢來選擇要顯示在頁面中的影像資源。但是，使用媒體查詢條件化其使用的每個資源都會下載到客戶端。媒體查詢僅確定是否顯示下載的資源。

對於大型資源（例如影像），下載所有資源並非對用戶端資料管道的有效使用。若要選擇性下載資源，請在媒體查詢執行選擇後，使用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">

當瀏覽器載入頁面時，會使用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」。

	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
   }
}

為內容塊分配類

針對您要定位的每個檢視區大小的頁面版面配置，決定每個內容區塊涵蓋的欄數。然後，確定要用於這些內容塊的div元素的類。

建立div類別後，您可以使用AEM應用程式實作格線。

adobe.com 上的資源

Automated Onboarding Style System Customer Communications Responsive Forms Managed Cloud Digital Asset Management

網頁自適應設計

在開發之前

應用程式結構

使用媒體查詢

建立CSS檔案

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

預覽特定裝置

添加設備清單

註冊頁面元件以進行模擬

指定設備組

使用最適化影像

使用Javascript評估媒體查詢

選擇媒體特定資源

在AEM中實作最適化影像

瞭解AEM中的影像演算

縮放當前視區大小的影像

瞭解最適化影像元件

添加DIV元素

更改影像大小選擇器

瞭解Adaptive Image元件Servlet

自適應映像元件Servlet的介面

實施詳細資訊

影像參考修改Servlet(Geometrixx Common)

調用servlet

指定影像資源

實施詳細資訊

開發流體網格

使用頁面元件定義網格

縮放頁面元件網格

重新定位頁面元件網格中的內容

模組化您的頁面元件

將元件插入頁網格

流體格線簡介

使用離散寬度

縮放網格

重新定位網格中的內容

設計網格

網格實現

內容區塊寬度

在行中定位內容塊

為內容塊分配類

adobe.com 上的資源

本頁內容

檢視下一個: