How Pages Work in Eleventy

When using Agility CMS, we believe Editors should have full control over the pages on their website and should not need to rely on a developer. The agilitycms-eleventy-starter makes it easy to source content and also generates the pages of your website based on your sitemap in Agility CMS.

Editors in the CMS can control what pages are available, what the URLs are, what page template they're using, and exactly what UI Components (Page Modules) make up each and every page.

Page Generation

The following example is based on the Blog Template instance. Don't have one? Sign up for one!

This means that when a build occurs in your Nuxt site, the following pages will be auto-generated for you:

• /
• /blog
• /blog-posts/* - your dynamic page route for all of your blog posts (i.e. /blog/my-first-post)
• /about

Page Rendering

When a Page is being generated, the final step is rendering the page to HTML. In the agilitycms-eleventy-starter, we use an index.njk file that takes care of generating pages based on your Sitemap in Agility, and uses a layout template that determines which Page Template to render, and handles your SEO properties.

Page Data

First, we must get all of the Pages in our Sitemap from Agility, and export them for Eleventy.

Sample source code for src/_data/agilitypages.js:

const {
  getSyncClient,
  agilityConfig,
} = require("../../agility/agility.config");

async function getAgilityContent() {
  const languageCode = agilityConfig.languageCode;
  const channelName = agilityConfig.channelName;
  const isPreview = agilityConfig.isPreviewMode;

  if (isPreview) {
    console.log("Agility CMS => Building site in preview mode.");
  } else {
    console.log("Agility CMS => Building site in live mode.");
  }

  const syncClient = getSyncClient({ isPreview });

  let sitemap = await syncClient.store.getSitemap({
    channelName,
    languageCode,
  });

  if (!sitemap) {
    console.warn(
      "Agility CMS => No Sitemap Found - try running a sync (npm run cms-pull)"
    );
  }

  let pages = [];
  for (const key in sitemap) {
    let node = sitemap[key];

    if (node.isFolder || node.redirect) {
      continue;
    }

    //get the page for this sitemap object
    let agilitypage = await syncClient.store.getPage({
      pageID: node.pageID,
      languageCode,
      contentLinkDepth: 3,
    });

    //the first page in the sitemap is always the home page
    if (pages.length === 0) {
      node.path = "/";
    }

    agilitypage.sitemapNode = node;

    //resolve the page template
    if (agilitypage.templateName !== undefined && agilitypage.templateName) {
      agilitypage.templateFileName = `${agilitypage.templateName
        .replace(/ /gi, "-")
        .toLowerCase()}`;
    }

    //if this is a dynamic page item, get the content for it
    agilitypage.dynamicPageItem = null;
    if (node.contentID !== undefined && node.contentID > 0) {
      const dynamicPageItem = await syncClient.store.getContentItem({
        contentID: node.contentID,
        languageCode,
        contentLinkDepth: 2,
      });

      if (dynamicPageItem) {
        agilitypage.title = dynamicPageItem.fields.title;
        if (dynamicPageItem.seo) {
          agilitypage.seo.metaDescription = dynamicPageItem.seo.metaDescription;
          agilitypage.seo.metaKeywords = dynamicPageItem.seo.metaDescription;
        }

        if (dynamicPageItem.properties.definitionName === "Post") {
          // dynamic page item category
          dynamicPageItem.category =
            dynamicPageItem.fields?.category?.fields.title || "Uncategorized";

          // dynamic page item formatted date
          dynamicPageItem.date = new Date(
            dynamicPageItem.fields.date
          ).toLocaleDateString();

          // if we have an image field, use it as seo og:image
          if (dynamicPageItem.fields.image) {
            agilitypage.seo.ogImage = `${dynamicPageItem.fields.image.url}?w=1024`;
          }
        }

        agilitypage.dynamicPageItem = dynamicPageItem;
      }
    }

    pages.push(agilitypage);
  }

  return pages;
}

// export for 11ty
module.exports = getAgilityContent;

Configure Our Index Template

Then we must configure our Index template to tell Eleventy of our Page Data, and what layout we want to use to render our pages.

Sample source code for src/index.njk:

---
pagination:
    data: agilitypages
    size: 1
    alias: agilitypage
	addAllPagesToCollections: true
permalink: "{{ agilitypage.sitemapNode.path }}/"
layout: page-layout.njk
---