建立功能完整的網站(JSP)

注意

本文說明如何使用JSP並以傳統的UI為基礎建立網站。 Adobe建議您運用最新的AEM技術來建立網站,如Getting Started Developing AEM Sites文章中所述。

本教學課程可讓您使用Adobe Experience Manager(AEM)建立功能完整的網站。 該網站將以一般網站為基礎,主要針對網頁開發人員。 所有開發工作都將在作者環境中進行。

本教學課程說明如何:

  1. 安裝AEM。

  2. 存取CRXDE Lite(開發環境)。

  3. 在CRXDE Lite中設定專案結構。

  4. 建立範本、元件和指令碼,做為建立內容頁面的基礎。

  5. 建立網站的根頁面,然後建立內容頁面。

  6. 建立下列元件以用於您的頁面:

    • 上層導覽
    • 列出子項
    • 標誌
    • 影像
    • 文字影像
    • 搜尋
  7. 包含各種基礎元件。

執行完所有步驟後,您的頁面外觀如下:

chlimage_1-99

下載最終結果

若要遵循教學課程而非執行練習,請下載website-1.0.zip。 此檔案是AEM內容套件,包含本教學課程的結果。 使用Package Manager將套件安裝至您的作者實例。

注意

安裝此套件將會覆寫您使用本教學課程所建立的編寫執行個體上的所有資源。

網站內容套件

取得檔案

安裝Adobe Experience Manager

若要安裝AEM例項以開發您的網站,請依照相關指示,設定部署環境與作者及發佈例項,或執行一般安裝。 一般安裝包括下載AEM Quickstart JAR檔案、將license.properties檔案置於與JAR檔案相同的目錄中,以及連按兩下JAR檔案。

安裝AEM後,按一下「歡迎」頁面上的CRXDE Lite連結,以存取CRXDE Lite開發環境:

chlimage_1-100

注意

AEM製作例項的CRXDE Lite URL(使用預設連接埠本機安裝的AEM製作例項)為http://localhost:4502/crx/de/

在CRXDE Lite中設定項目結構

使用CRXDE Lite在儲存庫中建立mywebsite應用程式結構:

  1. 在CRXDE Lite左側的樹狀結構中,以滑鼠右鍵按一下​/apps​資料夾,然後按一下「建立>建立資料夾​」。​在​建立資料夾​對話框中,鍵入mywebsite作為資料夾名稱,然後按一下​確定

  2. 按一下右鍵/apps/mywebsite資料夾,然後按一下​建立>建立資料夾。 在​建立資料夾​對話框中,鍵入components作為資料夾名稱,然後按一下​確定

  3. 按一下右鍵/apps/mywebsite資料夾,然後按一下​建立>建立資料夾。 在​建立資料夾​對話框中,鍵入templates作為資料夾名稱,然後按一下​確定

    樹狀結構現在應該是這樣的:

    chlimage_1-101

  4. 按一下​保存全部

設定設計

在本節中,您使用設計工具為應用程式建立設計。 本設計為您的網站提供CSS和影像資源。

注意

按一下以下連結可下載mywebsite.zip。 封存檔包含您設計的static.css和影像檔案。

static.css檔案和影像範例

取得檔案

  1. 在「AEM歡迎」頁面上,按一下「工具」。 (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1-102

  2. 在資料夾樹中,選擇​Designs​資料夾,然後按一下​新建>新建頁面。 鍵入mywebsite作為標題,然後按一下​建立

  3. 如果mywebsite項目未顯示在表中,請刷新樹或表。

  4. 使用 WebDAV存取http://localhost:4502的URL,將已下載的mywebsite.zip檔 static.cssimages 中的範例檔案和資料夾複製至資料 /etc/designs/mywebsite 夾。

    chlimage_1-103

建立Contentpage模板、元件和指令碼

在本節中,您將建立以下內容:

  • 用於在範例網站中建立內容頁面的內容頁面範本
  • 用於呈現內容頁面的內容頁面元件
  • 內容頁面指令碼

建立內容頁模板

建立範本,以做為您網站網頁的基礎。

範本會定義新頁面的預設內容。 複雜的網站可能會使用數個範本來建立網站中不同類型的頁面。 在本練習中,所有頁面都以單一簡單範本為基礎。

  1. 在CRXDE Lite的資料夾樹中,按一下右鍵/apps/mywebsite/templates ,然後按一下​建立>建立模板

  2. 在「建立範本」對話方塊中,輸入下列值,然後按一下「下一步」:

    • 標籤:contentpage
    • 標題:我的網站內容頁面範本
    • 說明:這是我的網站內容頁面範本
    • 資源類型:mywebsite/components/contentpage

    使用「排名」屬性的預設值。

    chlimage_1-104

    資源類型標識轉換頁面的元件。 在這種情況下,使用contentpage模板建立的所有頁面都由mywebsite/components/contentpage元件呈現。

  3. 若要指定可使用此範本的頁面路徑,請按一下加號按鈕,然後在顯示的文字方塊中輸入/content(/.*?lang=zh-Hant)?。 然後,按一下​Next

    chlimage_1-105

    允許的路徑屬性的值是​規則運算式。 路徑與運算式相符的頁面可以使用範本。在這種情況下,規則運算式與/content資料夾和所有子頁的路徑匹配。

    當作者在/content下方建立頁面時,contentpage​範本會顯示在可用範本清單中。

  4. 在​允許父代​和​允許子代​面板中按一下​Next,然後按一下​確定。 在CRXDE Lite中,按一下「全部儲存」。

    chlimage_1-105

建立Contentpage元件

建立​component,以定義內容並呈現使用內容頁面範本的頁面。 元件的位置必須與內容頁模板的「資源類型」屬性的值對應。

  1. 在CRXDE Lite中,按一下右鍵/apps/mywebsite/components ,然後按一下​建立>元件

  2. 在​建立元件​對話框中,鍵入以下屬性值:

    • 標籤:contentpage
    • 標題:我的網站內容頁面元件
    • 說明:這是我的網站內容頁面元件

    chlimage_1-107

    新元件的位置為/apps/mywebsite/components/contentpage。 此路徑與內容頁模板的資源類型相對應(減去路徑的初始/apps/部分)。

    此對應將範本連結至元件,對網站的正確運作至關重要。

  3. 按一下「Next」,直到出現對話框的「允許的子代」面板,然後按一下「確定」。 ​在CRXDE Lite中,按一下「全部儲存」。

    現在的結構如下:

    chlimage_1-108

開發Contentpage元件指令碼

將程式碼新增至contentpage.jsp指令碼以定義頁面內容。

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/contentpage中的檔案contentpage.jsp。 依預設,檔案包含下列程式碼:

    <%--
    
      My Website Content Page Component component.
    
      This is My Website Content Page Component.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><%@page session="false" %><%
    %><%
        /* TODO add you code here */
    %>
    
  2. 複製下列程式碼,並將它貼在預設程式碼之後的contentpage.jsp中:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "https://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>My title</title>
    </head>
    <body>
    <div>My body</div>
    </body>
    </html>
    
  3. 按一下「全部儲存」,儲存變更。

建立網站頁面和內容頁面

在本節中,您會建立下列所有使用內容頁面範本的頁面:我的網站、英文、產品、服務和客戶。

  1. 在「AEM歡迎」頁面(http://localhost:4502/libs/cq/core/content/welcome.html)上,按一下「網站」。

    chlimage_1-109

  2. 在資料夾樹中,選擇​Websites​資料夾,然後按一下​新建>新建頁面

  3. 在​建立頁面​窗口中,輸入以下內容:

    • 標題: My Website
    • 名稱: mywebsite
    • 選擇​我的網站內容頁面範本

    chlimage_1-110

  4. 按一下​建立。在資料夾樹中,選擇/Websites/My Website頁,然後按一下​新建>新建頁

  5. 在​建立頁面​對話方塊中,輸入下列屬性值,然後按一下建立:

    • 標題:英文
    • 名稱:en
    • 選擇​我的網站內容頁面範本
  6. 在資料夾樹中,選擇/Websites/My Website/English頁,然後按一下​新建>新建頁

  7. 在​建立頁面​對話方塊中,輸入下列屬性值,然後按一下​建立:

    • 標題:產品
    • 選擇​我的網站內容頁面範本
  8. 在資料夾樹中,選擇/Websites/My Website/English頁,然後按一下​新建>新建頁

  9. 在​建立頁面​對話方塊中,輸入下列屬性值,然後按一下​建立:

    • 標題:服務
    • 選擇​我的網站內容頁面範本
  10. 在資料夾樹中,選擇/Websites/My Website/English頁,然後按一下​新建>新建頁

  11. 在​建立頁面​對話方塊中,輸入下列屬性值,然後按一下​建立:

    • 標題:客戶
    • 選擇​我的網站內容頁面範本

    您的結構如下所示:

    chlimage_1-191

  12. 若要將頁面連結至mywebsite設計,請在CRXDE Lite中,選取/content/mywebsite/en/jcr:content節點。 在​Properties​標籤中,鍵入新屬性的下列值,然後按一下Add:

    • 名稱:cq:designPath
    • 類型:字串
    • :/etc/designs/mywebsite

    chlimage_1-112

  13. 在新的Web瀏覽器標籤或視窗中,開啟http://localhost:4502/content/mywebsite/en/products.html以檢視「產品」頁面:

    chlimage_1-113

增強Contentpage指令碼

本節說明如何使用AEM基礎元件指令碼並撰寫您自己的指令碼來增強contentpage指令碼。

Products​頁面如下所示:

chlimage_1-4

使用Foundation頁指令碼

在本練習中,您可設定您的pagecontent元件,使其超類型為AEM Page元件。 由於元件繼承其超類型的功能,因此您的頁面內容會繼承Page元件的指令碼和屬性。

例如,在元件JSP代碼中,可以參照超類型元件提供的指令碼,就像它們包含在元件中一樣。

  1. 在CRXDE Lite中,將屬性添加到/apps/mywebsite/components/contentpage節點。

    1. 選擇/apps/mywebsite/components/contentpage節點。

    2. 在「屬性」索引標籤底部,輸入下列屬性值,然後按一下「新增」:

      • 名稱:sling:resourceSuperType
      • 類型:字串
      • :foundation/components/page
    3. 按一下​保存全部

  2. 開啟/apps/mywebsite/components/contentpage下方的contentpage.jsp檔案,並以下列程式碼取代現有程式碼:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><%@page session="false" contentType="text/html; charset=utf-8" %><%
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
    <html>
    <cq:include script="head.jsp"/>
    <cq:include script="body.jsp"/>
    </html>
    
  3. 儲存您的變更。

  4. 在瀏覽器中,重新載入​Products​頁面。 其外觀如下:

    chlimage_1-5

    開啟頁面來源,以檢視head.jsp和body.jsp指令碼產生的javascript和HTML元素。 當您開啟頁面時,下列指令碼片段會開啟Sidekick:

    CQ.WCM.launchSidekick("/content/mywebsite/en/products",
                {propsDialog: "/libs/foundation/components/page/dialog",
                   locked: false locked: false
                 }); 
    

使用您自己的指令碼

在本節中,您會建立數個指令碼,每個指令碼都會產生頁面內文的一部分。 然後,在pagecontent元件中建立body.jsp檔案,以覆寫AEM Page元件的body.jsp。 在body.jsp檔案中,您包括了生成頁面正文不同部分的指令碼。

提示: 當元件包含與元件超類型中的檔案相同名稱和相對位置的檔案時,稱為覆

  1. 在CRXDE Lite中,在/apps/mywebsite/components/contentpage下建立檔案left.jsp:

    1. 按一下右鍵節點/apps/mywebsite/components/contentpage,然後選擇​建立​和​建立檔案
    2. 在窗口中,鍵入left.jsp作為​名稱,然後按一下​確定
  2. 編輯檔案left.jsp以移除現有內容,並以下列程式碼取代:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
    
  3. 儲存變更。

  4. 在CRXDE Lite中,在/apps/mywebsite/components/contentpage下建立檔案center.jsp:

    1. 按一下右鍵節點/apps/mywebsite/components/contentpage,選擇​建立,然後選擇​建立檔案
    2. 在對話框中,鍵入center.jsp作為​名稱 ,然後按一下​確定
  5. 編輯檔案center.jsp以移除現有內容,並以下列程式碼取代:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
    
  6. 儲存變更。

  7. 在CRXDE Lite中,在/apps/mywebsite/components/contentpage下建立檔案right.jsp:

    1. 按一下右鍵節點/apps/mywebsite/components/contentpage,選擇​建立,然後選擇​建立檔案
    2. 在對話框中,鍵入right.jsp作為​名稱 ,然後按一下​確定
  8. 編輯檔案right.jsp以移除現有內容,並以下列程式碼取代:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
    
  9. 儲存變更。

  10. 在CRXDE Lite中,在/apps/mywebsite/components/contentpage下建立檔案body.jsp:

  11. 編輯檔案body.jsp以移除現有內容,並以下列程式碼取代:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><body>
    <div id="CQ">
    <div class="topnav">topnav</div>
    <div class="content">
    <cq:include script="left.jsp" />
    <cq:include script="center.jsp" />
    <cq:include script="right.jsp" />
    </div>
    <div class="footer">
    <div class="toolbar">toolbar</div>
    </div>
    </div>
    </body>
    
  12. 儲存變更。

  13. 在瀏覽器中,重新載入​Products​頁面。 其外觀如下:

    chlimage_1-6

建立頂級導航元件

在本節中,您會建立元件,其中顯示網站所有頂層頁面的連結,以方便導覽。 此元件內容會顯示在使用contentpage範本建立的所有頁面頂端。

在第一版的頂端導覽元件(topnav)中,導覽項目僅是文字連結。 在第二版中,您使用影像導覽連結實作導覽表。

您的頂端導覽如下所示:

chlimage_1-115

建立頂級導航元件

  1. 在CRXDE Lite中,按一下右鍵/apps/mywebsite/components,選擇​建立,然後選擇​建立元件

  2. 在​建立元件​窗口中,輸入以下內容:

    • 標籤: topnav
    • 標題: My Top Navigation Component
    • 說明: This is My Top Navigation Component
  3. 按一下​Next​直到到達最後一個窗口,在該窗口中按一下​OK。 儲存您的變更。

將演算指令碼新增至topnav,以產生子頁面的文字連結:

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/topnav下方的檔案topnav.jsp

  2. 複製並貼上下列程式碼,以取代原有的程式碼:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><% 
    %><%@ page import="java.util.Iterator,
            com.day.text.Text, 
            com.day.cq.wcm.api.PageFilter, com.day.cq.wcm.api.Page" %><% 
        /* get starting point of navigation */
        Page navRootPage = currentPage.getAbsoluteParent(2); 
        if (navRootPage == null && currentPage != null) { 
        navRootPage = currentPage; 
        }
        if (navRootPage != null) { 
            Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));
            while (children.hasNext()) { 
                Page child = children.next(); 
                %><a href="<%= child.getPath() %>.html"><%=child.getTitle() %></a><% 
            } 
        } 
    %> 
    

在Contentpage元件中包括頂部導航

若要在內容頁面元件中包含topnav:

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/contentpage下方的body.jsp並取代:

    <div class="topnav">topnav</div>
    

    with:

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
    
  2. 儲存變更。

  3. 在瀏覽器中,重新載入​產品​頁面。 頂端導覽顯示如下:

    chlimage_1-115

使用字幕增強頁面

Page​元件定義可讓您為頁面提供字幕的屬性。 新增提供頁面內容相關資訊的字幕。

  1. 在您的瀏覽器中,開啟​產品​頁面。

  2. 在「Sidekick Page」標籤上,按一下「Page Properties 」。

  3. 在對話框的​Basic​頁籤上,展開​更多標題和說明 ,並為​Subtitle​屬性鍵入what we do。 按一下​「確定」

  4. 重複上述步驟,將關於我們的服務​的副標題​添加到​服務​頁。

  5. 重複上述步驟,將我們獲得的​信任的副標題添加到​Customers​頁面。

    提示: 在CRXDE Lite中,選取/content/mywebsite/tw/products/jcr:content節點,以檢視已新增的子標題屬性。

增強topnav元件的演算指令碼,以使用影像連結而非超文字來控制導覽。 該影像包括連結目標的標題和字幕。

本練習將示範Sling要求處理。 topnav.jsp指令碼會修改為呼叫動態產生影像以用於頁面導覽連結的指令碼。 在本練習中,Sling會剖析影像來源檔案的URL,以決定用來轉換影像的指令碼。

例如,「產品」頁面的影像連結來源可能是http://localhost:4502/content/mywebsite/en/products.navimage.png。 Sling剖析此URL以決定資源類型和用來呈現資源的指令碼:

  1. Sling會決定資源的路徑為/content/mwebysite/en/products.png.

  2. Sling與此路徑與/content/mywebsite/en/products節點相符。

  3. Sling會將此節點的sling:resourceType判斷為mywebsite/components/contentpage

  4. Sling會在此元件中尋找最符合URL選擇器(navimage)和檔案名稱副檔名(png)的指令碼。

在本練習中,Sling會將這些URL與您建立的/apps/mywebsite/components/contentpage/navimage.png.java指令碼相符。

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/topnav.下方的topnav.jsp,找出錨點元素的內容(第14行):

    <%=child.getTitle() %>
    
  2. 以下列程式碼取代錨點內容:

    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
    
  3. 儲存變更。

  4. 按一下右鍵/apps/mywebsite/components/contentpage節點,然後按一下​建立>建立檔案

  5. 在​建立檔案​窗口中,鍵入​名稱navimage.png.java

    .java檔案名稱副檔名指出Sling應使用Apache Sling Scripting Java Support來編譯指令碼並建立servlet。

  6. 將以下代碼複製到navimage.png.java.代碼擴展AbstractImageServlet類:

    • AbstractImageServlet 會建立一個ImageContext對象,該對象儲存當前資源的屬性。
    • 資源的父頁從ImageContext對象中提取。 然後,獲得頁面標題和字幕。
    • ImageHelperis 可用來從網站設計的navimage_bg.jpg檔案、頁面標題和頁面子標題產生影像。
    package apps.mywebsite.components.contentpage;
    
    import java.awt.Color; 
    import java.awt.Paint; 
    import java.awt.geom.Rectangle2D; 
    
    import java.io.IOException;
    import javax.jcr.RepositoryException; 
    
    import com.day.cq.wcm.api.Page; 
    import com.day.cq.wcm.api.PageManager; 
    import com.day.cq.wcm.api.components.Component; 
    import com.day.cq.wcm.api.designer.Designer;
    
    import com.day.cq.commons.SlingRepositoryException; 
    import com.day.cq.wcm.commons.WCMUtils; 
    import com.day.cq.wcm.commons.AbstractImageServlet; 
    import com.day.cq.commons.ImageHelper; 
    
    import com.day.image.Font; 
    import com.day.image.Layer; 
    
    import org.apache.sling.api.SlingHttpServletRequest; 
    import org.apache.sling.api.SlingHttpServletResponse; 
    import org.apache.sling.api.resource.Resource; 
    import org.apache.sling.api.servlets.SlingSafeMethodsServlet; 
    
    /**
      * Renders the navigation image
      */ 
    public class navimage_png extends AbstractImageServlet {
    
          protected Layer createLayer(ImageContext ctx)
                 throws RepositoryException, IOException {
             PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);
             Page currentPage = pageManager.getContainingPage(ctx.resource);
    
             /* constants for image appearance */
             int scale = 6;
             int paddingX = 24;
             int paddingY = 24;
             Color bgColor = new Color(0x004a565c, true);
    
             /* obtain the page title */
             String title = currentPage.getTitle();
             if (title == null) {
                 title = currentPage.getName();
             }
    
             /* format the title text */
             title = title.toUpperCase();
             Paint titleColor = Color.WHITE;
             Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);
             int titleBase = 10 * scale;
    
             /* obtain and format the page subtitle */
             String subtitle = currentPage.getProperties().get("subtitle", "");
             Paint subtitleColor = new Color(0xffa9afb1, true);
             Font subTitleFont = new Font("Tahoma", 7);
             int subTitleBase = 20;
    
             /* create a layer that contains the background image from the mywebsite design */
             Designer dg = ctx.resolver.adaptTo(Designer.class);
             String imgPath = new String(dg.getDesignPath(currentPage)+"/images/navimage_bg.jpg");
             Layer bg = ImageHelper.createLayer(ctx.resolver.resolve(imgPath));
    
             /* draw the title text (4 times bigger) */
             Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_LEFT, 0, 0);
             Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
    
             /* ensure subtitleExtent is wide enough */
             if ( subtitle.length() > 0 ) {
                 int titleWidth = (int)titleExtent.getWidth() / scale;
                 if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2 * paddingX >
     bg.getWidth() ) {
                     int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();
                     int maxWidth = (bg.getWidth() > titleWidth + 2  * paddingX ? bg.getWidth() - 2 * paddingX : titleWidth);
                     int len = (maxWidth - ( 2 * charWidth) ) / charWidth;
                     subtitle = subtitle.substring(0, len) + "...";
                     subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
                 }
             }
             int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth());
            /* create the text layer */
             Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01ffffff, true));
             text.setPaint(titleColor);
             text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
             text.resize(text.getWidth() / scale, text.getHeight() / scale);
             text.setX(0);
             text.setY(0);
    
             if (subtitle.length() > 0) {
                 /* draw the subtitle normal sized */
                 text.setPaint(subtitleColor);
                 text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0); 
             }
    
             /* merge the image and text layers */
             text.setY(paddingY);
             text.setX(paddingX);
             text.setBackgroundColor(bgColor);
    
             int bgWidth = bg.getWidth();
             if ( text.getWidth() + 2 * paddingX > bgWidth ) {
                 bgWidth = text.getWidth() + 2 * paddingX;
                 bg.resize(bgWidth, bg.getHeight());
             }
             bg.merge(text);
    
             return bg;
         }
     }
    
  7. 儲存變更。

  8. 在瀏覽器中,重新載入​Products​頁面。 頂端導覽現在會顯示如下:

    screen_shot_2012-03-07at10047pm

建立清單子元件

建立清單子項元件,以產生包含頁面標題、說明和日期的頁面連結清單(例如,產品頁面)。 連結會定位目前頁面的子頁面,或元件對話方塊中指定的根頁面。

chlimage_1-116

建立產品頁

建立位於​Products​頁面下方的兩頁。 對於每個描述兩個特定產品的頁面,您可以設定標題、說明和日期。

  1. 在​Websites​頁面的資料夾樹中,選擇​Websites/My Website/English/Products​項目,然後按一下​New > New Page

  2. 在對話框中輸入以下屬性值,然後按一下​建立:

    • 標題:產品1.
    • 名稱:product1.
    • 選擇​我的網站內容頁面範本
  3. 使用下列屬性值,在「產品」下方建立另一頁:

    • 標題:產品2
    • 名稱:product2
    • 選擇​我的網站內容頁面範本
  4. 在CRXDE Lite中,設定「產品1」頁面的說明和日期:

    1. 選擇/content/mywebsite/en/products/product1/jcr:content節點。

    2. 在​屬性​標籤中,輸入以下值:

      • 名稱: jcr:description
      • 類型: String
      • : This is a description of the Product 1!.
    3. 按一下​「新增」

    4. 在​屬性​標籤中,使用下列值建立另一個屬性:

      • 名稱:日期
      • 類型:字串
      • :02/14/2008
      • 按一下​「新增」
    5. 按一下​保存全部

  5. 在CRXDE Lite中,設定「產品2」頁面的說明和日期:

    1. 選擇/content/mywebsite/en/products/product2/jcr:content節點。

    2. 在​屬性​標籤中,輸入以下值:

      • 名稱:jcr:description
      • 類型:字串
      • :這是產品2!的說明。
    3. 按一下​「新增」

    4. 在相同的文字方塊中,以下列值取代先前的值:

      • 名稱:日期
      • 類型:字串
      • :05/11/2012
      • 按一下​「新增」
    5. 按一下​保存全部

建立清單子元件

要建立listchildren元件:

  1. 在CRXDE Lite中,按一下右鍵/apps/mywebsite/components,選擇​建立,然後選擇​建立元件

  2. 在對話框中輸入以下屬性值,然後按一下​Next:

    • 標籤:列出子項。
    • 標題:My Listchildren Component.
    • 說明:這是My Listchildren元件。
  3. 繼續按一下​Next​直到出現​允許的子代​面板,然後按一下​OK

建立清單子指令碼

為listchildren元件開發指令碼。

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/listchildren下方的檔案listchildren.jsp

  2. 以下列程式碼取代預設程式碼:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><%@ page import="java.util.Iterator,
             com.day.cq.wcm.api.PageFilter"%><%
         /* Create a new Page object using the path of the current page */ 
          String listroot = properties.get("listroot", currentPage.getPath());
         Page rootPage = pageManager.getPage(listroot);
         /* iterate through the child pages and gather properties */
         if (rootPage != null) {
             Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
             while (children.hasNext()) {
                 Page child = children.next();
                 String title = child.getTitle() == null ? child.getName() : child.getTitle();
                 String date = child.getProperties().get("date","");
                 %><div class="item">
                 <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
                 <span><%= date %></span><br>
                 <%= child.getProperties().get("jcr:description","") %><br>
                 </div><%
             }
         }
     %>
    
  3. 儲存變更。

建立清單子代對話框

建立用於配置listchildren元件屬性的對話框。

  1. 在listchildren元件下建立對話框節點:

    1. 在CRXDE Lite中,按一下右鍵/apps/mywebsite/components/listchildren節點,然後按一下​建立>建立對話框

    2. 在對話框中,輸入以下屬性值並按一下確定

      • 標籤: dialog
      • 標題: Edit Component 然後按一 下確定

    screen_shot_2012-03-07at45818pm

    使用下列屬性:

    screen_shot_2012-03-07at50415pm

  2. 選擇/apps/mywebsite/components/listchildren/dialog/items/items/tab1節點。

  3. 在​屬性​標籤中,將​title​屬性的值變更為List Children

    chlimage_1-117

  4. 選擇​tab1​節點,然後按一下​建立>建立節點 ,輸入以下屬性值,然後按一下確定​確定:

    • 名稱:項目
    • 類型:cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. 使用以下屬性值在項目節點下建立節點:

    • 名稱:利斯特羅
    • 類型:cq:Widget

    screen_shot_2012-03-07at51031pm

  6. 為listroot節點添加屬性,將其配置為文本欄位。 下表中的每一行都代表一個屬性。 完成後,按一下​全部保存

    名稱 類型
    fieldLabel 字串 清單根的路徑
    名稱 字串 。/listroot
    xtype 字串 textfield

    screen_shot_2012-03-07at51433pm

在Contentpage元件中包含清單子代

要將listchildren元件包含在內容頁元件中,請按如下步驟操作:

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/contentpage下方的檔案left.jsp,並找出下列程式碼(第4行):

    <div>newslist</div>
    
  2. 以下列程式碼取代該程式碼:

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
    
  3. 儲存變更。

在頁面中查看清單子項

要查看此元件的完整操作,可以查看「產品」頁:

  • 當父頁面(「清單根路徑」)未定義時。
  • 定義父頁面(「清單根路徑」)時。
  1. 在瀏覽器中,重新載入​Products​頁面。 listchildren元件顯示如下:

    chlimage_1-118

  2. chlimage_1-119

  3. 作為清單根的路徑,輸入:/content/mywebsite/en。 按一下​「確定」。您頁面上的listchildren元件現在如下所示:

    chlimage_1-120

建立徽標元件

建立顯示公司標誌並提供網站首頁連結的元件。 此元件包含設計模式對話方塊,以便將屬性值儲存在網站設計(/etc/designs/mywebsite?lang=zh-Hant)中:

  • 屬性值適用於添加到使用該設計的頁面的元件的所有實例。
  • 屬性可使用使用設計頁面上元件的任何例項來設定。

您的設計模式對話框包含用於設定影像和連結路徑的屬性。 標誌元件將放置在網站所有頁面的左上方。

其外觀如下:

chlimage_1-121

注意

Adobe Experience Manager提供功能更全的標誌元件(/libs/foundation/components/logo)。

建立徽標元件節點

若要建立標誌元件,請依照下列步驟進行:

  1. 在CRXDE Lite中,以滑鼠右鍵按一下/apps/mywebsite/components,選取​Create,然後選取​Create Component

  2. 在「建立元件」對話框中輸入以下屬性值,然後按一下「下一步」:

    • 標籤: logo.
    • 標題: My Logo Component.
    • 說明: This is My Logo Component.
  3. 按一下「Next(下一步)」,直到到達對話框的最終面板,然後按一下「OK(確定)」

建立徽標指令碼

本節說明如何建立指令碼,以顯示具有首頁連結的標誌影像。

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/logo下方的檔案logo.jsp

  2. 下列程式碼會建立網站首頁的連結,並新增標誌影像的參考。 將代碼複製到logo.jsp:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><%@ page import="com.day.text.Text,
                       com.day.cq.wcm.foundation.Image,
                       com.day.cq.commons.Doctype" %><%
        /* obtain the path for home */
        long absParent = currentStyle.get("absParent", 2L);
        String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);
        /* obtain the image */
        Resource res = currentStyle.getDefiningResource("imageReference");
        if (res == null) {
            res = currentStyle.getDefiningResource("image");
        }
        /* if no image use text link, otherwise draw the image */
        %>
    <a href="<%= home %>.html"><%
        if (res == null) {
            %>Home<%
        } else {
            Image img = new Image(res);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out);
        }
        %></a>
    
  3. 儲存變更。

建立徽標設計對話框

建立對話方塊,以在「設計」模式中設定標誌元件。 設計模式對話框節點必須命名為design_dialog

  1. 在標誌元件下建立對話框節點:

    1. 按一下右鍵/apps/mywebsite/components/logo節點,然後按一下​建立>建立對話框

    2. 鍵入以下屬性值,然後按一下​OK :

      • 標籤 design_dialog
      • 標題 Logo (Design)
  2. 在design_dialog分支中按一下右鍵tab1節點,然後按一下「刪除」。 按一下​保存全部

  3. design_dialog/items/items節點下,建立名為img類型cq:Widget的新節點。 新增下列屬性,然後按一下「全部儲存」:

    名稱 類型
    fileNameParameter 字串 。/imageName
    fileReferenceParameter 字串 。/imageReference
    名稱 字串 。/影像
    標題 字串 影像
    xtype 字串 html5smartimage

    chlimage_1-122

建立徽標渲染指令碼

建立擷取標誌影像並寫入頁面的指令碼。

  1. 按一下右鍵徽標元件節點,然後按一下​「建立」>「建立檔案」​以建立名為img.GET.java的指令碼檔案。
  2. 開啟檔案,將下列程式碼複製到檔案中,然後按一下「全部儲存」:
package apps.mywebsite.components.logo;

import java.io.IOException;
import java.io.InputStream;

import javax.jcr.RepositoryException;
import javax.jcr.Property;
import javax.servlet.http.HttpServletResponse;

import com.day.cq.wcm.foundation.Image;
import com.day.cq.wcm.commons.RequestHelper;
import com.day.cq.wcm.commons.WCMUtils;
import com.day.cq.wcm.commons.AbstractImageServlet;
import com.day.cq.commons.SlingRepositoryException;
import com.day.image.Layer;
import org.apache.commons.io.IOUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**
 * Renders an image
 */
public class img_GET extends AbstractImageServlet {

    protected Layer createLayer(ImageContext c)
            throws RepositoryException, IOException {
        /* don't create the layer yet. handle everything later */
        return null;
    }

    protected void writeLayer(SlingHttpServletRequest req,
                              SlingHttpServletResponse resp,
                              ImageContext c, Layer layer)
            throws IOException, RepositoryException {

        Image image = new Image(c.resource);
        image.setItemName(Image.NN_FILE, "image");
        image.setItemName(Image.PN_REFERENCE, "imageReference");
        if (!image.hasContent()) {
            resp.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        /* get pure layer */
        layer = image.getLayer(false, false, false);

        /* do not re-encode layer, just spool */
        Property data = image.getData();
        InputStream in = data.getStream();
        resp.setContentLength((int) data.getLength());
        String contentType = image.getMimeType();
        if (contentType.equals("application/octet-stream")) {
            contentType=c.requestImageType;
        }
        resp.setContentType(contentType);
        IOUtils.copy(in, resp.getOutputStream());
        in.close();

        resp.flushBuffer();
    }
}

將標誌元件添加到Contentpage元件

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/contentpage file下方的left.jsp,並找出下列程式碼行:

    <div>logo</div>
    
  2. 以下列程式碼行取代該程式碼:

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
    
  3. 儲存變更。

  4. 在瀏覽器中,重新載入​Products​頁面。 標誌的外觀如下,雖然目前只顯示基礎連結:

    chlimage_1-123

在頁面中設定標誌影像

本節說明如何使用設計模式對話框將影像設定為標誌。

  1. 在瀏覽器中開啟​Products​頁面時,按一下Sidekick底部的​Design​按鈕以進入​Design​模式。

  2. 在標誌欄設計中,按一下​編輯​以使用對話框來編輯標誌元件的設定。

  3. 在對話框中,按一下​Image​頁籤的面板,瀏覽從mywebsite.zip檔案提取的logo.png影像,然後按一下​OK

    chlimage_1-124

  4. 按一下Sidekick標題列上的三角形,以返回​Edit​模式。

    chlimage_1-7

  5. 在CRXDE Lite中,移至下列節點以查看所儲存的屬性值:

    /etc/designs/mywebsite/jcr:content/contentpage/logo

包含Breadcrumb元件

在本節中,您會加入網路導覽路徑標示(trail)元件,此元件是基礎元件之一。

  1. 在CRXDE Lite中,瀏覽至/apps/mywebsite/components/contentpage,開啟檔案center.jsp並取代:

    <div>trail</div>
    

    with:

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
    
  2. 儲存變更。

  3. 在瀏覽器中,重新載入​產品1​頁面。 trail元件的外觀如下:

    chlimage_1-125

包含標題元件

在本節中,您會加入標題元件,此元件是基礎元件之一。

  1. 在CRXDE Lite中,瀏覽至/apps/mywebsite/components/contentpage,開啟檔案center.jsp並取代:

    <div>title</div>
    

    with:

    <cq:include path="title" resourceType="foundation/components/title" />
    
  2. 儲存變更。

  3. 在瀏覽器中,重新載入​Products​頁面。 標題元件的外觀如下:

    chlimage_1-126

注意

您可以在​編輯​模式中設定不同的標題和類型/大小。

包括段落系統元件

段落系統(parsys)是網站管理段落清單的重要部分。 它可讓作者將段落元件新增至頁面並提供結構。

將parsys元件(其中一個基礎元件)新增至您的contentpage元件。

  1. 在CRXDE Lite中,瀏覽至/apps/mywebsite/components/contentpage,開啟檔案center.jsp並找出下列程式碼行:

    <div>parsys</div>
    
  2. 以下列程式碼取代該行程式碼,然後儲存變更:

    <cq:include path="par" resourceType="foundation/components/parsys" />
    
  3. 在瀏覽器中,重新整理​Products​頁面。 它現在有parsys元件,如下所示:

    chlimage_1-127

建立映像元件

建立在段落系統中顯示影像的元件。 為節省時間,影像元件會建立為標誌元件的副本,並變更一些屬性。

注意

Adobe Experience Manager提供功能更完整的影像元件(/libs/foundation/components/image)。

建立映像元件

  1. 按一下右鍵/apps/mywebsite/components/logo節點,然後按一下​Copy

  2. 按一下右鍵/apps/mywebsite/components節點,然後按一下​貼上

  3. 按一下右鍵Copy of logo節點,按一下​更名 ,刪除現有文本並鍵入image

  4. 選擇image元件節點,並更改以下屬性值:

    • jcr:title: 我的影像元件。
    • jcr:description:這是我的影像元件。
  5. 將屬性添加到image節點,其屬性值如下:

    • 名稱:componentGroup
    • 類型:字串
    • :MyWebsite
  6. image節點下,將design_dialog節點更名為dialog

  7. logo.jsp重新命名為image.jsp.

  8. 開啟img.GET.java,並將套件變更為apps.mywebsite.components.image

chlimage_1-128

建立映像指令碼

本節說明如何建立影像指令碼。

  1. 開啟 /apps/mywebsite/components/image/ image.jsp

  2. 以下列程式碼取代現有程式碼,然後儲存變更:

    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant"%><%
    %><%@ page import="com.day.cq.commons.Doctype,
                        com.day.cq.wcm.foundation.Image,
                        com.day.cq.wcm.api.components.DropTarget,
                        com.day.cq.wcm.api.components.EditConfig,
                        com.day.cq.wcm.commons.WCMUtils" %><%
     /* global.jsp provides access to the current resource through the resource object */
            Image img = new Image(resource);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out); %>
    
  3. 儲存變更。

建立映像cq:editConfig節點

cq:editConfig節點類型允許您在編輯元件屬性時配置某些行為。

在本節中,您會使用cq:editConfig節點,讓您將資產從Content Finder拖曳至影像元件。

  1. 在CRXDE Lite中,在節點/apps/mywebsite/components/image下,按如下方式建立新節點:

    • 名稱:cq:editConfig。
    • 類型:cq:EditConfig。
  2. 在node cq:editConfig下,按如下方式建立新節點:

    • 名稱:cq:dropTargets。
    • 類型:cq:DropTargetConfig。
  3. 在node cq:dropTargets下,建立新節點,如下所示:

    • 名稱:影像。
    • 類型:nt:非結構化。
  4. 在CRXDE中,按如下方式設定屬性:

名稱 類型
接受 字串 image/(gif)
個群組 字串 媒體
propertyName 字串 。/imageReference

chlimage_1-129

添加表徵圖

在本節中,當影像元件列在Sidekick中時,您會新增該圖示以顯示在影像元件旁:

  1. 在CRXDE Lite中,按一下右鍵檔案/libs/foundation/components/image/icon.png並選擇​Copy
  2. 按一下右鍵節點/apps/mywebsite/components/image並按一下​貼上 ,然後按一下​保存所有

使用影像元件

在本節中,您將查看​Products​頁,並將映像元件添加到段落系統。

  1. 在瀏覽器中,重新載入​Products​頁面。

  2. 在Sidekick中,按一下​Design mode​圖示。

  3. 按一下​編輯​按鈕以編輯par的設計對話框。

  4. 在對話方塊中,會顯示​允許的元件​清單;導覽至​MyWebsite,選擇​My Image Component,然後按一下​OK

  5. 返回​編輯模式

  6. 連按兩下對應影格(在​拖曳元件或資產至此處)。 插入新元件​和​Sidekick​選擇器如下所示:

    chlimage_1-8

包括工具欄元件

在本節中,您包括工具欄元件,該元件是基礎元件之一。

在編輯模式和設計模式中,您有幾個選項。

  1. 在CRXDE Lite中,導覽至/apps/mywebsite/components/contentpage,開啟body.jsp檔案並找出下列程式碼:

    <div class="toolbar">toolbar</div>
    
  2. 以下列程式碼取代該程式碼,然後儲存變更。

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
    
  3. 在「AEM網站」頁面的資料夾樹狀結構中,選取Websites/My Website/English,然後按一下「新增>新增頁面」​指定下列屬性值,然後按一下「建立」:

    • 標題:工具列
    • 選擇​我的網站內容頁面範本
  4. 在頁清單中,按一下右鍵​工具欄​頁,然後按一下​屬性。 選擇​在導航中隱藏 ,然後按一下​確定

    在Navigation​中隱藏選項可防止頁面出現在導覽元件中,例如topnav和listchildren。

  5. 在​Toolbar​下,建立以下頁面:

    • 聯絡人
    • 意見反應
    • 登入
    • 搜尋
  6. 在瀏覽器中,重新載入​Products​頁面。 其外觀如下:

    chlimage_1-130

建立搜索元件

在本節中,您會建立元件來搜尋網站上的內容。 此搜尋元件可放置在任何頁面的段落系統中(例如,位於專用搜尋結果頁面)。

您的搜尋輸入方塊在​英文​頁面上的外觀如下:

chlimage_1-131

建立搜索元件

  1. 在CRXDE Lite中,按一下右鍵/apps/mywebsite/components,選擇​建立,然後選擇​建立元件

  2. 使用對話框配置元件:

    1. 在第一個面板中,指定下列屬性值:

      • 標籤:搜尋
      • 標題:我的搜尋元件
      • 說明:這是My Search元件
      • 群組:MyWebsite
    2. 按一下「Next」,然後再次按一下「Next」。

    3. 在​允許的父項​面板上,按一下​+​按鈕並鍵入*/parsys

    4. 按一下​Next ,然後按一下​OK

  3. 按一下​保存全部

  4. 複製下列節點並將其貼上到apps/mywebsite/components/search節點:

    • /libs/foundation/components/search/dialog
    • "/libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png
  5. 按一下​保存全部

建立搜索指令碼

本節介紹如何建立搜索指令碼:

  1. 開啟/apps/mywebsite/components/search/search.jsp檔案。

  2. 將下列程式碼複製至search.jsp:

    <%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
    <%@include file="/libs/foundation/global.jsp?lang=zh-Hant" %><%
    %><cq:setContentBundle/><%
        Search search = new Search(slingRequest);
    
        String searchIn = (String) properties.get("searchIn");
        String requestSearchPath = request.getParameter("path");
        if (searchIn != null) {
            /* only allow the "path" request parameter to be used if it
             is within the searchIn path configured */
            if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
                search.setSearchIn(requestSearchPath);
            } else {
                search.setSearchIn(searchIn);
            }
        } else if (requestSearchPath != null) {
            search.setSearchIn(requestSearchPath);
        }
    
        pageContext.setAttribute("search", search);
        TagManager tm = resourceResolver.adaptTo(TagManager.class);
    %><c:set var="trends" value="${search.trends}"/><%
    %><center>
      <form action="${currentPage.path}.html">
        <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
        <input value="<fmt:message key="searchButtonText"/>" type="submit" />
      </form>
    </center>
    <br/>
    <c:set var="result" value="${search.result}"/>
    <c:choose>
      <c:when test="${empty result && empty search.query}">
      </c:when>
      <c:when test="${empty result.hits}">
        <c:if test="${result.spellcheck != null}">
          <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
        </c:if>
        <fmt:message key="noResultsText">
          <fmt:param value="${fn:escapeXml(search.query)}"/>
        </fmt:message>
      </c:when>
      <c:otherwise>
        <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
       <br/>
    
      <div class="searchresults"> 
        <div class="results">
          <c:forEach var="hit" items="${result.hits}" varStatus="status">
            <div class="hit">
            <a href="${hit.URL}">${hit.title}</a>
            <div class="excerpt">${hit.excerpt}</div>
           <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
            </div></div>
          </c:forEach>
        </div>
          <br/>
    
         <div class="searchRight">
              <c:if test="${fn:length(trends.queries) > 0}">
                  <p><fmt:message key="searchTrendsText"/></p>
                  <div class="searchTrends">
                      <c:forEach var="query" items="${trends.queries}">
                          <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></span></a>
                      </c:forEach>
                  </div>
              </c:if> 
              <c:if test="${result.facets.languages.containsHit}">
                  <p>Languages</p>
                  <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                      <c:choose>
                          <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.tags.containsHit}">
                  <p>Tags</p>
                  <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                      <c:if test="${tag != null}">
                          <c:set var="label" value="${tag.title}"/>
                          <c:choose>
                              <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                              <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                          </c:choose><br/>
                      </c:if>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.mimeTypes.containsHit}">
                  <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
                  <p>File types</p>
                  <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value="${fileTypes[bucket.value]}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
              <c:if test="${result.facets.lastModified.containsHit}">
                  <p>Last Modified</p>
                  <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                      <c:choose>
                          <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
    
          <c:if test="${fn:length(search.relatedQueries) > 0}">
    
           <br/><br/><div class="related">
            <fmt:message key="relatedSearchesText"/>
            <c:forEach var="rq" items="${search.relatedQueries}">
                <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
            </c:forEach></div>
          </c:if>
          </div> 
    
          <c:if test="${fn:length(result.resultPages) > 1}">
            <div class="pagination"> 
                <fmt:message key="resultPagesText"/>
            <c:if test="${result.previousPage != null}">
              <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
            </c:if>
            <c:forEach var="page" items="${result.resultPages}">
              <c:choose>
                <c:when test="${page.currentPage}">${page.index + 1}</c:when>
                <c:otherwise>
                  <a href="${page.URL}">${page.index + 1}</a>
                </c:otherwise>
              </c:choose>
            </c:forEach>
            <c:if test="${result.nextPage != null}">
              <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
            </c:if>
            </div>
          </c:if>
          </div>
    
      </c:otherwise>
    </c:choose>
    
  3. 儲存變更。

在Contentpage元件中包括搜索框

若要在內容頁面的左側區段中加入搜尋輸入方塊,請依下列步驟進行:

  1. 在CRXDE Lite中,開啟/apps/mywebsite/components/contentpage下方的檔案left.jsp,並找出下列程式碼(第2行):

    %><div class="left">
    
  2. 在​前插入以下代碼:

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath(); 
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
    
  3. 找到下列程式碼行:

    <div>search</div>
    
  4. 以下列程式碼取代該程式碼,然後儲存變更。

    <div class="form_1">
         <form class="geo" action="<%= home %>/toolbar/search.html" id="form" >
              <p>
                   <input class="geo" type="text" name="q"><br> 
                   <a href="<%= home %>/toolbar/search.html" class="link_1">advanced search</a> 
              </p>
         </form>
    </div>
    
  5. 在瀏覽器中,重新載入​Products​頁面。 搜索元件的外觀如下:

    chlimage_1-132

在「搜索」頁中包括搜索元件

在本節中,您將搜索元件添加到段落系統。

  1. 在瀏覽器中,開啟​Search​頁面。

  2. 在Sidekick中,按一下​Design​模式表徵圖。

  3. 在「par塊設計」(在「搜索」標題下)中,按一下「編輯」

  4. 在對話方塊中,向下捲動至​我的網站​群組,選取​我的搜尋元件,然後按一下​確定

  5. 在Sidekick上,按一下三角形以返回​Edit​模式。

  6. 將​My Search​元件從Sidekick拖曳至parsys影格。 其外觀如下:

    chlimage_1-133

  7. 導覽至您的​產品​頁面。 在輸入框中搜索客戶,然後按​Enter​鍵。 您會被重新導向至​Search​頁面。 切換到​預覽​模式:輸出的格式與以下類似:

    chlimage_1-134

包括Iparsys元件

在本節中,您包括繼承段落系統(iparsys)元件,該元件是基礎元件之一。 此元件允許您在父頁面上建立段落結構,並讓子頁繼承段落。

對於此元件,可以在編輯模式和設計模式中設定多個參數。

  1. 在CRXDE Lite中,導覽至/apps/mywebsite/components/contentpage,開啟檔案right.jsp並取代:

    <div>iparsys</div>
    

    with:

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
    
  2. 儲存變更。

  3. 在瀏覽器中,重新載入​Products​頁面。 整個頁面的外觀如下:

    chlimage_1-9

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now