Pages

A single template will create a single page. However, sometimes you want a template to generate multiple pages. To do that, you return an array of page items in your template data using pages.

For example, you might want to create a page for each product that is retrieved from a separate API call.

// Fetch your data from somewhere.
// It might be an external service or a local file.
const products = await fetch("example/api/products")

export default {
  // Declare a layout for your product pages
  layout: "/_/layout/product",

  // Map products to separate pages, with a unique URL
  pages: products.map(function (product) {
    return {
      url: `/products/${product.slug}`,
      ...product,
    }
  }),
}

A template with pages data only creates a file for each item in the pages array. It won’t create a file for the template itself.

Page data

Each item in the pages array inherits data from the template. In the example above, all the product pages will use the same layout. If the same properties exist on the template and the page, the page data will take precedence.

The pages property is not inherited from the template.

Special properties

slug

The url of a page can be set directly, but it can also be generated using the slug property. When using slug, the url of the parent template is used, and the slug is appended to the end.

For example, the following template would generate a page at posts/example-slug/index.html.

export default {
  pages: [{
    slug: "example-slug"
  }]
}

If both slug and url are undefined, Night Owl will generate a slug for each page item. When the page has title data, the slug will reformat the title to be URL-friendly. Otherwise, the index of page in the pages array is used as the slug.