Site Importer

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:

Make the required customizations to the resulting components, designs, campaigns, etc; CRXDE Lite can be used for development.

Generate mappings between components (those generated and/or standard AEM) and the template to make the new functionality available; again using the Component Extractor.

Generate new pages with the updated template.

Importing a Web Page from an Existing Site

To perform the initial import:

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

Select Importers in the left pane.

Double-click on Site Importer to open:

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.

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

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:

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:

In the Site Importer, click Insert Components.

註解：

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.

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.

Click Select.

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:

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.

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

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

註解：

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

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.

Double-click on Path to add the value.

Click Generate.

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

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:

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

Select the required component - Paragraphsystem.

Drag to the selected area of HTML.

The new Mapping will be added - specify the path:

Click Generate.

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

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