Learn

How Pages are Built

Statamic combines layouts, templates, and content to create your pages.

Statamic uses a combination of layouts, templates, and tags to build your pages. The important first step is understand what each is and what they do.

Layouts

A layout is the outer-most shell of your website. It should contain all of the parts that aren’t the main content rendering area. Within a layout, you must place one (and only one) {{ layout_content }} tag. Statamic will replace this tag with the correct template for whichever page it is that you’re viewing.

For most sites that you build, you’ll probably only have one layout: the default layout. In this, you’ll probably put your <html>, <head>, and <body> tags, along with other elements that won’t change page-to-page (such as your site’s navigation and footer).

Templates

A template is the inner shell of your website. Each time you need the main content area of your page to be structured differently, you’ll use a new template for each.

Within each template, you must place one (and only one) {{ content }} tag. Statamic will replace this tag with the content data from the content file that matches up with the current URL being viewed.

Whereas layouts don’t really change that much from page-to-page, templates are where you can get creative. All templates can use and display global variables, page-level variables, partials, tags, and other static content that you write right into the template itself.

An Example

Let’s look at an example using everything you’ve learned up to this point. For this example, your user navigates to your team page, located at http://example.com/about/team.

The content defining your team page lives on your server at _content/about/team.md. This file looks something like this:

---
title: About Us
_template: about
---
## John Appleseed, President
John enjoys scotch and praising employees.

This file defines the _template to use, the title of the page, and everything below the second --- becomes the content.

Putting the Page Together

Seeing that we didn’t specify which layout to use in our file’s YAML front matter, Statamic will use the default layout (the one called default). Since we specified which template to use to build this page in our front matter, Statamic will use the value of _template as the template (in this case, the about template).

The page is constructed a bit like an onion: layer-by-layer. As described above, the layout is the outer shell, with the template inside of it, and your page’s content inside of that.

This system’s greatest strength is its flexibility. You can completely alter the way a page looks with a simple switch of the _template variable in your page.

This article was last updated on September 13th, 2016. Find an error? Please let us know!