Page templates
The default, archive and posts templates, hero types and custom page templates.
On this page
A page template defines the content fields shown in Admin and the component that renders them. The pageTemplate field stores its name. Systhema hides the selector when default is the only choice.
The default templateLink to this section
The default template stores its data under page.default:
| Field | Behavior |
|---|---|
articleTheme | Article color-system selection, controlled by articleColorSetting. Without that option the value is inherit. |
hero | Combined hero fields, selected by heroType. |
content | Root-tier Lexical editor with Component insertion enabled. |
DefaultPage renders <main id="main-content">, then an Article containing the hero and converted content. The page's shared SEO tab remains separate from the template fields.
Hero typesLink to this section
Simple places a title, optional label and description above optional media. With Background places that copy over one image-or-video upload, with an overlay toggle. Feature places media beside the copy. None omits the template hero.
Simple and Feature support image, uploaded video, YouTube and configured Google Maps media. Description uses a slot editor. Standalone Hero blocks use the same field names and renderer; set the template hero to None if a standalone hero supplies the page's <h1>.
The archive templateLink to this section
Enabling the Posts module adds the archive page template. Its Hero, Prepend, Posts and Append tabs store data at the page root rather than inside page.archive. It resolves listing data on the server and passes it to both the server template and client preview. See Archive pages.
Post templates belong to the Posts collection and customPostTemplates; they are not additional choices in a Page's selector.
Custom page templatesLink to this section
Add a SysthemaPayloadPageTemplate through customPageTemplates. Templates merge by name; a custom entry with an existing name replaces that entry. pages.default can supply a replacement default template.
import type { SysthemaPayloadPageTemplate } from '@systhemaui/payload'
function Landing({ pageData }: { pageData: { landing?: { introduction?: string } } }) {
return <main id="main-content"><p>{pageData.landing?.introduction}</p></main>
}
export const landingTemplate: SysthemaPayloadPageTemplate = {
name: 'landing',
label: 'Landing',
component: Landing,
fields: [{ name: 'introduction', type: 'textarea' }],
}Pass customPageTemplates: [landingTemplate] in the second argument to withSysthema. The ordinary fields array becomes a group named after the template, so this example reads pageData.landing.introduction.
Tabs and sidebar fieldsLink to this section
Use editorTabs for separate top-level tabs. These fields keep their names at the document root; there is no template-name group. sidebarFields also store root-level data and show only when that template is selected. Sidebar entries must be named fields, rather than rows, tabs or collapsibles. Prefix root-level names to avoid collisions with built-in hero, listing, prepend and append fields.
Data and client previewLink to this section
resolveData receives payload, pageData, draft and optional locale on the server. Return serializable auxiliary data for the renderer. A clientView receives live form state as data and that result as aux. A template without clientView falls back to server preview. See Page and post templates for the full prop contract.
Adding or changing persisted fields requires regenerated Payload types and your project's schema migration process.