Magnolia 5.6 reached end of life on June 25, 2020. This branch is no longer supported, see End-of-life policy.
...
This page explains how to use the Magnolia Templating Kit (MTK), provided as a submodule of the Magnolia Templating Essentials module (MTE) .
Table of Contents |
---|
Include Page | ||||
---|---|---|---|---|
|
...
The MTK module includes page, area and component templates and associated dialogs.
The basic
page template is a good starting point for custom page templates.
...
htmlHeader
, navigation
, main
and footer
The areas are defined in the page template (see the areas
node below). Areas typically define what components editors can place inside the area (see the availableComponents
node in footer
and main
areas below).
Code Block | ||
---|---|---|
| ||
templateScript: /mtk/templates/pages/basic.ftl dialog: mtk:pages/basic renderType: freemarker class: info.magnolia.module.site.templates.PageTemplateDefinition cssFiles: normalize: link: /.resources/mtk/css/normalize-3.0.3.css main: link: /.resources/mtk/css/html5boilerplate-main-5.3.0.css video: link: /.resources/mtk/css/video.css jsFiles: modernizr: link: /.resources/mtk/js/modernizr-2.8.3.min.js areas: htmlHeader: type: noComponent createAreaNode: false templateScript: /mtk/templates/areas/htmlHeader.ftl navigation: type: noComponent createAreaNode: false templateScript: /mtk/templates/areas/navigation.ftl footer: inheritance: components: all enabled: true availableComponents: &footerAvailableComponents link: id: mtk:components/link textImage: id: mtk:components/textImage image: id: mtk:components/image main: availableComponents: # using all components from footer plus others <<: *footerAvailableComponents html: id: mtk:components/html linkList: id: mtk:components/linkList teaser: id: mtk:components/teaser video: id: mtk:components/video pageIntro: id: mtk:components/pageIntro |
The MTK provides basic components for use in your templates:
ID: mtk:components/textImage
Displays text and an image.
ID: mtk:components/link
Creates a link to an internal or external page or a downloadable asset.
ID: mtk:components/linkList
Organizes link components into a bulleted, inline or ordered list.
ID: mtk:components/image
Displays an image.
ID: mtk:components/teaser
Promotes another Magnolia page, third-party website or a downloadable asset, inviting the visitor to click for more.
ID: mtk:components/html
Allows editors to enter HTML markup and renders it on the page.
ID: mtk:components/video
Adds the possibility to add a video. Videos can be taken from the assets app - or you may just add "embed code" as provided by youtube and other public video repositories.
ID: mtk:components/pageIntro
A component to render the page properties title
and abstract
.
The MTK provides basic navigation to use in your templates. Add subpages to see the navigation.
...
The navigation is provided by two scripts that use navfn templating functions which are included in the MTE module.
The navigation
area is rendered by the navigation.ftl
script. This script sets the root page, navigation depth and behavior, and includes the navigation.ftl
macro.
...