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: ArticleTranslated titles
The title can be translated by passing an array of translations with the matching language code as key:
title:
en: Article
de: ArtikelSorting
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: zeroSorting 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: PublishedExtended 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 blogIcon
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: pageEmoji
icon: 📚Image options
Since 3.6.0
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.
image:
back: blue-200
icon: 📝Support for queries
Panel preview image options now all support our powerful queries:
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 |
delete |
true/false |
duplicate |
true/false (since v3.2.0) |
preview |
true/false/template string (see below) |
read |
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: falseOr using a wildcard to change the default for all roles:
options:
update:
*: false
editor: truePreview
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: falseCustom link
The preview option can also take any absolute link or a template string.
Absolute URL
options:
preview: https://preview.mysite.comTemplate 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-postWhen 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.
Navigation option
Since 3.6.0
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
title: Simple Page
navigation:
status: all
template: allLimit navigation by template & status type
title: Simple Page
navigation:
status:
- draft
- unlisted
template:
- album
- defaultAdjust the sorting of the previous/next page
title: Simple Page
navigation:
status: listed
template: default
sortBy: title ascExamples
You can find examples of different types of page blueprints in the samples section.