Create pages

A page is a unique HTML file that serves as a standalone representation of a particular content or view in your Ontario.ca Frontend project.

Pages are organized in the src directory, and they play a crucial role in defining your application's routes. Ontario.ca Frontend uses the folder and file structure to determine the URL structure. For example, if your file is located at src/my-new-page.njk, the corresponding URL would be ontario.ca/my-application/my-new-page.

Adding a new page

Ontario.ca Frontend pages are created using the Nunjucks templating language. You can create a new page by adding a new Nunjucks template file (my-new-page.njk) inside the src directory:

src/my-new-page.njk

---title: My New Pagelayout: base.njk---<!-- Your page content goes here --><h1>Welcome to My New Page!</h1>

Here, we have defined a simple Nunjucks template with a front matter block specifying the page’s layout and title. The title attribute in the front matter defines the title of your page and the layout attribute specifies the base layout to be used for this page.

Creating a layout template

Layout templates allow you to define a consistent, reusable structure for your application’s pages. Layout templates are stored in the _includes folder inside your project’s src directory (src/_includes). You can create a new layout template by adding a new file (e.g. base.njk) to the folder.

src/_includes/app/base.njk

<div class="ontario-row maincontent__container">  <div class="ontario-column ontario-small-12">    <!-- Page content will be inserted here -->    {{ content | safe }}  </div></div>

The {{ content | safe }} placeholder will be dynamically replaced by the markup of any page that uses your layout template.

Once you have created a layout template, you can refer to it in any page you create in the src directory:

src/my-new-page.njk

---title: My New Pagelayout: base.njk---<!-- Your page content goes here --><h1>Welcome to My New Page!</h1>

The layout: base.njk line in the front matter of your page specifies that it should use the base.njk layout template.

Nesting layout templates

You can use Nunjucks’ include blocks to nest layout templates inside larger ones. This can be useful when you need to share smaller UI elements across several layout templates. For example, if your application UI includes a sidebar that appears on multiple different pages, you might add a sidebar.njk layout template to your _includes folder, then pull it into a base.njk layout template:

src/_includes/app/base.njk

<div class="ontario-row maincontent__container">  <div class="ontario-column ontario-small-12">    {% include "./sidebar.njk" %}    {{ content | safe }}  </div></div>