M6.3 - Templating 1: FreeMarker and Templating Fundamentals

Total time: ~1 day

”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.”

Prerequisites

”A Magnolia project created using the Magnolia CLI jumpstart is required, as introduced in M6.3 – 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

1. Getting started with Light Development 4 min
2. Preparation: Setting up the environment 20 min
3. Magnolia CLI 10 min
4. Light modules 5 min
5. Exercise: Create a light module 5 min
6. Knowledge check 1 min
7. Resource files app 6 min
8. Exercise: Check the light module in the app 2 min
9. Template 6 min
10. Page template 6 min
11. FreeMarker directives - page 5 min
12. Exercise: Create a page template 5 min
13. JCR 6 min
14. Exercise: Check entries in the JCR browser 4 min
15. Resource linking 4 min
16. Exercise: Use 'Twitter Bootstrap' CSS Resource 7 min
17. Knowledge check (CSS) 1 min
18. Dialog 7 min
19. Exercise: Add dialog definition and content 7 min
20. Accessing the content 5 min
21. Render the first Page's content 8 min
22. Area template 5 min
23. FreeMarker directives - area 5 min
24. Exercise: Create an area 7 min
25. Component template 5 min
26. FreeMarker directives - component 3 min
27. Exercise: Create a component template textImage 8 min
28. Knowledge check (FreeMarker) 1 min
29. FreeMarker: Basics 9 min
30. Exercise: 'Text & Image' Component - Create Headline 8 min
31. Templating functions 7 min
32. Exercise: Make use of cmsfn to decode a property 7 min
33. Dam TemplatingFunctions 6 min
34. Exercise: Make Use of the Dam TemplatingFunctions 13 min
35. Linking in JCR & Magnolia 7 min
36. Exercise: Create a Teaser Component 8 min
37. Definition Objects - Parameters 5 min
38. Exercise: Parameterize a new 'textImageParameters' Component 9 min
39. Area Definition - Area Script 5 min
40. Exercise: Use the Area Script 2 min
41. Definition decorator 8 min
42. Exercise: Decorate an app label 5 min
43. Definitions App 10 min
44. Congratulations! 1 min

About the teacher

Tu Bo Xuan
Senior Solution Architect