Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
...
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
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 | |
---|---|
|
...
|
...
templateScript: /one-pager-module/templates/pages/main. |
...
Define a page dialog. The dialog defines properties which are stored on the page node:
...
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.
Define a page dialog. The dialog defines properties which are stored on the page node:
...
...
Code Pro | |
---|---|
|
...
|
...
|
...
| |
|
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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
The !include
directive is one possibility to reuse configuration. If you have created the includable fragment after the creation of the file which does include it, save the latter again to force the YAML parser to properly register the dialog definition.
Also read YAML - include for further details.
Create a template script in one-pager-module/templates/pages/main.ftl
.
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
[#assign title = content.title!"Eric's Classic Cars"] <!DOCTYPE html> <html lang="en"> <head>[#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!""}"/charset="utf-8"> <meta namehttp-equiv="authorX-UA-Compatible" content="IE=edge"> <title>${title}</title> [#--bootstrap css--]<meta name="viewport" content="width=device-width, initial-scale=1"> <link<meta relname="stylesheetkeywords" hrefcontent="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/bootstrap.min.css "content.keywords!""}"/> <link<meta relname="stylesheetdescription" hrefcontent="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/bootstrap-theme.min.css ">content.description!""}"/> <meta name="author" content=""> <title>${title}</title> [#--Custombootstrap CSScss--] <link rel="stylesheet" href="${ctx.contextPath}/.resources/one-pager-module/webresources/css/onebootstrap-pager.css?z=123"> <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic"3.3.5/bootstrap.min.css "> <link rel="stylesheet" typehref="text/css"> [#--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--] <!--[if lt IE 9]${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"> <script<link srchref="httpshttp://ossfonts.maxcdngoogleapis.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>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--] <![endif]----[if lt IE 9]> [@cms.page /] </head> <body> <h1>${title}</h1> <p>${content.subTitle!"No subtitle defined"}</p> [#--jquery and bootstrap js--]<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/bootstrap-3.3.5/jqueryhttps://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <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> [@cms.page /] </head> <body> <h1>${title}</h1> <p>${content.subTitle!"No subtitle defined"}</p> [#--customjquery and bootstrap js--] <script src="${ctx.contextPath}/.resources/one-pager-module/webresources/jswebresources/onebootstrap-pager.js"></script> </body> </html> |
Note the following things:
title
and assign the page title to it using the content
rendering context object. We use the variable in the <title>
and <h1>
tags.${content.keywords!""}
and ${content.description!""}
for the respective meta tags.${ctx.contextPath}/.resources/one-pager-module/webresources/css/one-pager.css
. This file does not yet exist.Copy resource files to the folders the script references.
...
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 |
...
bootstrap-theme.min.css
bootstrap.min.css
bootstrap.min.js
jquery.easing.min.js
jquery.js
/js/one-pager.js"></script>
</body>
</html>
|
Note the following things:
title
and assign the page title to it using the content
rendering context object. We use the variable in the <title>
and <h1>
tags.${content.keywords!""}
and ${content.description!""}
for the respective meta tags.${ctx.contextPath}/.resources/
...
one-pager-module/webresources/
...
css/one-pager.css
. This file does not yet exist.Copy resource files to the folders the script references.
/
.js to one-pager-module/webresources/js/
.one-pager.css
. Remove the line background: url(imgs/intro-bg.jpg) no-repeat center center;
from the .intro-section
.One way to make a template available would be adding a new node to the list of available templates in the Site definitions app. This is the same procedure as the one followed in the Hello Magnolia tutorial:
templates/availability/templates
.one-pager
.Add a property called id
with the value one-pager-module:pages/main
to the node.
...
bootstrap-3.3.5
and copy the following files from the prototype
into the folder:bootstrap-theme.min.css
bootstrap.min.css
bootstrap.min.js
jquery.easing.min.js
jquery.js
one-pager-module/webresources/prototype/one-pager.css
to one-pager-module/webresources/css/
.one-pager-module/webresources/prototype/one-pager.js
to one-pager-module/webresources/js/
.one-pager.css
. Remove the line background: url(imgs/intro-bg.jpg) no-repeat center center;
from the .intro-section
.Now try to create a page in the Pages app with the new "One pager template" template.
...
We introduce the built-in Freemarker directive has_content
. We use the built-in to check if the user entered a subtitle. If there is no content we don't need to create the <h3>
element at all.
Replace this:
Code Block | ||||
---|---|---|---|---|
| ||||
<h1>${title}</h1>
<p>${content.subTitle!"No subtitle defined"}</p> |
element at all.
Replace this:
Code Block | ||||
---|---|---|---|---|
| ||||
<h1>${title}</h1>
<p>${content.subTitle!"No subtitle defined"}</p> |
With this:
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
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 scriptWith this:
Code Pro | ||||||
---|---|---|---|---|---|---|
|
...
|
...
|
...
| |
|
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
macroCreate 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
Call the macro at the top of the page to create a top menu.
Add the following snippet right after the opening <body>
tag.
...
...
Display a background image in the intro section. Add the following snippet inside the <head>
element in the template script:
Code Pro | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
|
/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
macroCreate 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 | |||
---|---|---|---|
|
...
|
...
|
...
|
...
| |
|
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
.
...
...
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 | |||
---|---|---|---|
|
...
|
...
|
...
|
...
| |
|
content-sections
areaThe 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
.
Call the macro again in the page footer to create a bottom menu.
Add the following snippet before the closing </body>
tag but before the <script>
elements:
Code Pro | |
---|---|
|
...
|
...
| |
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
areaThe page template defines one area – content-sections
.
Code Pro | |
---|---|
|
...
|
...
|
...
|
...
|
...
| |
|
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 | |
---|---|
|
...
|
...
|
...
|
...
|
...
You should now have the following files for the page template:
Code Block | ||
---|---|---|
| ||
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