Skip to content

Commit

Permalink
More changes from SME review
Browse files Browse the repository at this point in the history
  • Loading branch information
m-green committed Aug 17, 2020
1 parent 250ad57 commit e7234eb
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions source/use-nunjucks/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,39 @@ You can also change the HTML that's generated by passing options into the Nunjuc

If you use Nunjucks, your project will be easier to update when a new version of GOV.UK Frontend is released.

To use Nunjucks:

- you must [install GOV.UK Frontend with Node.js package manager (npm)](/installing-with-npm/)
- your application and any frameworks that support it must use Node.js
To use Nunjucks, your application and any frameworks that support it must use Node.js.

You do not need to follow this guidance to [use Nunjucks macros in the GOV.UK Prototype Kit](https://design-system.service.gov.uk/get-started/prototyping/#using-nunjucks-macros).

## Set up Nunjucks and use the page template
## Before you start

How you set up Nunjucks will depend on your environment. You can do the following to set up Nunjucks if you're using [Express](https://expressjs.com/).
You must first:

1. Make sure Nunjucks is installed. For example, you can install Nunjucks while you're [installing GOV.UK Frontend with npm](/installing-with-npm).
- [install GOV.UK Frontend with Node.js package manager (npm)](/installing-with-npm/)
- make sure Nunjucks is installed and working in your environment

2. Import the Nunjucks package, for example at the top of your main application file:
## Set up Nunjucks and use the page template

```javascript
const nunjucks = require('nunjucks')
```
1. Add `node_modules/govuk-frontend/` to your list of Nunjucks paths, so Nunjucks knows where to find the GOV.UK Frontend template and components.

3. Tell Nunjucks where to find the GOV.UK Frontend template and components, by adding the following to your main application file:
For example:

```javascript
nunjucks.configure([
"node_modules/govuk-frontend/"
])
nunjucks.configure([
"node_modules/govuk-frontend/",
"YOUR-VIEWS-FOLDER"
])
```

4. Use the GOV.UK Frontend template by adding the following at the top of your view file:
2. Use the GOV.UK Frontend template by adding the following at the top of your view file:

```javascript
{% extends "govuk/template.njk" %}
```

5. Go to the [default page template example](https://design-system.service.gov.uk/styles/page-template/#default) on the GOV.UK Design System website, then copy the Nunjucks code into your view file.
3. Go to the [default page template example](https://design-system.service.gov.uk/styles/page-template/#default) on the GOV.UK Design System website, then copy the Nunjucks code into your view file.

You may need to change the paths in the Nunjucks code to [get the CSS, assets and JavaScript working](/importing-css-assets-and-javascript).

Find out how to [change how the page template works](https://design-system.service.gov.uk/styles/page-template/#changing-template-content).

Expand Down

0 comments on commit e7234eb

Please sign in to comment.