Layout
We've tried to make our layout files stupendously easy. Since Evance auto-loads so many aspects of a page by itself you generally only need to worry where to place key aspects of the layout.
Here's an example of a very basic layout file layouts/index.evml:
<!DOCTYPE html>
<html>
<head>
<!-- output the meta title or page title -->
<title>{{ layout.title }}</title>
<!-- Evance does not automatically add responsive viewport tags -->
<meta name="viewport" content="initial-scale=1.0">
<!-- Import standard CSS, JavaScript, Google Fonts, social and meta tags -->
{{ layout.header }}
</head>
<body>
<!-- load the body of the page -->
{{ layout.body }}
<!-- load JavaScript files just before the closing body tag -->
{{ layout.footer }}
</body>
</html>
Where to put your layout files
Your layout files should be placed within the ~/theme/layouts directory.
The filename for your default layout file should be index.evml. All templates within your
website will automatically use the default layout file, unless set otherwise in your templates.json file.
Available Properties
All layout files support the following properties. In fact you should consider all of the following properties as required and should all appear within your layout.
| Properties |
|---|
body
String
Contains the body content generated by the current template. |
footer
String
Contains JavaScript file includes rendered at the foot of the page to speed up body rendering and aid with DOM readiness on JavaScipt load. |
header
String
Contains all header information, which includes meta tags, auto loaded CSS and JavaScript files, canonical tags, social media cards, language alternative references etc. Evance automates many requirements so that you don't need to worry about them. |
title
String
Contains theMeta Title or failing that, the Page Title for the current page as a String.
Utilising layout.title avoids confusion as to whetherto use the page.title or page.metaTitle because
Evance takes care of it for you.
|