@getkist/action-nunjucks
Nunjucks template rendering with data support.
Installation
bash
npm install --save-dev @getkist/action-nunjucksActions
TemplateRenderAction
Renders Nunjucks templates to HTML or other formats.
Options
| Option | Type | Default | Description |
|---|---|---|---|
inputFile | string | Required | Path to template file |
outputFile | string | Required | Path to output file |
data | object | {} | Data to pass to template |
dataFile | string | - | JSON/YAML file with data |
templatesDir | string | - | Directory for includes |
autoescape | boolean | true | HTML auto-escaping |
Basic Usage
yaml
plugins:
- @getkist/action-nunjucks
pipeline:
build:
stages:
- name: html
steps:
- action: TemplateRenderAction
options:
inputFile: src/templates/index.njk
outputFile: dist/index.htmlWith Inline Data
yaml
- action: TemplateRenderAction
options:
inputFile: src/templates/index.njk
outputFile: dist/index.html
data:
title: "My Website"
version: "1.0.0"
features:
- Fast
- Modern
- SimpleWith Data File
Create data.json:
json
{
"title": "My Website",
"navigation": [
{ "name": "Home", "url": "/" },
{ "name": "About", "url": "/about" }
]
}Use it:
yaml
- action: TemplateRenderAction
options:
inputFile: src/templates/index.njk
outputFile: dist/index.html
dataFile: src/data/site.jsonTemplate Syntax
Variables
html
<title>{{ title }}</title>
<p>Welcome to {{ site.name }}</p>Loops
html
<nav>
{% for item in navigation %}
<a href="{{ item.url }}">{{ item.name }}</a>
{% endfor %}
</nav>Conditionals
html
{% if user.isLoggedIn %}
<p>Welcome, {{ user.name }}!</p>
{% else %}
<a href="/login">Log in</a>
{% endif %}Includes
html
{% include "partials/header.njk" %}
<main>{{ content }}</main>
{% include "partials/footer.njk" %}Template Inheritance
Base template (base.njk):
html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Default{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>Child template:
html
{% extends "base.njk" %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Welcome</h1>
{% endblock %}Multiple Pages
yaml
plugins:
- @getkist/action-nunjucks
pipeline:
build:
stages:
- name: pages
steps:
- action: TemplateRenderAction
options:
inputFile: src/templates/index.njk
outputFile: dist/index.html
dataFile: src/data/home.json
- action: TemplateRenderAction
options:
inputFile: src/templates/about.njk
outputFile: dist/about.html
dataFile: src/data/about.json
- action: TemplateRenderAction
options:
inputFile: src/templates/contact.njk
outputFile: dist/contact.html
dataFile: src/data/contact.jsonWith Environment Variables
yaml
- action: TemplateRenderAction
options:
inputFile: src/templates/index.njk
outputFile: dist/index.html
data:
apiUrl: ${{ env.API_URL }}
version: ${{ env.VERSION }}Project Structure
Recommended structure:
src/
├── templates/
│ ├── base.njk
│ ├── index.njk
│ ├── about.njk
│ └── partials/
│ ├── header.njk
│ ├── footer.njk
│ └── nav.njk
└── data/
├── site.json
├── home.json
└── about.jsonFilters
Nunjucks includes built-in filters:
html
{{ title | upper }}
{{ description | truncate(100) }}
{{ date | date("YYYY-MM-DD") }}
{{ items | join(", ") }}
{{ content | safe }}