Many websites require content to be delivered in a localized format across multiple languages and geographies. Selected Core Components feature smart reference resolution to make it simple to create a unified template for all of your localized content that automatically adapts based on your localized site structure.
Most sites require a footer to be present across all pages. These footers are generally consistent across all content of the page. However for a localized content page, a localized version of that header or footer needs to be displayed.
Similarly a navigation component usually must be displayed across all pages. However it will need to reflect the content of the localized pages as well.
Using the localization features of the Navigation Core Component and Experience Fragment Core Component along with the editable templates of AEM, this becomes a simple task. The example could be further extended to use the Language Navigation Component as well.
All of the localization features of AEM and its Core Components rely on a clear and logical content structure for your localized content.
Let’s say that your site is simply called
my-site and is located here:
Let’s also say that you author your site in English and offer it in French as well. So if you have a simple page called
my-page it would be found in two localization branches in your site’s content tree:
/content \-- my-site +-- en \-- my-page \-- fr \-- my-page
It is under these localization branches where you will create additional sites pages.
Page footers are generally made using Experience Fragments so you will need an English and French version just like your pages. However Experience Fragments are not pages, but are rather parts of pages that can be reused across pages, so they do not live directly under
/content as the rest of your pages. Instead they live under their own folder, but since they also must be localized, their structure must mirror the localization structure of your site.
/content +-- experience-fragments +-- en \-- footer \-- fr \-- footer \-- my-site +-- en \-- my-page \-- fr \-- my-page
It is through the mirrored localization structure that the Core Components can find the necessary localized content for a corresponding page.
The Experience Fragment Component is very flexible and is well-suited for a page header or footer.
Because our hypothetical website is offered in English and French, we will need to create two Experience Fragments, both called
footer in the locations we described previously.
Because the footer will appear on every page, we will need to add the Experience Fragment to our standard page template.
Our template is simply called
my-template and is located with our other templates:
To this template we will add the basic components that we want our pages to be based on.
By doing the hard work in setting up the site structure and template, the content author simply needs to add the necessary content to the pages. Thanks to the templates and the localization logic of the components, the navigation and footers will be automatically added to the page and localized.
For example, the author would only need to add content such as a text component to the English and French pages (represented in blue below).
The Navigation Component and Experience Fragment Component come from the page template and know to automatically display the correct content based on the localization structure and the location of the page itself (represented in white below).
Here is the complete picture of how these simple, but powerful elements work together to deliver localized pages for the content authors.