Page History

...

Navigation
Intro
Three content sections, one of which has a collection of cars

Code Pro

language	xml
title	prototype.html
collapse	true
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/webresources/prototype/prototype.html?at=master&raw

Open the file in your browser. Or go to http://localhost:8080/magnoliaAuthor/.resources/one-pager-module/webresources/prototype/prototype.html to have Magnolia serve it.

...

Create the file one-pager-module/templates/pages/main.yaml.

Code Pro

language	yaml
title	main.yaml

...

templateScript: /

...

one-pager-module/templates/pages/main.ftl
renderType: freemarker
visible: true
title: One pager template
dialog: one-pager-module

...

:pages/main

...


areas:
  content-sections:
#     availableComponents:
#       content-items-list:
#         id: one-pager-module:components/content-items-list
#       textImage:
#         id: one-pager-module:components/textImage

Lines 8-12: The section availableComponents of the content-sections areas is commented for the time being. We will come back to this when adding components.

Dialog definition

Define a page dialog. The dialog defines properties which are stored on the page node:

Title
Subtitle
Copyright
Meta description
Meta keywords
Background image of the intro section

...

Dialog definition

Define a page dialog. The dialog defines properties which are stored on the page node:

Title
Subtitle
Copyright
Meta description
Meta keywords
Background image of the intro section

Code Pro

language	yaml
title	one-pager-module/dialogs/pages/main.yaml
linenumbers	true
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/dialogs/pages/main.yaml?at=master&raw

...

Code Pro

language	yaml
title	one-pager-module/dialogs/

...

pages/main.yaml
linenumbers	true
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/dialogs/

...

pages/main.yaml?at=master&raw

Template script

Create a template script in Most dialogs have Save and Cancel actions. Create a reusable dialog definition file for them. Save this file in /one-pager-module/templates/pages/main.ftlincludes/default-dialog-actions.yaml.

Code Block

language	xmlyaml
title	main.ftlone-pager-module/includes/default-dialog-actions.yaml
linenumbers	true
collapse	true
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/raw/light-modules/one-pager-module/includes/default-dialog-actions.yaml?at=master

The !include directive is one possibility to reuse configuration. Also read YAMLinclude for further details.

Template script

Create a template script in one-pager-module/templates/pages/main.ftl.

Code Block

language	xml
title	main.ftl
linenumbers	true
collapse	true

[#assign title = content.title!"Eric's Classic Cars"]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 [#assign title = content.title!"Eric's Classic Cars"]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="${content.keywords!""}"/>
    <meta name="description" content="${content.description!""}"/>
    <meta name="author" content="">

    <title>${title}</title>

    [#--bootstrap css--]
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/bootstrap.min.css ">
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/bootstrap-theme.min.css ">
    [#--Custom CSS--]
    <link rel="stylesheet" href="${ctx.contextPath}/.resources/one-pager-module/webresources/css/one-pager.css?z=123">
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    [#--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--]
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    [@cms.page /]
</head>
<body>
  <h1>${title}</h1>
  <p>${content.subTitle!"No subtitle defined"}</p>

    [#--jquery and bootstrap js--]
    <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/jquery.js"></script>
    <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/bootstrap.min.js"></script>
    <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/jquery.easing.min.js"></script>
    [#--custom js--]
    <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/js/one-pager.js"></script>
</body>
</html>

...

Code Block

language	xml
title	templates/pages/main.ftl

<h1>${title}</h1>
<p>${content.subTitle!"No subtitle defined"}</p>

With this:

Code Pro

language	xml
title	templates/pages/main.ftl
sections	%%(<div class="intro-section" id="intro">)%% - %%(eof: intro-section)%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/templates/pages/main.ftl?at=master&raw

Refresh the Magnolia page to see the effect.

...

Display a background image in the intro section. Add the following snippet inside the <head> element in the template script:

Code Pro

language	xml
title	templates/pages/main.ftl
sections	%%(<style>)%% - %%(</style>)%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/templates/pages/main.ftl?at=master&raw

Open the page properties dialog and go the Background tab to select an image. You can find the Jaguar image you see above in /cars/007-cars/intro-bg.jpg in the Magnolia DAM or upload your own.

...

The prototype contains two in-page navigation menus, one at the top and one at the bottom of the page. If you study the html you realize that both menus contain very similar code. Let's remove this duplication and "outsource" the menu code to a Freemarker macro and use it twice.

`createSectionNav` macro

.

`createSectionNav` macro

Create a macro that renders a list of anchor links. The anchors are page areas that you will create in a moment.

Add the following snippet at the top of the template script:

Code Pro

language	xml
title	templates/pages/main.ftl
sections	%%(macro createSectionNav)%% - %%(#macro])%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/templates/pages/main.ftl?at=master&raw

Top navigation

Call the macro at the top of the page to create a top menu.Create a macro that renders a list of anchor links. The anchors are page areas that you will create in a moment.

Add the following snippet at the top of the template script:right after the opening <body> tag.

Code Pro

title
language	xml

...

top navigation
sections	%%(

...

top navigation)%% - %%(

...

eof: top navigation)%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light

...

-modules/one-pager-module/templates/pages/main.ftl?at=master&raw

Note the macro calls [@createSectionNav page=content areaName="content-sections" type="top" /]. The macro takes the following parameters:

page: content of the page as a ContentMap.
areaName: name of the area definition node.
type: location of the menu, top or bottom.

Footer

...

navigation

Call the macro at the top of again in the page footer to create a top bottom menu.

Add the following snippet right after the opening <body> tag.before the closing </body> tag and before the <script> elements:

Code Pro

title
language	xml

...

templates/pages/main.ftl
sections	%%(

...

--Footer--)%% - %%(--eof:

...

Footer--)%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/templates

...

/pages/main.ftl?at=master&raw

`content-sections` area

The page template defines one area – content-sections.

...

page: content of the page as a ContentMap.
areaName: name of the area definition node.
type: location of the menu, top or bottom.

Footer navigation

Call the macro again in the page footer to create a bottom menu.

Add the following snippet before the closing </body> tag and before the <script> elements:

Code Pro

language

...

yaml
title	templates/pages/main.

...

yaml

areas:
  content-sections:
    availableComponents:
#      content-items-list:
#        id: one-pager-module:components/content-items-list
#      textImage:
#        id: one-pager-module

...

:components/textImage

We haven't rendered the area on the page yet. Add the following snippet between the intro and the footer section:

...

`content-sections` area

The page template defines one area – content-sections.

Code Pro

language

...

xml
title	templates/pages/main.

...

ftl
sections	%%(

...

eof: intro-section)%% - %%(

...

--Footer--)%%
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/browse/light-modules/one-pager-module/templates/pages/main.

...

ftl?at=master&raw

Template script final version

Here you can see the final version of the template script - the way it should like - after you have followed all the above steps.We haven't rendered the area on the page yet. Add the following snippet between the intro and the footer section:

Code Pro

language

...

yaml
title	one-pager-module/templates/pages/main.ftl
linenumbers	true

...

collapse	true
url	https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-first-website-tutorial/

...

raw/light-modules/one-pager-module/templates/pages/main.ftl?at=master

...

Files overview

You should now have the following files for the page template:

Code Block

language	bash

light-modules/
└── one-pager-module
    ├── README.md
    ├── dialogs
    │   ├── commoncomponents
    │   └── │pages
   └── default-dialog-actions.yaml
 │    │   └── pagesmain.yaml
    ├── │includes
    │   └── maindefault-dialog-actions.yaml
    ├── templates
    │   ├── components
    │   └── pages
    │       ├── main.ftl
    │       └── main.yaml
    └── webresources
        ├── bootstrap-3.3.5
        │   ├── bootstrap-theme.min.css
        │   ├── bootstrap.min.css
        │   ├── bootstrap.min.js
        │   ├── jquery.easing.min.js
        │   └── jquery.js
        ├── css
        │   └── one-pager.css
        ├──└── js
            └── one-pager.js

You can download the complete one-pager-module directory as a ZIP from our Git server. It also includes the prototype which is not shown on the files tree above.

Components and the files shown previously from the prototype directory are not shown here.

Next: Accessing content on the server side

Page tree

Versions Compared

Old Version 1

New Version Current

Key

Dialog definition

Dialog definition

Template script

Template script

`createSectionNav` macro

`createSectionNav` macro

Top navigation

Footer

navigation

`content-sections` area

Footer navigation

`content-sections` area

Template script final version

Files overview

Page tree

Page History

Versions Compared

Old Version 1

New Version Current

Key

Dialog definition

Dialog definition

Template script

Template script

createSectionNav macro

createSectionNav macro

Top navigation

Footer

navigation

content-sections area

Footer navigation

content-sections area

Template script final version

Files overview

`createSectionNav` macro

`createSectionNav` macro

`content-sections` area

`content-sections` area