I would like to use gulp and Nunjucks to generate multiple template files at once with varying content. These templates will all have the exact same layout, but pass in different variables for text/images.
I am able to successfully generate a single index.html file, but am unsure how to set this up for multiple files to be created at once. Here is a simplified version of what I have:
gulpfile.js
var nunjucks = require('gulp-nunjucks-render');
var data = require('gulp-data');
gulp.task('nunjucks', function () {
return gulp
.src('./src/layouts/**/*.+(html|nunjucks)')
.pipe(data(function () { return require('./src/data.json'); }))
.pipe(nunjucks({ path: ['./src/templates'] }))
.pipe(gulp.dest('./dist'));
});
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ title }}</title>
{% endblock %}
data.json
{
"title": "DEFAULT"
}
What is the best way to alter this workflow to generate multiple files where each has a different title?
I've found that I can create multiple index.nunjucks files, but it looks like they all use the same data.json file. I also wouldn't want to make a separate JSON file for each.
Could I add an array to my data.json file to have Nunjucks loop through and create a separate file for each object found? Such as the following:
data.json
{
"files": [{
"title": "DEFAULT",
}, {
"title": "DEFAULT #2"
}]
}
Or is there a way to set variables within the index.nunjucks file without relying on storing them in JSON?
Found the way to do this: in each Nunjucks index file, I set a variable named email to the filename and updated my data.json file with a new object matching the filename with its own content.
default.nunjucks
{% set email = default %}
{% include "index.nunjucks" %}
test.nunjucks
{% set email = test %}
{% include "index.nunjucks" %}
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ email.title }}</title>
{% endblock %}
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
data.json
{
"default":
{
"title": "TITLE"
},
"test":
{
"title": "TEST TITLE"
}
}
When compiled through gulp, two separate emails are created with their own title using the same template.
Related
I'm struggling with json in twig. I want to include a static json file to my twig file and pass it to a twig include inside that.
I have my index twig file where I have my STATIC json file include and twig include:
{% set json %}
{% include "content.json" %}
{% endset %}
{% include '#partials/blocks/site-header.twig' with {json:json} %}
In My siteheader.twig I would like to render my navigation something like:
{% for headerNav in json %}
<a class="button button--nav" href="#">
{{headerNav.text}}
</a>
{% endfor %}
My content.json looks like this:
{
"headerNav":[
{
"text": "Link 1"
},
{
"text": "Link 2"
}
]
}
The whole point is that the siteheader should be able to render different links dependant on which json file i pass into it.
I am building a chatbot. There are few child templates like login.html, messages.html, transaction.html, etc. I want to append these templates in base.html dynamically. I am extending base.html in all these templates. My problem is only one template is rendered at a time. Is there any solution for appending these templates one after another? I have used {%include%} but it's a static approach. I need dynamic.
printer.py looks like -
#app.route('/respond', methods=['GET','POST'])
def respond_def():
message = request.form['message_input']
if message == "l":
return render_template('printer/login.html')
elif message == "t":
return render_template('printer/transactionID.html')
base.html looks like -
//some code here
<li>
{% block template %}{% endblock %}
</li>
//some code here
message.html looks like -
{% extends "base.html" %}
{% block template %}
<div> Message template called </div>
{% endblock %}
I resolved it.
I made a list of templates in printer.py and then appended those templates in base.html whenever user asked for it.
printer.py
dictionary = []
// append name of template in this whenever needed.
return render_template('printer/base.html', dictionary=dictionary)
base.html
{% for d in dicts %}
{% set template = 'printer/' + d + '.html' %}
// can add conditions for different templates
{% include template %}
{% endfor %}
How can I include data to gulp-nunjucks template from separate file?
//template/data/data.html
{% set
list = [
{
title: 'Item1'
},
{
title: 'Item2'
}
]
%}
This simple solution doesn't work.
{% include "data/json.html" %}
This should work if you use import instead of include, https://mozilla.github.io/nunjucks/templating.html#import
Try this (I used .njk extensions, but you can use .html, it won't matter):
//template/data/data.njk
{% set list = [
{
title: 'Item1'
},
{
title: 'Item2'
}] %}
And in the file where you want to use the {{ list }} variable:
//template/other-file.njk
{% from 'data/data.njk' import list %}
{{ list }}
Any top-level variables that are {% set %} or any macros that are defined are available via import.
I'm using Twig PatternLab.
I got a small issue with JSON and a Twig for loop.
Atom 00-h3-black.twig:
<h3 class="A-ChevronBlack">{{ text.chevron }}</h3>
Molecule 00-mastertile.twig:
<div class="M-DMasterTile">
<div class="image"></div>
<div class="content">
{% include "atoms-h3-black" %}
</div>
</div>
Organisms 00-default2.twig:
{% for post in default2 %}
{% include "molecules-mastertile" %}
{% endfor %}
And JSON inside Organism folder 00-default2.json
{
"default2" : [
{
"text" : {
"chevron" : "How to build a campfire",
"body" : "This is the body copy"
}
},
{
"text" : {
"chevron":"Lorem Ipsum",
"body" : "This is the body copy"
}
}
]
}
My expectation is for the "default2" to loop twice because I've got an array with 2 items in the JSON and push the JSON content. If I take the variables out of the JSON array it shows the changes(but obviously duplicated).
What am I doing wrong here?
I appreciate your help
include uses global scope and there is no variable text in it. Use include with syntax to pass variable into inner scope.
Your Organisms 00-default2.twig should look like this:
{% for post in default2 %}
{% include "molecules-mastertile" with {'text': post.text} %}
{% endfor %}
Starting off with Ansible and I am trying to use ReST API to interact with an external application.Maybe I am missing something simple here.
I am trying to compare every host in my inventory file with the POD name specified in the variable file used by the role that invokes the jinja2 template.
My inventory file looks like this:
[all]
'POD-9'
'POD-10'
Variable file :
pods:
params:
- name: POD-9
- name: POD-10
{% for pod in pods.params %}
{% if '{{ inventory_hostname }}' == '{{ pod.name }}' %}
<generate JSON template here>
{% endif %}
{% endfor %}
The if statement however does not take effect. I want the template to be generated only in the inventory_hostname is equal to the pod name in the variable file
The current JSON file includes both :
{
"pod": {
"name": "POD-9"
}
"pod": {
"name": "POD-10"
}
}
In Jinja2 the double curly braces are used as a print statement. If you access variables inside tags don’t put the braces around them
{% for pod in pods.params %}
{% if inventory_hostname == pod.name %}
<generate JSON template here>
{% endif %}
{% endfor %}
Found the problem :
{% if pod.name == inventory_hostname %}