Home > python > Jinja2 example for generating a local file using a template

Jinja2 example for generating a local file using a template

Here I want to show you how to generate an HTML file (a local file) using a template with the Jinja2 template engine.

Python source (proba.py)

#!/usr/bin/env python

import os
from jinja2 import Environment, FileSystemLoader

PATH = os.path.dirname(os.path.abspath(__file__))
TEMPLATE_ENVIRONMENT = Environment(
    autoescape=False,
    loader=FileSystemLoader(os.path.join(PATH, 'templates')),
    trim_blocks=False)


def render_template(template_filename, context):
    return TEMPLATE_ENVIRONMENT.get_template(template_filename).render(context)


def create_index_html():
    fname = "output.html"
    urls = ['http://example.com/1', 'http://example.com/2', 'http://example.com/3']
    context = {
        'urls': urls
    }
    #
    with open(fname, 'w') as f:
        html = render_template('index.html', context)
        f.write(html)


def main():
    create_index_html()

########################################

if __name__ == "__main__":
    main()

Jinja2 template (templates/index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Proba</title>
</head>
<body>
<center>
    <h1>Proba</h1>
    <p>{{ urls|length }} links</p>
</center>
<ol align="left">
{% set counter = 0 -%}
{% for url in urls -%}
<li><a href="{{ url }}">{{ url }}</a></li>
{% set counter = counter + 1 -%}
{% endfor -%}
</ol>
</body>
</html>

Resulting output
If you execute proba.py, you will get this output:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Proba</title>
</head>
<body>
<center>
    <h1>Proba</h1>
    <p>3 links</p>
</center>
<ol align="left">
<li><a href="http://example.com/1">http://example.com/1</a></li>
<li><a href="http://example.com/2">http://example.com/2</a></li>
<li><a href="http://example.com/3">http://example.com/3</a></li>
</ol>
</body>
</html>

You can find all these files here (GitHub link).

Advertisements
Categories: python Tags: , ,
  1. September 12, 2017 at 14:01

    This was really clear. I got this to work first go, thanks for providing the fast road to jinja

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: