Site Importer

Išči
Experience Manager 6.2 Sites Uporabniški vodnik za razvijanje
Velja za: Experience Manager 6.2 Sites

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Ogledujete si pomoč za različico :

AEM provides the site importer to help you take an existing website and set up the basis for: 

  • a prototype
  • a proof of concept project
  • a development new project

The Site Importer achieves this by:

  • importing the design of an existing website page
    • /etc/designs/<project name>
  • importing the HMTL content of that page 
    This is all held in one parsys component (containing the HTML pulled from the imported page), it is not split into separate, appropriate AEM components
    • /content/<project name>
  • deriving a template
    • /apps/<project name>/templates/contentpage
  • deriving the initial component
    • /apps/<project name>/components/contentpage
  • deriving an MSM blueprint
    • /etc/blueprints/<project name>
  • deriving a campaign
    • /content/campaigns/<project name>
  • creating a content package covering all paths
    • /packages/<project name>.zip

Once the import has been done, the imported and derived resources could be used immediately, but then every page would be identical. So you can develop the imported elements further to customize the project. 

The usual workflow for importing an existing website and then customizing it is:

  1. Import an existing web page using the site importer.
  2. Extract components from the imported HTML using the Component Extractor.
  3. Make the required customizations to the resulting components, designs, campaigns, etc; CRXDE Lite can be used for development.
  4. Generate mappings between components (those generated and/or standard AEM) and the template to make the new functionality available; again using the Component Extractor.
  5. Generate new pages with the updated template.

Importing a Web Page from an Existing Site

To perform the initial import:

  1. Navigate to the Tools console at http://<server>:<port>/miscadmin#/etc.

  2. Select Importers in the left pane.

  3. Double-click on Site Importer to open:

    screen_shot_2012-02-02at123107pm

  4. Specify the details:

    • Project Title, the name of the website when imported into AEM; used for folder names
    • Site URL, of the website page to import
    • Thumbnail, an image to use for the template
    • Overwrite, activate if the site already exists in AEM and you want to overwrite it
    • Sitemap, pages to create in AEM using the resulting template; each name on a new line creates a new page, use indentation (single space) for child pages
    • Extend From Component, this optional parameter provides you with a selection list of components. Select one to specify that the generated field should be extended from this component; used for example, to create a mobile site.

  5. Click Import Site to start. The log shows the progress:

    screen_shot_2012-02-02at12103pm

    Click on a line to expand (or compress) and show (or hide) further details.

After the website page has been imported you can use AEM to see the new pages created; in the previous example a page en has been created:

screen_shot_2012-02-02at12918pm

You can use CRXDE Lite to see the additions to your repository:

Extracting Component Definitions

After the basic import is finished, you can extract new components:

  1. In the Site Importer, click Insert Components.

    Opomba:

    If you close the Site Importer, you need to return to the extraction page by using CRXDE Lite:

    /etc/designs/<project name>/dev/<project name>-original.html

    Click this file, then use the context menu to select Open... followed by Component Extractor.... Then follow the instructions in this section.

  2. The Component Extractor opens showing:

    • Available Components - as in sidekick
    • The imported page as HTML
    • Mappings - relationships between AEM components and HTML divisions

    From here you can select an area from which to extract and derive a component.

    screen_shot_2012-02-02at23820pm

  3. Click Select.

  4. Select the area of the page (a HTML construct) that you would like extracted.

    If you cannot select exactly what you require, you can select the closest area, then use the Document Tree at the right side to descend/ascend the DOM. Selecting a different HTML construct will be reflected in the selection area:

    screen_shot_2012-02-02at24444pm

  5. Click Extract. A dialog allows you to specify details of the component to be generated:

    Path Select the path you want to extract your component to.
    Label Add a label. This field is mandatory.
    Overwrite If this component already exists, select this check box to overwrite the existing component.
    Title Name of the component.
    Description Optional description of the component.
    Group Group you want your component to appear in.
    Supertype The path for the component supertype.
    Allowed Parents Describes the allowes parents. By default, it is */parsys.

  6. Click Create to generate the specified component based on the selected HTML.

  7. The new component can now be accessed when editing the parsys in Design Mode:

Opomba:

After automatic extraction the component dialog often needs customization. For example, specifying the componentGroup and adding the component to the list of Allowed Components for the paragraph system (in Design mode).

See Components for more information.

Making Your New Component Available in the Extractor

In the default configuration, the Component Extractor only lists components from foundation/components under Components.

You can add your newly extracted components:

  1. Open CRXDE.
  2. Select /etc/importers/site/extractor.
  3. Double-click on displayComponents to open the edit dialog and add the path to your new components.
  4. Set the order for display purposes, then click OK to save.

Creating a Mapping to a Component

To create a mapping to a specific component:

  1. Select the section of HTML that you want to be replaced with a component.

  2. Select the required component (for example list) and drag onto the selected area:

    screen_shot_2012-02-02at33641pm

  3. A mapping will be created showing:

    • Element, the HTML division being mapped
    • Component, the component being mapped to this element
    • Path, this specifies the path used to define the (JCR) location below a container component (parsys), or page content where the content of a component instance is stored. You must assign a value for Path.

  4. Double-click on Path to add the value.

  5. Click Generate.

  6. Now when you create a new page with the template you can see that the component is available in the specified location:

    screen_shot_2012-02-02at35156pm

Creating a Mapping to a Paragraph System

This is basically a variation on adding a mapping to a component, but will provide any users of the template with a paragraph system. With this, they can add content by using any components that you have allocated to the resulting paragraph system:

  1. Select the section of HTML that you want to be replaced with the paragraph system.

  2. Select the required component - Paragraphsystem.

  3. Drag to the selected area of HTML.

  4. The new Mapping will be added - specify the path:

    screen_shot_2012-02-02at41031pm

  5. Click Generate.

  6. Now when you create a new page with the template you can see that the paragraph system is available in the specified location.

  7. Enter Design mode to activate the required components to this paragraph system. Once components have been allocated they can be selected and added. The component can then be seen (this example simply uses the original HTML, in a real life scenario the component would also certainly have been customized):

    screen_shot_2012-02-02at42102pm