Skip to content

Kirby 3.9.8

Search
    Search by Algolia

    Page blueprint

    Page blueprints are located in /site/blueprints/pages and control the Panel setup and form fields for pages.

    Blueprint location

    • /site/blueprints/pages

    Default page blueprint

    To create the same set of fields for all pages, you can setup a default.yml that is used whenever no custom page blueprint is configured.

    • /site/blueprints/pages/default.yml

    Title

    The title is required and will appear in the list of selectable templates when a new page is created and multiple templates are available.

    title: Article

    Translated titles

    The title can be translated by passing an array of translations with the matching language code as key:

    title:
    en: Article
    de: Artikel

    Sorting

    The num option defines which numbering scheme to use when a page is published.

    Default sorting is numbering (1 to x) and doesn't need any setup.

    Alphabetical sorting by page uid

    num: zero

    Sorting by a custom sort number field

    You may use a field value, for example from a field called customSortNumberField, to customize the sort order:

    num: '{{ page.customSortNumberField }}'

    The return value of the query has to be an integer which will be used for sorting. Learn more about Kirby's query language.

    Chronological sorting by date field

    If your page blueprint contains a date field, you can use that date (and, optionally time) to sort your pages chronologically. For example, for a date field named created, you can apply the following:

    By date

    num: '{{ page.created.toDate("Ymd") }}'

    By datetime

    num: '{{ page.created.toDate("YmdHi") }}'

    If you use a sorting scheme other than default sorting by number, i.e. automatic sorting, manual sorting in the Panel will be disabled.

    Statuses

    With the status option, you define the page statuses you want to allow for the page. You can also change their label and description. This option gives you a lot of flexibility how you want to use page status in your website.

    The draft status of a page can not be removed or disabled – only its label and description can be changed.

    Simple example

    status:
    draft: Draft
    listed: Published

    Extended example

    status:
  draft:
    label: Draft
    text: The article is still in draft mode. It can only be seen by editors with Panel access.
  unlisted:
    label: In Review
    text: The article is online and can be visited with the direct URL. The team must still give the final go to publish it.
  listed:
    label: Published
    text: The article is online and listed in the blog

    Icon

    The icon can either be one of our own icons or an emoji. Icons appear in page lists when no preview image is available.

    icon: page

    Emoji

    icon: 📚

    Image options

    The image options for pages can now be defined directly in their own blueprint. This significantly simplifies the setup of sections as they all inherit the image settings. You can still set image settings in sections the good old way if needed.

    site/blueprints/pages/note.yml
    image:
  back: blue-200
  query: page.cover.toFile()
  icon: 📝

    This will fall back to the icon if the page has no images. If the query option is not set, the first image will be used.

    To force the icon if the page has images, set the query option to false:

    site/blueprints/pages/note.yml
    image:
  back: blue-200
  icon: 📝
  query: false

    Support for queries

    Panel preview image options now all support our powerful queries:

    site/blueprints/pages/note.yml
    image:
  back: "{{ page.myCustomBackColor }}"

    Custom colors

    back and color options for Panel preview images now support shorthands for core CSS color variables as well as HEX codes or other native CSS color properties (e.g. even gradients):

    CSS color property shorthands

    image:
  back: "purple-400"

    Check out the list of our color properties for available options.

    Hex codes

    image:
  back: "#ff0000"

    CSS rules

    image:
  back: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"

    Options

    With options, you can control all the page actions that should or should not be available for this particular page type. The option dropdown for pages will adjust accordingly.

    Option Value
    changeSlug true/false
    changeStatus true/false
    changeTemplate false or list of allowed template
    changeTitle true/false
    create true/false
    delete true/false
    duplicate true/false (since v3.2.0)
    preview true/false/template string (see below)
    read true/false
    sort true/false
    update true/false

    Each option can be set on a per user role for fine-grained permissions, for example:

    options:
  delete:
    admin: true
    editor: false

    Or using a wildcard to change the default for all roles:

    options:
  update:
    *: false
    editor: true

    Different option values per role currently don't work for the changeTemplate option (which takes a fixed list of allowed templates) or the preview option. These two options can only be controlled for all roles at once.

    Preview

    You can change the link of the preview button or disable it entirely with the option setting.

    Disabling the preview button

    For some pages it makes sense to disable the preview entirely.

    options:
  preview: false

    Custom link

    The preview option can also take any absolute link or a template string.

    Absolute URL

    options:
  preview: https://preview.mysite.com

    Template string

    You can use Kirby's powerful query syntax to create any link dynamically.

    options:
  preview: "{{ page.parent.url }}/#{{ page.slug }}"

    Change templates

    You must define a list of compatible templates with the changeTemplate option to allow editors to switch between page templates.

    options:
  changeTemplate:
    - video-post
    - link-post
    - text-post

    When an editor switches templates, all fields with the same name and type will be synced. Incompatible fields will be discarded. Be aware of this step when you define the list of compatible templates.

    The previous/next item navigation in the Panel is a very effective way for editors to move between content. With navigation option you can improve the usability of the navigation for your users with additional options to customize the links.

    Navigate between all pages

    /site/blueprints/pages/default.yml
    title: Simple Page
navigation:
  status: all
  template: all

    Limit navigation by template & status type

    /site/blueprints/pages/default.yml
    title: Simple Page
navigation:
  status:
    - draft
    - unlisted
  template:
    - album
    - default

    Adjust the sorting of the previous/next page

    /site/blueprints/pages/default.yml
    title: Simple Page
navigation:
  status: listed
  template: default
  sortBy: title asc

    Examples

    You can find examples of different types of page blueprints in the samples section.