I’m building static HTML templates and would like to loop over a block of markup to output it multiple times. Twig has a simple method for it, but I've been unable to find the equivalent in Nunjucks.
Twig input:
{% for i in 1..2 %}
<div>Lorem ipsum</div>
{% endfor %}
HTML output:
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
Related
Context
My colleagues are starting to enhance jinja2 templates that I have developed, and I want my syntax to be as readable and easy for them to navigate as possible. But I don't know how to resolve the challenge that I've reproduced in it's simplest form below:
Minimal reproducible example
When jinja2 syntax is not interspersed within HTML, html parent/child relationships are easy to spot because of the vertical alignment, such as in the example below:
<li>
<p>List Item 1</p>
<p>List Item 2</p>
<p>List Item 3</p>
<p>List Item 4</p>
<p>List Item 5</p>
</li>
And the nested blocks of jinja2 syntax are likewise easy to trace back to their hierarchical precedents in the following example:
{% if foo == bar %}
{% if foo == 1 %}
# Do something
{% endif %}
{% if foo == 2 %}
# Do something
{% endif %}
{% endif %}
But if the two are merged, readability diminishes.
When the indentation of the jinja2 template is given priority, it makes the html parent/child relationships harder to see:
<li>
<p>List Item 1</p>
{% if foo == bar %}
<p>List Item 2</p>
{% if foo == 1 %}
<p>List Item 3</p>
{% endif %}
{% if foo == 2 %}
<p>List Item 4</p>
{% endif %}
{% endif %}
<p>List Item 5</p>
</li>
And if the html indentation is given priority, it makes it harder to trace nested blocks back to their hierarchical precedents:
<li>
<p>List Item 1</p>
{% if foo == bar %}
<p>List Item 2</p>
{% if foo == 1 %}
<p>List Item 3</p>
{% endif %}
{% if foo == 2 %}
<p>List Item 4</p>
{% endif %}
{% endif %}
<p>List Item 5</p>
</li>
I've seen other indentation patterns that split the difference, but they all suffer from lack of readability.
This minimal reproducible example is still fairly easy to visually parse because there is little distance between lines that share a relationship. But the impact is much more onerous when working with large templates.
The Question
Is there an official indentation standard for jinja2 and html that minimizes these tradeoffs? If so, where is the standard discussed?
What I've found so far
I've searched the jinja2 docs for the term "indent" and the two results are not relevant. Some of the Google and Bing results address questions of indentation, but not in this particular context, like these: link, link, link, link, link, link
It seems like this would be a fundamental question, and I apologize if I've overlooked the obvious places where it is answered. Thank you for your help!
try command line formatter djhtml mention in this solution.
https://github.com/rtts/djhtml/
I created Flask HTML template and I need to create an icon (fa-link) with a link to an external website so if user clicks the icon it will redirect him/her to external website.
The hardcoded version looks like this:
<h3 class="border-bottom mb-2 text-left">Lorem ipsum dolor sit amet, consectetuer adipiscin<i class="fas fa-link ml-3"></i></h3>
What I want is to use Jinja2 to generate variable and pass title and link to external website in my flask template file so something like this:
<h3 class="border-bottom mb-2 text-left">{% block product_title %}{% endblock %}<i class="fas fa-link ml-3"></i></h3>
And min my rendered html file I have:
{% block title %}
Lorem ipsum dolor sit amet, consectetuer adipiscin
{% endblock %}
Could you please explain how to pass href attribute to rendered html?
you can send href link directly from flask to html file like
Python Code:
return render_template("index.html", href = "https://www.google.com", title='google')
Html Code:
{{title}}
Let me know if it didnt work, we'll figure this out.
Here's the final output of what I'd like to have:
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
<nav aria-label="Table of Contents">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
<nav>
<section itemprop="articleBody">
<p>the main body of the article</p>
</section>
</article>
With a default Jekyll install Kramdown can create a TOC with
* TOC
{:toc}
However Markdown is not currently supported in HTML includes or Layout files.
I tried using [Capture and Markdownify}(https://github.com/jekyll/jekyll/issues/6166#issuecomment-322771527) to add the above TOC call to the layout file without success
// _layouts/post.html
<article>
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
{% capture toc %}{% include toc.md %}{% endcapture %}
{{ toc | markdownify }}
<section itemprop="articleBody">
<p>the main body of the article</p>
</section>
</article>
Adding a inline markdownify works for plain markdown but not the Kramdown TOC call.
// this works
{% capture md %}
## Heading 2
*Stuff added in my layout*
{% endcapture %}
{{ md | markdownify }}
// This doesn't work
{% capture md %}
* TOC
{:toc}
{% endcapture %}
{{ md | markdownify }}
The only way I see around this is to include some of the layout markup in the post's markdown file.
// _layouts/post.html
<article>
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
{{ content }}
</article>
// _posts/post.md
---
layout: post
---
<nav aria-label="Table of Contents">
* TOC
{:toc}
</nav>
<section itemprop="articleBody">
## My Heading
Standard markdown content here
</section>
The draw back here is that I've now got page markup in my post that can be easily corrupted and a distraction to content editors.
Does anybody see a way round this?
I found this excellent Ruby Gem jekyll-toc — it generates a TOC that you can place anywhere in your layout files.
I'm now successfully using the following in my _layouts/post.html:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
This PostHTML plugin "PostHTML Each" can repeat HTML code in a simple way. Like this
<!-- BEFORE -->
<div class="block" each="3"></div>
<!-- AFTER -->
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
How to repeat in a similar way in Nunjucks?
I don't think there's a nice one-liner as in your example for PostHTML but as mentioned in the comment you can use for tag. It needs a data source to iterate over, so use it with range function which will provide such.
{% for i in range(0, 3) -%}
<div class="block"></div>
{%- endfor %}
Docs:
for tag
range function
I am trying to write equations on my jekyll powered blog hosted on github pages. I am trying to use MathJax javascript library as per instructions here. Essentially, I added the following code below front matter in the _layouts\page.html and _layouts\post.html
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
(copied from here). The problem is that the equations still do not show up correctly on the post, e.g., I wrote the following in my post (with a blank line above and below it):
[\\ a^2 + b^2 = c^2 \\]
and instead of showing me the equation in the latex format on the page, it only escapes a \ and shows me the following
[\ a^{2} + b^{2} = c^{2} \]
Additional details (in my _config.yml regarding highlighting) are as follows
# Build settings
markdown: kramdown
highlighter: rouge
paginate: 5
kramdown:
input: GFM
hard_wrap: false
# syntax_highlighter: rouge
Also, pasted below the is the code in _layouts\page.html
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<div class="post-content">
{{ content }}
</div>
</article>
and the code in _layouts\post.html
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
</header>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<div class="post-content" itemprop="articleBody">
{{ content }}
</div>
</article>
Any help in resolving this issues of showing equations properly will by very highly appreciated!
Thanks!
SN248
On the one hand, the math delimiters should be \[...\] (and double backslashes should you need to escape them).
On the other hand, kramdown (Jekyll's default markdown parser) has its somewhat unique math block syntax where it uses $$...$$ for both inline and display style, cf. http://kramdown.gettalong.org/syntax.html#math-blocks