This app includes support for including components using a custom nunjucks tag. This method allows components to be available in all layouts, views, includes and macros and allows each component to be a separating entity which makes maintaining and testing them easier.
To include a component with its default state or one that expects no data:
{% component 'person' %}
To include a component and pass data to it:
{% component 'person', {
name: 'Barry',
age: '55'
} %}
Component can take multiple arguments. It will combine them in single object:
res.render('some-page', {
personData: {
name: 'Barry',
age: 55,
},
})
{% component 'person', personData, gender='male' %}
Is the same as:
{% component 'person', {
name: 'Barry',
age: '55',
gender: 'male'
} %}
Templates use Nunjuck's template inheritance. There are several top level blocks which are used for injecting content during rendering. Each subsequent template that extends the base layout can include these additional blocks.
Template block names are structured by combining main element names to form path. e.g. head
wraps everything inside
the head
element, the same applies to headIcons
.
_layouts/template.njk extends govuk-frontend/template.njk
- the GOV.UK frontend template Data Hub extends from
<head>
pageTitle
- contains the page titleheadIcons
- contains various GOV.UK iconshead
- overridden by Data Hub containing mainly<meta>
,<link>
and<script>
tags
</head>
</body>
bodyStart
- contains Google Tag Manager (GTM) and the notification bannerskipLink
- a GOV.UK "skip to content" linkheader
- overridden by Data Hubheader_site_title
- wraps the site titleheader_menu
- wraps the header menulocal_header
- wraps header content specific to the app
main
- Data Hub overrides the GOV.UK main blockcontent
- overridden by Data Hublocal_nav
- wraps navigation specific to the appbody_main_content
- contains main content (inside main#content)
footer
- contains a GOV.UK footer which DataHub overrides with an empty blockbodyEnd
- initialise scripts (e.g. app.js and GOV.UK frontend)
</body>
Base layout checks for certain variables.
siteTitle
{string} - name of the site. Defaults to 'Department for Business and Trade'.serviceTitle
{string} - name of the service.phaseBanner
{boolean} - whether to show the separate phase banner or default to phase tag in the global header. Possible values:true
andfalse
.projectPhase
{string} - phase of the project. Possible values:alpha
andbeta
.