@wok-cli/plugin-render-nunjucks v1.0.2
Wok Nunjucks renderer
Nunjucks template renderer for @wok-cli/task-views
.
Hook types | Production only | Purpose |
---|---|---|
Map | no | Output rendering |
Installation
This plugin requires @wok-cli/core
and @wok-cli/task-views
as peer dependencies.
npm i @wok-cli/core @wok-cli/task-views @wok-cli/plugin-render-nunjucks --save-dev
Parameters
Configuration path: nunjucks
.
parameter | type | default | note |
---|---|---|---|
root | string | Templates root folder(1) | |
helpers | function | Global helpers | |
env | function | Nunjucks environment customizer | |
...opts | object | Nunjucks environment options (2) |
- Supports environment templates. It will be used as first argument for nunjucks.configure.
- Any other parameter will be passed as the
opts
argument to nunjucks.configure.
Usage
The plugin will filter files with the .njk
and .nunjucks
extension and output a rendered .html
file.
const $ = require('@wok-cli/core');
const views = require('@wok-cli/task-views');
const nunjucks = require('@wok-cli/plugin-render-nunjucks');
const viewTask = $.task(views, {
// multiple templates allowed
src: ['src/**/*.{njk,hbs,html}'],
dest: 'public',
});
viewTask.tap('engines', 'nunjucks', nunjucks);
export.views = viewTask;
Global functions
This plugin adds the following global functions:
url(str)
A function that prepends the value of thepublicPath
Wok environment object to the passed in string and normalizes it.
Setting global helpers
Global helpers are functions and variables available in every template on the helpers
object.
To define global helpers set a helpers
function on the hooks:engines -> nunjucks
task parameters.
The function receives the opts
parameters and the Wok environment configuration object as arguments
const $ = require('@wok-cli/core');
const views = require('@wok-cli/task-views');
const nunjucks = require('@wok-cli/plugin-render-nunjucks');
+function helpers(opts, env) {
+ return {
+ // return the name from package.json
+ projectName: () => env.pkg.name;
+ }
+}
const viewTask = $.task(views, {
// multiple templates allowed
src: ['src/**/*.{njk,hbs,html}'],
dest: 'public',
+ 'hooks:engines': {
+ nunjucks: {
+ helpers
+ }
+ }
});
viewTask.tap('engines', 'nunjucks', nunjucks);
export.views = viewTask;
With the above example you can access the projectName
helper function like this:
<p>This project name: {{ helpers.projectName() }}</p>
Environment Customization
You can customize the Nunjucks environment instance via the env
parameter.
The following example will use addGlobal
to make the lodash library available to every template under the _
global object:
const $ = require('@wok-cli/core');
const views = require('@wok-cli/task-views');
const nunjucks = require('@wok-cli/plugin-render-nunjucks');
+ function env(nunjucksEnv) {
+ nunjucksEnv.addGlobal('_', require('lodash'))
+ }
const viewTask = $.task(views, {
// multiple templates allowed
src: ['src/**/*.{njk,hbs,html}'],
dest: 'public',
+ 'hooks:engines': {
+ nunjucks: {
+ env
+ }
+ }
});
viewTask.tap('engines', 'nunjucks', nunjucks);
export.views = viewTask;