How Page Templates Work in Nuxt.js

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-nuxtjs-starter site, the Name of the Page Template is used to find a corresponding Vue 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 MainTemplate in the CMS, then while the page is being rendered by the gatsby-source-agilitycms plugin, it will look for ./src/components/agility-pageTemplates/MainTemplate.vue in the ./src/components/agility-pageTemplates directory.

Reviewing the example AgilityPage.vue from our agilitycms-nuxtjs-starter site, the componentToRender function will automatically take care of resolving and rendering the appropriate page template.

Screen_Shot_2021-04-28_at_11.25.06_AM.png

From AgilityPage.vue:

<script>
import AgilityComponents from "./agility.components";
... export default { ... computed: { componentToRender: function() { const component = AgilityComponents.pageTemplateComponents[this.page.templateName]; return component; }, }, ... } <script>

From MainTemplate.vue

<template>
  <ContentZone
    name="MainContentZone"
    :page="page"
    :pageInSitemap="pageInSitemap"
    :dynamicPageItem="dynamicPageItem"
    :moduleData="moduleData"
  />
</template>

<script>
import ContentZone from "../../AgilityContentZone";
export default {
  props: {
    page: Object,
    moduleData: Object,
    pageInSitemap: Object,
    dynamicPageItem: Object,
  },
  components: {
    ContentZone,
  },
};
</script>

How to Add a New Page Template

When you create a new Page Template within Agility CMS, you'll want to create the corresponding Vue component for it within the .src/components/agility-pageTemplates directory.

All of the Page Templates that are being used within the site need to be imported into the agility.components.js file within the .src directory and added to the pageTemplateComponents object:

// Our Agility PageTemplates
import MainTemplate from "./components/agility-pageTemplates/MainTemplate";

export default {
  dataFetch: {
   ...
  },
  moduleComponents: {
    ...
  },
  pageTemplateComponents: {
    "Main Template": MainTemplate,
  },
};

If there is no corresponding Vue component for your Page Template, then nothing can be rendered for it on your Nuxt.js site.

How to Add a Content Zone

You can alter your content zones at any time, you'll simply have to utilize the <AgilityContentZone /> component within your Page Template Vue component. This tells the Nuxt build where to render the modules for this content zone in your code.

For example, this means that all modules in MainContentZone for a page are to be rendered here.

<ContentZone
    name="MainContentZone"
    :page="page"
    :pageInSitemap="pageInSitemap"
    :dynamicPageItem="dynamicPageItem"
    :moduleData="moduleData"
/>
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.