Pages

The page content type is designed to work as a template for a page on your website. You can create a new page content type for each different page layout that you require e.g. General Page, Blog Landing Page, Blog Post Page etc.

General Page Settings

All Pages have a Name and Handle Field. The Handle is auto generated from the name in snake_case and can be edited before the first save. After the blocks initial save - when you click Create, the handle is not editable.

The URI is the routing structure for the page and accepts dynamic {slug} and {id} parameters. This is everything after your base domain, for example if your website domain is https://www.example-site.com the URI for your blog could be blog/{slug} which would mean the final URL would become https://www.example-site.com/blog/{slug}

Once you have created your page, you will be able to add fields of your choice from the Fields list.

The editor will be shown the fields that are created in the page content model. The page comes automatically with a title field which is used as the name. The slug auto generates in kebab-case from the title field.

The content field is an example of where your editor could then choose from a range of blocks allowed in the general_page content model for them to build out the rest of the page layout. Check out our BlockMatcher function that can be used to help you create a list of flexible block options for your editor to choose from.

Code Examples

JSON

This is an example of the JSON object for a Page.

{
  id: 'c_01hwdG5pdy0nDPa61DcDxY7X5n',
  published_at: '2024-04-26T14:19:34+00:00',
  slug: 'home',
  name: 'Home',
  uri: 'home',
  url: 'http://www.example-site.com/home',
  created_at: '2024-04-26T15:25:22+00:00',
  updated_at: '2024-04-26T15:25:22+00:00',
  author: {
    id: 'u_01hv8wF8as1HnV6nBDhwe13HDx',
    name: 'Hollie Duncan',
    email: '[email protected]',
    profile_photo_url: 'https://ui-avatars.com/api/?name=H+D&bold=true&size=256&color=008673&background=00D6B5&font-size=0.4&format=svg'
  },
  content_type: {
    id: 'ct_01HwDG4hmXEm7Vtn0PyTf043PC',
    name: 'General Page',
    handle: 'general_page',
    object_type: 'page'
  },
  seo: {...}
  },
  fields: {...}
}

TypeScript

This is an example of how you can request specific page data from the API and use it in a page layout component such as <Home />.

export default async function page() {
  const content = await createClient(draftMode().isEnabled)
    .getContentBySlug('home', 'general_page')
    .catch(() => {
      notFound()
    })

  return <Home initialContent={content} />
}