AEM Blank Slate Starter Site

An Adobe Experience Manager (AEM) “Blank Slate” basic starter site example to demonstrate creating basic pages, templates and their components. This site uses static templates and covers a couple of key AEM concepts including the Proxy Component Pattern. This tutorial was created using AEM version 6.4

Getting Started

From the AEM Start page, select the Tools Menu > CRXDE Lite

Optionally, skip directly to the source code available on GitHub which can be deployed into the JCR using the AEM Developer Tools for Eclipse. For more information, checkout my Developer Tools for Eclipse page.

NOTE: For professional development, it is a best practice to create an AEM Maven Project instead of this proof of concept starter site. This is the way.

Application Folders

In CRXDE Lite, create the application folders. Right-click on apps, select Create, Create Folder. Enter a folder name for the application. For example blankslate

Select the “Save All” button or Ctrl+S

In the new application folder, create these two folders.

• components
• templates

Since CRXDE Lite is a web based JCR editor, it is recommended to Save after every edit to prevent errors.

Basic Page Template

Create a basicpage Static Template for the blankslate site.

Right-click on the /apps/blankslate/templates folder, select Create, Create Template.

Enter the following information into the Create Template dialog box:

Label: The name of the template to create. Enter basicpage

Title: The title that is assigned to the template. Enter Blank Slate Basic Page

Resource Type: The basicpage component we will create in the next step will be our basicpage template resource. Enter blankslate/components/basicpage.

Ranking: The order in which this template will appear relative to other templates. Setting this value to 1 puts this template at the top of the list.

Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?

The allowedPaths property contains the path of a page that is allowed to be based on this template.

• Click Next for Allowed Parents.
• Select OK on Allowed Children.

Basic Page Component

Create the basicpage component.

Right-click /apps/blankslate/components, then select Create, Create Component.

Enter the following information into the Create Component dialog box:

Label: The name of the component to create. Enter basicpage.

Title: The title that is assigned to the component. Enter Basic Page.

Super Type: core/wcm/components/page/v2/page

The Super Type, sling:resourceSuperType allows the page component to inherit all of the functionality of the Core Component page component using the Proxy Component Pattern - more info.

In the Create Component dialog, Click Next, Then OK.

Expand the basicpage component node and delete the basicpage.jsp file.

Right-click the basicpage component node, select Create, Create File.

Name: body.html

This body.html file will be used instead of the core/wcm/components/page/v2/page/body.html file. All of the other files in the page component will still be inherited unless new versions are created within the basicpage component.

In the body.html file, add the following markup.

<div data-sly-include="content.html"></div>

<div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>

This markup contains HTL code. data-sly-resource is an attribute to specify the component that we are adding to the page. It’s has a resourceType parameter that points to a parsys component. This is the standard procedure to provide a location to add components in a template.

Since our body.html is using HTL to include a content.html file, let’s create it.

Right-click the basicpage component node, select Create, Create File.

Name: content.html

In the content.html file, add the following markup.

<h3>Content</h3>

In CRXDE Lite, select the /apps/blankslate/components/basicpage node to access its Properties tab in the lower right tools panel. Add a componentGroup property with a value of .hidden since this is a not an authorable component.

Here is how the node structure should look in CRXDE Lite

Content Root

Create a content root page based on the Blank Slate Basic Page template.

The content root defines the allowed templates for the site and is used to set other global configurations. By convention the content root is not intended to be the Home page for the site and instead will redirect to the true home page.

Select the AEM Start tab that should still be on the Tools page.

• Navigate to Sites.

• Click Create, Page.

• Select the Blank Slate Basic Page template and click Next.

• Create a page with Title: Blank Slate, select Done.

Home Page Template

In CRXDE Lite, expand the /apps/blankslate/templates folder. Right-click on the templates folder and create a template named homepage.

Label: homepage

Title: Blank Slate Home Page

Resource Type: blankslate/components/homepage

Set the allowed Paths value to: /content/blank-slate(/.*)?

• Click Next for Allowed Parents.
• Select OK on Allowed Children.

Home Page Component

In CRXDE Lite, expand the /apps/blankslate/components folder. Right-click on the components folder and create a component named homepage with a sling:resourceSuperType:blankslate/components/basicpage.

Label: homepage

Title: Home Page

Super Type: blankslate/components/basicpage

Rename the homepage.jsp to content.html and replace the code with some static html markup for testing. e.g., <h3>Hello World</h3>. Given that our homepage component sling:resourceSuperType is blankslate/components/basicpage, the content.html from the basicpage component will be utilized.

Home Page

Using the touch UI, create a Home page based on the homepage template.

• Navigate to the start page, e.g., /aem/start.html

• Select Sites > Blank Slate, e.g., /sites.html/content/blank-slate

• Select the Blank Slate Home Page template and click Next.

Title: English

Name: en

Using a language code for the page name will set the language of the page to that of the respective language code. It is a best practice to allow multi-lingual versions of the same site to use the same core structure. more info

Content Root Redirect

Since the content root is not intended to be the Home page for the site, let’s add a redirect to the default homepage in en.

In CRXDE Lite, select the /content/blank-slate/jcr:content node to access its Properties tab in the lower right tools panel. Add a redirectTarget property with a value of /content/blank-slate/en to point to the default home page.

Add a second property named sling:redirectStatus with a Long value of 302 for the HTTP Status code.

Select the “Save All” button or Ctrl+S

Using Parsys

Navigate to Sites, select the Blank Slate, English page. Then select the Edit action.

The Paragraph System - HTL [Root] (ParSys) container should be visible below our static “Hello World” heading. It may need to be configured in order to allow component inserts. To configure the parsys container, the page will need to be in Design mode. From the page menu, select the mode dropdown currently in Edit mode and select Design.

Then select the Paragraph System - HTL [Root] container. Select the parent icon that is tabbed onto it and it should change to a wrench icon. Select the wrench to configure.

On the Allowed Components tab, check the box for “General” to allow the ParSys to use them. Then select the checkmark on the right in the ParSys menu to save the configuration and return to the page.

From the page menu, select the mode dropdown currently in Design mode and select Edit. Then select the ParSys container and the tabbed Plus icon to Insert a component of your choosing.

After you insert a component, a new empty ParSys container is added for you to continue adding components as needed. For example, to replace the static “Hello World” with a Title component. Insert a Title component into the ParSys. Then drag the Title component to the top of the page.

The static <h3>Hello World</h3> markup can then be deleted from the /apps/blankslate/components/homepage/content.html file using CRXDE Lite.

Client-Side Libraries

There are a number of different ways to add css and js to the site. I encourage you to inspect the /apps/weretail/clientlibs folder in CRXDE Lite and read, Using Client-Side Libraries to learn about Client-side Library Folders. For this blankslate starter site, we’ll be using a clientlibs folder within /apps/blankslate similar to the weretail app.

clientlibs

In CRXDE Lite, right-click the apps/blankslate folder, select Create, Create Folder.

Name: clientlibs

Ctrl+S save

clientlibs-site

Right-click the new clientlibs folder in apps/blankslate. Select Create, Create Node.

Name: clientlib-site

Type: cq:ClientLibraryFolder

Add an allowProxy property to expose the css and js resources using /etc.clientlibs.

Name: allowProxy

Type: Boolean

Value: true

Add a categories property using the Multi button next to the Value field to set the type to a string array. Categories allow the clientlib to be referenced.

Name: categories

Type: String[]

Value: blank-slate.site

Ctrl+S save

common

Right-click the apps/blankslate/clientlibs folder, select Create, Create Folder.

Name: common

Ctrl+S save

Right-click the new common folder in apps/blankslate/clientlibs. Select Create, Create File.

Name: normalize.less

Copy and paste the code from normalize.less

Create another less file in the common folder for variables.

Name: variables.less

Code:

//== Typography
//
@font__heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font__main: Verdana, sans-serif;
@font__line-height-body: 1.5;
@font__line-height-heading: 1.25;

Ctrl+S save

Right-click the clientlib-site folder in apps/blankslate/clientlibs. Select Create, Create Folder.

Name: less

Ctrl+S save

main.less

Right-click the new less folder in apps/blankslate/clientlibs/clientlib-site. Select Create, Create File.

Name: main.less

Code:

@designPath: '/apps/blankslate/clientlibs';
@sitePath: '@{designPath}/clientlib-site';
@import "@{designPath}/common/variables";
@import "@{designPath}/common/normalize";

body {
  font-family: @font__main;
  line-height: @font__line-height-body;
}

h1, h2, h3, h4, h5, h6 {
  font-family: @font__heading;
  line-height: @font__line-height-heading;
}

Ctrl+S save

css.txt

Right-click the clientlib-site folder in apps/blankslate/clientlibs. Select Create, Create File.

Name: css.txt

Code:

less/main.less

Ctrl+S save

js.txt

Right-click the clientlib-site folder in apps/blankslate/clientlibs. Select Create, Create File.

Name: js.txt

Code:

script.js

Ctrl+S save

script.js

Right-click the clientlib-site folder in apps/blankslate/clientlibs. Select Create, Create File.

Name: script.js

Code:

/** IIFE to bootstrap the JS */

(function () {
    'use strict';

    /* global var object */
    window.blankslate = window.blankslate || {};

    /* app */
    blankslate.app = null;

}).call(this);

Ctrl+S save

customheaderlibs.html

The basicpage component Super Type page inheritance includes the customheaderlibs.html file for the purpose of loading custom header libraries.

Right-click the basicpage component node, select Create, Create File.

Name: customheaderlibs.html

Code:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='blank-slate.site'}"></sly>
</sly>

Ctrl+S save

customfooterlibs.html

The basicpage component Super Type page inheritance includes the customfooterlibs.html file for the purpose of loading custom footer libraries.

Right-click the basicpage component node, select Create, Create File.

Name: customfooterlibs.html

Code:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='blank-slate.site'}"></sly>
</sly>

Ctrl+S save

apps/blankslate structure in CRXDE Lite with focus on clientlib-site

Preview

Verify the clientlibs are loaded by inspecting the page in publish view. Select the Page Information menu and View as Published.

Source Code