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:
- Import an existing web page using the site importer.
- Extract components from the imported HTML using the Component Extractor.
- 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.
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.
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:
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.
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:
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.
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.
In the default configuration, the Component Extractor only lists components from foundation/components under Components.
You can add your newly extracted components:
- Open CRXDE.
- Select /etc/importers/site/extractor.
- Double-click on displayComponents to open the edit dialog and add the path to your new components.
- Set the order for display purposes, then click OK to save.
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.
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:
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):