Hi Magnolia

This absolute beginner’s tutorial is an abridged version of Hello Magnolia, with the functionality limited to the bare minimum required to put together a web page using simple commands and pre-configured components.

This tutorial is based on version 4 of Magnolia CLI.

You’ll learn what those components are and where to put them to produce this simple web page:

Page preview

You’re seeing a preview of the page on the left in Magnolia. As depicted below, you’d see green component bars when editing the page.

Editing a page

Prerequisites

First, you’ll need to get Magnolia if you haven’t installed it already.

What are we going to do?

Tutorial overview

We’ll locate the light module folder in the Magnolia installation directory.
Then, we’ll add page and component templates in subfolders.
Next, we’ll add dialog files in subfolders.
Finally, we’ll create a page using the dialogs and templates from the previous steps.

Key

You’ll create one folder.
You’ll create two folders.
You’ll add one file into a folder.
You’ll add two files into a folder.
You’ll need to download one file.
You’ll need to download two files.

Setting up templates and dialogs

Steps and explanations Folders and files

Find the light-modules folder inside the Magnolia installation directory. For example purposes, let’s say you named the installation folder magnolia. The mgnl jumpstart command created the light-modules for you when installing Magnolia.

Your Magnolia installation continually monitors the light-modules folder, and any folders or files created there are added to the definitions available in Magnolia.

The default root folder structure after installation with Magnolia CLI v4 is below.

📁 magnolia

📁 apache-tomcat

📁 downloads

📁 light-modules

Creating the module folder, template folder and files.

In light-modules, create a hi-magnolia subfolder and then a templates folder inside it.
Create another subfolder called pages.

Add both page template files Download icon , magnolia123.yaml and magnolia123.ftl.

Page templates (files with the YAML extension) contain details about areas on a page and how pages are turned into HTML. Template scripts (ones with an FTL extension) turn those templates into final HTML page files.

📁 magnolia

📁 light-modules

📁 hi-magnolia

📁 templates

📁 pages

magnolia123.yaml

magnolia123.ftl

Creating the component template folder and files.
1. Create a components subfolder inside the templates folder.
2. Add the paragraph component template files inside it, paragraph.yaml and paragraph.ftl.
3. Add the title component template files inside it as well, title.yaml and title.ftl.
  
  Component templates refer to single components on a page such as text, images, and links, much in the same way page templates refer to areas as a whole.

📁 hi-magnolia

📁 templates

📁 components

paragraph.yaml

paragraph.ftl

title.yaml

title.ftl

Creating the dialog folders and files.

Create a dialogs subfolder inside the hi-magnolia folder.
Under that, create two subfolders, pages and components.
Copy the component dialog files, paragraph.yaml and title.yaml, into the components folder, as depicted on the right

Copy the page dialog file, magnolia123.yaml, into the pages folder, as depicted on the right Download icon

Dialogs are how authors enter content into Magnolia. Dialog definitions specify editable fields where editors can add or update the content itself. In addition, they may define operations that authors can do on the content, for example, commit or cancel.

📁 hi-magnolia

📁 dialogs

📁 components

paragraph.yaml

title.yaml

📁 pages

magnolia123.yaml

Creating a page with dialogs based on templates

Start up your Magnolia instance.
Log in and open the Pages app.
Create the page at the beginning of this tutorial, as illustrated in the short video below.

Hi Magnolia

Prerequisites

What are we going to do?

Setting up templates and dialogs

Creating a page with dialogs based on templates

Location

Main doc sections