Layouts
The foundation of your site's design.
A layout is the base of your theme.
When you create a site, there are generally pieces that are on every page, no matter what page you’re on: the <head> tag, the <body> tag, your site’s styles & scripts, maybe your site’s header and/or footer.
In Statamic, these all go in your layout.
If You Think in Headers & Footers
Some other systems have you create a header file containing your header, a footer file containing your footer, and then you somehow include them onto each page template throughout your site. Layouts works similarly in concept, but rather than needing to call for your header and footer on every page, layouts works in reverse.
You place all of that stuff that gets used on every page in one file (your layout), and then you tell Statamic where to put the content that changes page to page.
Placing Page Content
You tell Statamic where to put your page’s content with the {{ layout_content }} tag.
Statamic will replace this tag with your page’s content inside of the currently selected template.
A simplified example for your site’s default layout might look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<header>
<img src="logo.png" alt="Logo">
<h1>My Wonderful Site</h1>
</header>
{{ layout_content }}
<footer>
<h2>My name is John and this is my page.</h2>
<h3>Copyright as such</h3>
</footer>
</body>
</html>
Naming Layouts
By default, Statamic will load the default layout.
This will be the code contained in default.html within your currently chosen theme’s layouts folder.
You can name your layouts whatever you’d like, but if you choose a name other than default for your default layout, you’ll need to set that on every page (or within every folder as the default for each page within that folder).
Choosing a Layout
Per Page
To tell one page of your site to use a specific layout, you just need to set _layout in your page’s front-matter.
For example, if you’re using the default layout in most spots, but want to do something different for your 404 page, that page’s front-matter might look like this:
---
title: Page Not Found
_layout: my_404
---
Sorry, I can't find what you're looking for.
This will use the code from my_404.html within your current theme’s layouts folder.
If that file doesn’t exist, Statamic will display an error.
Per Folder
If you want to change the layout for an entire folder of your site, you can set _default_folder_layout on the page file of that folder.
Your folder’s page file might look something like this:
---
title: Upside Down Pages
_default_folder_layout: upsidedown
---
The pages within are upside-down! Craaaazy!
Note that you can then override the layout per page by setting _layout on the pages you want to change.
Common Layouts
Most sites will have one or two layouts: - your site’s design - a blank layout for displaying RSS feeds or other code-accessed data
There’s a good chance that you’ll only need one (your site’s design). Of course, you can create and use as many layouts as you’d like.