User Guide / Pages


Pages can use an optional YAML frontmatter block to configure the behaviour of the page and to provide custom data, if required.

Frontmatter blocks are defined at the top of a page and consists of a valid block of YAML sandwiched between triple-dashes:

title: YAML Frontmatter Example
label: Frontmatter

Page content here.

Available options

The following frontmatter options are available for each page:

id String

A custom page ID that can be used for linking to it from other pages

label String

The name of the page that will be displayed in the navigation (auto-generated from the file name if not set)

title String

The main page title displayed on the page (defaults to the label value if not set).

hidden Boolean

If false the page will not appear in the navigation but will still be accessible at its URL (useful for pages that are still in development)

landing Boolean

Set to true to use the page as the Lookbook landing page (default: false)

header Boolean

Set to false to hide the page header containing the page title (default: true)

footer Boolean

Set to false to hide the page footer containing the previous/next page links (default: true)

data Hash

Optional hash of custom data to make available for use in the page - see info on page variables & data.

Default values

You can set global default values for page options in the application configuration:

# config/application.rb
config.lookbook.page_options = {
  footer: false,
  data: {
    brand_colors: {
      red: '#ff0000'

These will be merged with any page-level frontmatter data. Options set in the frontmatter will override those set at the global level (apart from data, which will be deep-merged with the any globally defined data).

User Guide

Extending Lookbook