M6.4 - Templating 1: FreeMarker and Templating Fundamentals

”In this course, you will learn how to build Magnolia page, area, and component templates using FreeMarker and Light Development. Starting from basic template concepts, you will create page templates, dialogs, areas, and reusable components while working directly with JCR content.

The course focuses on practical templating techniques, including FreeMarker directives, Magnolia templating functions, resource linking, and parameterized components. You will also learn how to structure templates cleanly, decorate definitions, and debug configurations using the Definitions app. By the end, you will be able to implement flexible, maintainable front-end templates that integrate cleanly with Magnolia’s content model.”

Total time: ~1 day

Start with Chapter 1

Prerequisites

”A Magnolia project created using the Magnolia CLI jumpstart is required, as introduced in M6.4 – Content Types and Content Apps, with a running Magnolia instance and Light Development setup in place.

No prior knowledge of content types or content apps is required. Basic understanding of HTML, CSS, and server-side templating concepts is assumed.”

Chapters

No need to watch in order — jump straight to what aligns with your goals.

Getting started with Light Development

Preparation: Setting up the environment

Exercise: Create a light module

Knowledge check

Resource files app

Exercise: Check the light module in the app

FreeMarker directives - page

Exercise: Create a page template

Exercise: Check entries in the JCR browser

Resource linking

Exercise: Use 'Twitter Bootstrap' CSS Resource

Knowledge check (CSS)

Exercise: Add dialog definition and content

Accessing the content

Render the first Page's content

FreeMarker directives - area

Exercise: Create an area

Component template

FreeMarker directives - component

Exercise: Create a component template textImage

Knowledge check (FreeMarker)

FreeMarker: Basics

Exercise: 'Text & Image' Component - Create Headline

Templating functions

Exercise: Make use of cmsfn to decode a property

Dam TemplatingFunctions

Exercise: Make Use of the Dam TemplatingFunctions

Linking in JCR & Magnolia

Exercise: Create a Teaser Component

Definition Objects - Parameters

Exercise: Parameterize a new 'textImageParameters' Component

Area Definition - Area Script

Exercise: Use the Area Script

Extra: Retrieving Data From a Workspace

Template References - Overview

Definition decorator

Exercise: Decorate an app label

Definitions App

Congratulations!

Extra Exercise: Render Your Content from the Magnolia Workspace

About the teacher

Tu Bo Xuan

Senior Solution Architect