Page Editing – Stackbit Docs

Pages are a type of model that represent a single URL path in your site.

When the proper configuration, Stackbit can build a complete sitemap and show the proper content fields as editors navigate between pages in the application. This requires specifying which models represent pages and how each page maps to a URL path in the site.

Specifying Page Models#

Open the stackbit.config.ts file and add a modelExtensions property to declare the page model as a page model.

1
2
3
4
5
6
7
8
9
10
+
12

import { ContentfulContentSource } from '@stackbit/cms-contentful'
import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new ContentfulContentSource({
      // ...
    }),
  ],
  modelExtensions: [{ name: 'page', type: 'page', urlPath: '/{slug}' }],
})

This tells Stackbit to extend its knowledge about the Contentful model with an ID of page — to declare it with a page type, and to map its URLs paths using the slug field within the page model.

Sitemap Navigator#

Going back to the Stackbit editor, you should now see the sitemap populated with the home page entry, which was added to the CMS when importing content.

Contextual Page Editor#

This change also enabled the contextual page editor (pencil icon in left sidebar). Notice that you can open this panel and see the fields and values for this page.

As with basic content editing, making changes here will update content in Contentful in an changed (unpublished) state.