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

Contains the body content generated by the current template.

footer

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

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

Type: 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.