"Introduction to Content Architecture", the eBook for designing effective and scalable digital experiences. Download
In this tutorial, we'll go through how to use Pages in Agility CMS to empower your editors to control their own pages and exactly what content is on them.
We'll go through how to create a Page, add a Page Module to it, then show you how to access your pages and their modules using the Content Fetch API.
Pages are a built-in structured content items that allow editors to manage their name, URL, SEO properties, and what frontend components (Page Modules) will be displayed on the page.
Login to Agility CMS and navigate to the Pages (area). Click the Add a Page button on the dashboard.
Select a Page Template to use and give the page a Title. The Page Path (URL) of the page will automatically be generated based off the Title field. You can always change the Title afterwards - without changing the Page Path.
If you do not have any Page Templates defined, you'll need to create one first. A Page Template dictates what Content Zones can be on the page.
Now that you've created a page, we need to add some content to it that can be later retrieved with the API.
If a Page has no page modules, it has all the metadata we need for the page, but won't have any actual content.
All Agility instances come with the built-in Rich Text Area page module, but feel free to add any other Page Module you may already have defined.
Click the + button on the Content Zone or click the Add One Now button.
Once you've selected a Page Module, you'll be presented with its fields to fill out. This is the content that editors will enter that will determine what content is presented on your frontend.
Enter the content and then click Save. Click the Back < arrow to return to your page view.
Now that you have a page with a page module, you can now query the Page via the Content Fetch API to retrieve the metadata of the Page as well as the details of each Page Module has been added to it.
To retrieve the details of our page, we'll need to collect some information we'll need to authenticate and request this content.
curl -X GET "https://api.aglty.io/8fdc8afa-u/preview/en-us/page/3?contentLinkDepth=2" -H "accept: application/json" -H "APIKey: defaultpreview.36d9c831f95d7604d2a1bab3f0603a52705b2823a4a14841eddb639133a444a1"
{
"pageID": 3,
"name": "about-me",
"path": null,
"title": "About Me",
"menuText": "About Me",
"pageType": "static",
"templateName": "One Column Template",
"redirectUrl": "",
"securePage": false,
"excludeFromOutputCache": false,
"visible": {
"menu": true,
"sitemap": true
},
"seo": {
"metaDescription": "",
"metaKeywords": "",
"metaHTML": "",
"menuVisible": null,
"sitemapVisible": null
},
"scripts": {
"excludedFromGlobal": false,
"top": null,
"bottom": null
},
"properties": {
"state": 1,
"modified": "2021-09-20T15:20:56.493",
"versionID": 6
},
"zones": {
"MainContentZone": [
{
"module": "RichTextArea",
"item": {
"contentID": 10,
"properties": {
"state": 1,
"modified": "2021-09-20T15:23:16.143",
"versionID": 26,
"referenceName": "aboutme_richtextarea",
"definitionName": "RichTextArea",
"itemOrder": 0
},
"fields": {
"textblob": "<p>Hello World 🌎</p>"
}
}
}
]
}
}
As you can see from the response of the page object, we have all the info we need about the page as well as an dictionary of Page Modules (and their fields) ordered by what Content Zone (zone) they should be rendered in.
As you've learned, you can query a page by its ID, but how would you access a listing of all pages in the CMS? You'll need to access a list of pages in order to implement proper page routing and more.
To retrieve the sitemap of our pages, we'll need to collect some information we'll need to authenticate and request this content.
curl -X GET "https://api.aglty.io/8fdc8afa-u/preview/en-us/sitemap/flat/website" -H "accept: application/json" -H "APIKey: defaultpreview.36d9c831f95d7604d2a1bab3f0603a52705b2823a4a14841eddb639133a444a1"
{{
"/home": {
"title": "Home",
"name": "home",
"pageID": 2,
"menuText": "Home",
"visible": {
"menu": true,
"sitemap": true
},
"path": "/home",
"redirect": null,
"isFolder": false
},
"/about-me": {
"title": "About Me",
"name": "about-me",
"pageID": 3,
"menuText": "About Me",
"visible": {
"menu": true,
"sitemap": true
},
"path": "/about-me",
"redirect": null,
"isFolder": false
}
}
The response from this API call is a dictionary of all page routes defined in Agility for the sitemap you requested. This format is especially useful for page routing or generating a sitemap.xml file.
Agility recommends using our supported framework SDKs, starters, and examples to help you implement page routing.
Now that you know the basics how to retrieve a sitemap and lookup the details of a page, you can now implement logic in your website to do the following:
<head>
content using the Title and SEO fields.