How Pages Templates work in Next.js

Follow

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

Depending on your scenario, some sites may only use a single page template and re-use it across the site, while other sites may have multiple templates to allow for more flexible layouts.

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-next-starter site, the Name of the Page Template is used to find the corresponding react component that matches the same name. If a match is found, that component will by dynamically imported and rendered for you.

For example, if a Page Template has the name of Main Template in the CMS, while the page is being rendered, it will look for ./components/agility-pageTemplates/MainTemplate.js inside of the ./components/agility-pageTemplates directory.

Taking a look at the Layout.js file from our agilitycms-next-starter site, the <AgilityPageTemplate /> component will automatically take care of resolving and rendering the appropriate Page Template 

Screen_Shot_2020-09-28_at_9.44.06_AM.png

From ./components/agility-global/Layout.js:

const AgilityPageTemplate = dynamic(() =>
    import("components/agility-pageTemplates/" + props.pageTemplateName)
  );

From ./components/agility-pageTemplates/mainTemplate.js:

import React, { Component } from 'react';
import ContentZone from 'components/agility-global/ContentZone'

class OneColumnTemplate extends Component {
    render() {
        return (
        <div className="one-column-template">
            <ContentZone name='MainContentZone' {...this.props} />
        </div>
        );
    }
}

export default OneColumnTemplate;

How to Add a New Page Template

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

If there is no corresponding React component for your Page Template, then nothing can be rendered for it in your Next.js site.

How to Add a Content Zone

You can alter your content zones at any time, simply import ContentZone from 'components/agility-global/ContentZone', then utilize <ContentZone /> within your Page Template React component. The <ContentZone /> component will tell your Next.js site where to render the modules for this Content Zone within your code.

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

<ContentZone name="MainContentZone" {...props} />
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.