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.

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

A preview of the finished page.

Page preview

In page edit view, you’d see green component bars.

Editing a page

This tutorial is based on version 5 of Magnolia CLI.

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 CLI v5 npx @magnolia/cli 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 v5 is below.

📁 magnolia

📁 apache-tomcat

📁 light-modules

📁 node_modules

Creating the hi-magnolia module folder, a template folder and adding template files.

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

📄📄 Add both page template files ⤓⤓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 the .ftl extension) turn those templates into final HTML page files.

📁 light-modules

📁 hi-magnolia

📁 templates

📁 pages

magnolia123.yaml

magnolia123.ftl

Creating the component template folder and files.
1. 📁 Create the components subfolder inside the templates folder.
2. 📄📄 Add the paragraph component files ⤓⤓paragraph.yaml and paragraph.ftl inside it.
3. 📄📄 Add the title component files ⤓⤓title.yaml and title.ftl inside it as well.
  
  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 the dialogs subfolder inside the hi-magnolia folder.
📁📁 Under that, create two subfolders, components and pages.
📄📄 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.

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 that is displayed at the beginning of this tutorial:
1. Click Add page in the Action bar on the right.
2. In the Add page dialog, call the page Hello World, choose the hi-magnolia template for it, and click Next:
3. In the Add page dialog, enter also Hello World in the Page name field and click Save changes.
4. Click Edit page in the Action bar on the right.
5. Start adding components to the page. Click the plus button in the New Main Component bar.
  1. In the Add component dialog, select the Title option and hit Next.
  2. In the Title dialog, type "My first title in Magnolia" and click Save changes.
6. Click the New Main Component plus button again.
  1. In the Add component dialog, select the Paragraph option and press Next.
  2. In the Paragraph dialog, type "This is my first sentence in Magnolia." and click Save changes.

Publishing the page

To publish the page to the public instance:

Go back to the page browser view of the Pages app.
Select the page and click Publish in the Action bar on the right.

Excellent.

You’ve created and published your first Magnolia page with two components in it.

Hi Magnolia

Prerequisites

What are we going to do?

Setting up templates and dialogs

Creating a page with dialogs based on templates

Publishing the page

Location

Main doc sections