How Page Templates Work in Eleventy

Page Templates in Agility CMS are how developers can differentiate the styles of certain types of pages, and define where on the page that editors can add Modules (functional components of the page that editors control).

Some sites may only have a single page template and this is re-used across the site, others may have other templates to allow for more flexible layouts.

Pages, Page Templates, Content Zones & Modules

Learn how pages are generated and rendered

What is in a Page Template?

When editors create pages in Agility CMS, they must select which template they'd like to use.

A Page Template consists of a Name and Content Zones.

The Name should represent what the editor can expect from using the Page Template. For example, a site may have templates named One Column Template, Two Column Template, or Blog Template.

A Content Zone is an area defined in the Page Template where an editor can add, edit, or remove modules. A Page Template can have one or many Content Zones.

Learn how to Create Page Templates

An Example

In the agilitycms-eleventy-starter site, the Name of the Page Template is used to find a corresponding Nunjuck component that matches the same name. If a match is found, that component is dynamically imported and rendered.

For example, if a Page Template has a reference name of Main Template in the CMS, then while the page is being rendered, it will look for ./src/_includes/agility-pageTemplates/main-template.njk in the ./src/_includes/agility-pageTemplates directory.

Reviewing the example page-layout.njk file from our agilitycms-eleventy-starter site, the include will automatically take care of resolving and rendering the appropriate page template.


From page-layout.njk:

<!DOCTYPE html>
<html lang="en">
    <title>{{ agilitypage.title }} | My Travel Blog</title>
    <meta charset="UTF-8"/>
	  <meta name="generator" content="Agility CMS" />
	  <meta name="description" content="{{agilitypage.seo.metaDescription}}"/>
    <meta name="keywords" content="{{agilitypage.seo.metaKeywords}}"/>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    {% if agilitypage.seo.ogImage %}
		  <meta property="og:image" content="{{agilitypage.seo.ogImage}}" />
    {% endif %}
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="/styles.css">
  <link rel="stylesheet" href=";500;600;700;900&display=swap"/>
	<script src="" defer></script>
  {% include "./common/preview-bar.njk" %}
  <div class="flex flex-col min-h-screen">
    {% include "./common/SiteHeader.njk" %}
    <main class="flex-grow">
      {% include "./agility-pageTemplates/" + agilitypage.templateFileName + ".njk" %}
    {% include "./common/SiteFooter.njk" %}

From main-template.njk:

{% set zoneName = "MainContentZone" %} {% include "../render-modules.njk" %} </div>

From render-modules.njk file will handle resolving what modules should be on the page:

{# Loop all the zones #}
{% for zone, modules in agilitypage.zones %}
	{# Only render the current zone name #}
	{% if zone === zoneName %}
		{% for module in  modules  %}
			{# Render the module based on the module reference name  -ignoring missing module files... #}
			{% include  "./agility-pageModules/" + module.module.toLowerCase() + ".njk"  ignore missing %}
		{% endfor %}
	{% endif %}
{% endfor %}

If there is no corresponding Nunjuck template for your Page Template, then nothing can be rendered for it on your Eleventy site.

How to Add a Content Zone

You can alter your content zones at any time, you'll simply have to set the Zone Name within your Page Template Nunjuck component, and utilize the render-modules.njk component to render the modules of that zone.

1 out of 1 found this helpful



Please sign in to leave a comment.