Scribd Logo
Upload

Welcome to Scribd!

  • Website Quick

    Uploaded by

    buntyneffsar
    35 views2 pages
    How to set up cq instance

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    How to set up cq instance

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views2 pages

    Website Quick

    Uploaded by

    buntyneffsar
    How to set up cq instance

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    How to Quickly Create a Website

    2012 Adobe Systems Incorporated.


    All rights reserved.
    Page 1
    Created on 2014-05-30
    How to Quickly Create a Website
    Overview / CQ / Adobe Experience Manager 5.6.1 / How To /
    Introduction
    This tutorial enables you to quickly create a website with CQ5, based on an existing website. It is mainly
    targeted at Day Pre-Sales staff and Day Partners preparing Proof Of Concept for a project. You only need
    CQ5 WCM, CRXDE and a Web browser.
    Creating the application, the Content Page Template, the Content Page
    Component and a Web Page

    1. In CRX Explorer, copy the node apps/geometrixx, name the target node <customername> and paste it
    under apps.
    2. Set the title (jcr:title property) of the Template apps/<customername>/templates/contentpage to
    <Customername> Content Page Template.
    3. Replace the thumbnail /apps/<customername>/templates/contentpage/thumbnail.png with one
    representing your Template.
    Create a PNG image, 128 x 98 px big.
    In your file system, copy the image and paste it into /apps/<customername>/templates/
    contentpage/ .
    4. Set the property allowedPaths of the Template /apps/<customername>/templates/contentpage to /
    content(/.*)? to make the template available for all the new pages below /content.
    5. Set the property sling:resourceType of the node /apps/<customername>/templates/contentpage/
    jcr:content to <customername>/components/contentpage.
    6. In CRXDE, under the Component /apps/<customername>/components/contentpage, create the file
    contentpage.jsp.
    7. Copy/paste following code into the script contentpage.jsp:
    <%@page session="false" contentType="text/html; charset=utf-8" %><% %><%@taglib prefix="cq"
    uri="http://www.day.com/taglibs/cq/1.0" %><% %><!DOCTYPE HTML PUBLIC "-//W3C//DTD
    HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <%@include file="/libs/foundation/
    global.jsp" %><% %><head> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <%
    currentDesign.writeCssIncludes(out); %> MyCustomerHead </head> <body> MyCustomerBody </body>
    </html>
    8. In your browser, open the Website tab.
    9. Under Websites, create a new page with the Title www.<customername>.com, the label
    <customername> and the <Customername> Content Page Template.
    10. Under the Page www.<customername>.com, create a new page with the Title English, the label en and
    the <Customername> Content Page Template. If needed, create one Page with the Title French, the
    label fr and one Page the Title German, the label de.
    11. Under the Page English, create as many pages as needed in order to reproduce the site map of your
    customer site.
    Setting up the Designer
    1. In CRX Explorer, copy the node /etc/designs/geometrixx, name the target node <customername> and
    paste it under /etc/designs.
    2. In contentpage.jsp, insert <% currentDesign.writeCssIncludes(out); %> at the appropriate location.
    3. In CRXDE, open the file /etc/designs/<customername>/static.css and adapt the styles to your needs.
    4. Link your pages to the <customername> designer: in CRX Explorer, select the node /content/
    <customername>/jcr:content. Double-click Property cq:designPath and set /etc/designs/
    <customername> as Value.
    Importing the original Web Page (CSS, HTML and images) into your
    project

    How to Quickly Create a Website
    2012 Adobe Systems Incorporated.
    All rights reserved.
    Page 2
    Created on 2014-05-30
    1. In Firefox, browse to the page that you want to import, select Save Page As , enter <customername>
    as Filename and save it on your desktop.
    2. Test the downloaded website on your desktop: open the downloaded <customername>.htm file in your
    browser and compare the result with the original website. If it is different, open the file in a text editor and
    fix the problems. Problems are often caused by paths for css files and images that need to be correctly
    reset.
    3. In your filesystem, zip all the resources of your webpage (html, css, images, ...).
    4. In CRX Explorer, under the node /apps/<customername>/components/contentpage, create a New Node:
    set the Name to resources and the Type to sling:Folder.
    5. In CRX Content Loader, import the zip file and expand it into the node /apps/<customername>/
    components/contentpage/resources:
    Browse to http://localhost:4502/crx/loader/index.jsp.
    Click Browse beside Root path for import:, browse to the node /apps/<customername>/components/
    contentpage/resources and click Open.
    Click Browse beside File to upload:, browse to your zip file and click Open.
    Check Auto-Expand and Expand file content directly below selected root checkboxes.
    Click Import.
    In a normal project setup, the resources wouldn't be placed under the Component. It is only done here to
    maximize your efficiency.
    6. In CRXDE, open the file <customername>.html and copy the content between the <head> and </head>
    tags. In the script contentpage.jsp, select MyCustomerHead and paste the previously copied content.
    7. In the file <customername>.html, copy the content between the <body> and </body> tags. In the script
    contentpage.jsp, select MyCustomerBody and paste the previously copied content.
    8. In the script contentpage.jsp, reset the paths of the css files and the images by replacing:
    <customername>_files with: /apps/<customername>/components/contentpage/resources
    Make sure that the names of your resources don't start with _ (underscore).
    .
    9. In the script contentpage.jsp, replace all external links with internal links. This way the external links don't
    appear broken when your machine is not online.
    10. In your browser, in the Website tab, open the page www.<customername>.com. It should display your
    <customername> web page.
    Replacing static content by dynamic content using CQ Foundation
    Components
    1. In CRXDE, in the file contentpage.jsp, select the content of the middle part of the page and replace it
    with: <cq:include path="par" resourceType="foundation/components/parsys" />. The content has been
    replaced by the parsys Foundation Component.
    2. In your browser, refresh your page. The features of the Paragraph System are now available to you: you
    can include other Components, for example, Flash, Text or Text Image.
    3. By following the previous steps, you can add other CQ Foundation Components as for example topnav
    or toolnav.
    4. In your browser, in the Website tab, open a page of your choice from your application. Copy content from
    the original web page and paste it into your page.
    5. Adapt the design to look like the design of the original website.
    Creating a Media Library
    1. In your browser, download about 20 resources (pictures, banners, pdf, ) from the original website:
    open a Google page, type site:<customer-url>, click search and click the Images tab. Save the desired
    resources on your computer.
    2. In your filesystem, zip all the resources.
    3. In CRX Content Loader, import the zip file and expand it into the node content/dam/<customername>.
    The resources are now in the Media Library and available in the Content Finder, when browsing through
    the Pages.

    You might also like