Template definition
A template definition gives a template a name and makes it available to the system.
At a minimum, a SPA template definition must specify a renderer type ($type property) and base URL (baseUrl).
Template definition types
Magnolia has three types of template definitions:
-
Page definition - defines a page template. Pages are divided into areas.
-
Area definition - defines an area template. An area is configured in a page definition. Areas typically contain components.
-
Component definition - defines a component template.
Template properties
| Property | Description | ||
|---|---|---|---|
|
required Alias representing the definition data of this item. Use the following values:
|
||
|
required An external URL which the page editor iFrame must point to. Multiple pages can have the same page definition but each page may need a different path or parameter to initialize. The format of this initialization element can be specified using the |
||
|
optional Format of a string appended to
Examples With
http://localhost:3000/?title=The string ü@foo-bar
http://localhost:3000/?title=The+string+%C3%BC%40foo-bar |
||
|
optional Dialog definition ID in
|
||
|
optional Defines which renderer to use. Magnolia SaaS supports the For site-aware SPA rendering, the value is |
||
|
optional Template title displayed to editors. The value can be literal or retrieved from a message bundle with a key. Use alphanumeric characters in literal values. Displayed in:
|
||
|
optional Template description displayed to editors. The value can be literal or retrieved from a message bundle with a key. Use alphanumeric characters in literal values. |
||
|
optional Custom template properties that you can access (reference and use) in |
||
|
optional Inherits the configuration from another template definition. The value is a valid Magnolia path. |
||
|
optional Allows you to deliver the same content in different formats. This helps you optimize content for different channels (desktop, smartphone and tablet) and system parameters. You can configure variations in the site definition as well as the template definition. Alternatively, you may want to use personalization to create content variants. |
parameters:
example: my-value
Referencing templates
Other configuration nodes can reference templates. The property used in the referencing configuration depends on the mechanism used.
Referencing templates with id property
The template id property is used for:
-
Component availability in an area definition.
-
Template availability in a site definition.
| Property | Description | ||
|---|---|---|---|
|
required ID of the template definition in
You can reference templates from any module.
|
Referencing templates using path
You can use the following mechanisms to reuse a configuration:
-
Include mechanism, used in YAML definitions to include a referenced file. The Magnolia-specific
!includedirective uses the absolute path to reference the file. -
Definition decoration, allowing you to alter the existing configured items, such as apps, dialogs, fields, templates and more.
Configuration examples
With baseUrl property
$type: spa
title: 'React: Contact'
baseUrl: http://example.com
dialog: spa-lm:pages/basic
With baseUrl and routeTemplate properties
$type: spa
title: 'React: Contact'
baseUrl: http://localhost:3000
routeTemplate: '{{path}}?lang={language}'
dialog: spa-lm:pages/basic
Site SPA render type
$type: siteSpa
visible: true
dialog: mte:pages/pageProperties
baseUrl: http://localhost:3100/magnoliaAuthor
routeTemplate: '{{@path}}'
areas:
header:
renderType: spa
title: Header
type: single
availableComponents:
navigation:
id: vue-lm:components/navigation
main:
renderType: spa
title: Main
availableComponents:
title:
id: vue-lm:components/title
text-image:
id: vue-lm:components/text-image
component-with-area:
id: vue-lm:components/component-with-area