Pages

Pages

Declare each Page's title, description, tagline, and layout with front matter properties.

Overview

A Page is a Markdown document with MDC components. Its front matter, the YAML block at the top of the document, declares the metadata the Portal uses to render the Page: its SEO metadata, its layout, and its built-in page header, when supported by the layout.

---
title: "Getting started"
description: "Everything you need to make your first request."
tagline: "Quickstart"
layout: "guide"
---

Required properties

Every Page declares title and description. Both are used as the Page's SEO metadata.

  • title is the Page's title. Layouts with a built-in page header render it as the Page's h1.
  • description is a short summary of the Page. Layouts with a built-in page header render it below the title.

Optional properties

PropertyDescription
layoutSelects one of the built-in layouts. When omitted, the Page renders with the custom layout.
taglineA short label rendered above the title. Only layouts with a built-in page header render it. Omit it and no label renders.
layout-optionsReplaces the layout's sidebars and page header with Snippets, or hides a region by setting it to false. See Layout Options.
imageOverrides the og:image used when the Page is shared. Accepts a URL string, or an object with url, alt, and optional width and height. When omitted, the Portal generates an og image from the Page's title and description.
---
image:
  url: https://example.com/images/my-page.png
  alt: A diagram of the request flow
  width: 600
  height: 400
---

The custom layout has no built-in page header. A Page that uses custom renders no title or description from front matter, so declare a title heading or a ::page-hero block in the body.

Accessing front matter in the body

Every front matter property is available in the Page's body through $doc data binding, including custom properties you define. See Binding data in markdown.

---
title: "Title of the page"
---
The title of this page is "{{ $doc.title }}"