Layouts

The plugin offers a number of layouts to match the type of content you want write.

• Page – Simple layout designed for maximum flexibility of content.

• Page with sub navigation – Layout with sub navigation.

• Post – Layout for date-based content, such as blog posts or news items.

• Collection – Layout for a paginated list of pages.

• Product page – Layout for a product or marketing page based on the Product Page Example.

Overriding layouts

Layouts are registered with Eleventy by setting the dir.layouts key to point to the layout files installed in the package directory:

const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(govukEleventyPlugin)

  return {
    dataTemplateEngine: 'njk',
    htmlTemplateEngine: 'njk',
    markdownTemplateEngine: 'njk',
    dir: {
      layouts: 'node_modules/@x-govuk/govuk-eleventy-plugin/layouts'
    }
  }
};

If you want to use your own layouts, remove this value and set a value for dir.includes (and optionally dir.layouts).

You can use layouts provided by this plugin as a basis for your own. For example, to show a notification banner at the top of a page, extend the page layout:

{# Plugin layouts can be loaded from "layouts" #}
{% extends "layouts/page.njk" %}

{# Load any GOV.UK Frontend components #}
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{% block content %}
  {# Templates can include front matter data #}
  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".  
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}

  {{ appDocumentHeader({
    title: title,
    description: description
  }) }}

  {{ appProseScope(content) if content }}
{% endblock %}