These are the variables that we use most often in this project. See the full list of available variables on the Hugo website.

Global variables

The following can be used on any page on the website.

The name of the banner image to be placed at the top of the page, above the content. Use the name of one of the images in /assets/img/banners/full_width/, and don’t include the .jpg file extension.

Example:

banner: "360-portage-winter-lights"

cascade

A list of front matter values which are passed down to all of the page’s descendants. This will usually be added to the index files at the root of the main sections of the site, to pass front matter variable values to all of the other pages within the same section. Descendant pages can overwrite inherited cascading variables within their own front matter.

Example:

cascade:
    subnav: accounts-and-services

description

A short description of the page contents. This is used in meta tags and will show up in search engine results.

Example:

description: "A short description of the page content."

draft

If set to true, the page will not be published to the live site. Use this on pages which are a work in progress.

Example:

draft: true

expiryDate

The datetime at which the content should no longer be published by Hugo. Use this for temporary content which needs to be taken down at a specific date and time. Use the format YYYY-MM-DD.

Example:

expiryDate: 2020-01-31

A list of HTML snippets to be added before the closing </body> tag. Often used to add custom JavaScript to the page.

Example:

foot:
- >
    <script>
        (function ($) {
            'use strict';
            $(document).ready(function () {
                // Field Masking
                $("#postal_code").mask("a9a 9a9");
                $("#telephone").mask("999-999-9999");

                // Form Validation
                $("#accessibility_request").validate({
                    rules: {
                        contact_name: { required: true },
                        telephone: { require_from_group: [1, ".contact-group"] }
                    },
                    messages: {
                        contact_name: "Please enter a contact name.",
                        telephone: "Please enter a daytime phone number."

                    },
                    errorPlacement: function ($error, $element) {
                        $element.parents('.form-group, fieldset').first().append($error);
                    }
                });
            });
        })(jQuery);
    </script>

A list of HTML snippets to be added inside the <head> tag. Often used to add custom styles to the page.

Example:

head:
- >
    <style>
        #outage-table th {
            cursor: pointer;
            padding-right: 20px;
            overflow: hidden;
        }
    </style>

images

A list of URLs for images which are related to the page. The images will be shown in links when the page is shared on social media.

Example:

images:
- "/assets/img/banners/full_width/mybill-hero-banner_2x.jpg"

layout

The name of the special layout template that Hugo should use when building the page. The options to choose from are:

  • form
  • form-thank-you
  • landing-page
  • project

Example:

layout: landing-page

linkTitle

The text to use in breadcrumb links, in place of the regular title. Use this when the regular title is too long.

Example:

linkTitle: "A short title"

The name of the navigation menu that the page belongs to. We have two menus on the site: main and footer. The main menu is used to populate the links in the header navigation, the sidebar navigation, the breadcrumbs, and tertiary links. You can also include additional properties such as parent, weight, identifier, or params.

Example:

menu:
    main:
        parent: Accounts & services
        weight: 150

To include a link in the header navigation menu, add topnav: true to the params property:

menu:
    main:
        weight: 10
        params:
            topnav: true

private

If set to true, the page will not be displayed in site maps or search engine results.

Example:

private: true

publishDate

Set this to the date on which the page is published. Use the format YYYY-MM-DD. If set to a future date, the page will not be published to the live site before that date.

Example:

publishDate: 2020-01-31

qualtricsSnippet

Set this to true to include the Qualtrics JavaScript snippet on the page, which inserts embedded intercept widgets.

Example:

qualtricsSnippet: true

scripts

A list of scripts to add to the page. Each item in the list should either be the name of a file in the /assets/js/ folder or the full URL for an external JavaScript file.

Each item in the list can also be an object with either async or defer set to true. Set the file name as the src.

Local JavaScript files will be minified before being added to the page.

Example:

scripts:
- structure-move-route-map.js
- src: "https://maps.googleapis.com/maps/api/js?v=3&key=…"
  async: true

stylesheets

A list of style sheets to add to the page. Each item in the list should either be the name of a file in the /assets/sass/ folder or the full URL for an external CSS file.

Local SCSS files will be converted to CSS and minified before being added to the page.

Example:

stylesheets:
- forms.scss

This variable is deprecated and only used in special cases. Use menu instead.

The name of the navigation menu which will be placed in the sidebar. It should only include lowercase letters and dashes. The options to choose from are:

  • articles-archive
  • articles

Example:

subnav: articles

The template files for the navigation menus themselves can be found in layouts/partials/subnav/.

title

The title of the page. This is used in the <title> tag, in metatags and in breadcrumbs.

Example:

title: "Manitoba Hydro Electric Energy and Natural Gas"

type

The type of the content. This value will be automatically derived from the directory (i.e., the section) if not specified in front matter. The content type options to choose from are:

  • page
  • error
  • news

Example:

type: page

url

The full path to the content from the web root. Use this to override the default URL at which the page can be found. Don’t include the language prefix in the URL.

Example:

url: "error/400.html"

Article variables

The following variables are only used for article pages.

categories

A list of categories that the content belongs to. Choose from the list of existing categories.

Example:

categories:
- News releases

coverImage

An image which will be displayed in the article header and used as the article thumbnail.

The value is an object of metadata for the image. It’s required to include src and alt, and you can also add other optional data, such as caption, anchor and size.

Example:

coverImage:
    src: /assets/img/figurebox/2022-flood-summer-update-1.jpg
    alt: Flooded boathouse sits on the shore of the Winnipeg River.
    caption: High water on the Winnipeg River this summer damaged docks and boathouses.
    anchor: center
    size: large

The options for size are large or normal. The large size should only be used for long-form articles (over 1000 words). Read more about writing articles.

A list of names of featured areas where the article should be displayed. The only option for now is home.

Example:

featured:
- home

A list of related articles to be displayed at the bottom of the article content.

If the front matter does not contain at least two related articles, the remaining slots will be filled using Hugo’s related content feature.

Examples:

Use permalinks as the value:

related:
- /articles/2023/04/bringing_manitobans_together_under_the_northern_lights/

Related articles can also be turned off on a per-article basis by setting this variable to none:

related: none

subtitle

The subtitle to display under the page’s main heading. This should be one short sentence and does not need to end with punctuation.

Example:

subtitle: Manitoba Hydro crews redeploy to repair extensive storm damage

showOutdatedWarning

Whether to display a warning to users about outdated content. This warning is displayed for all articles which are more than one year old. Set this to false to remove the warning.

Example:

showOutdatedWarning: false

summary

A short introductory text which is used in article teasers. Should be no longer than 60 words.

Example:

summary: "Manitoba Hydro released its annual report today showing a total consolidated net income of $99 million for the fiscal year ended March 31, 2020, $22 million below the budgeted net income of $121 million, and also down $22 million from the previous year’s net income."

tags

A list of tags to apply to the content. These are not displayed to users, but are used to organize content.

Example:

tags:
- Featured