How do I include a HTML file in a Jinja2 template?

python html flask jinja2

108,005

Solution 1

Use the jinja2 {% include %} directive.

{% extends 'template.html' %}
{% block content %}
    {% if task == 'content1' %}
        {% include 'content1.html' %}
    {% endif %}
    {% if task == 'content2' %}
        {% include 'content2.html' %}
    {% endif %}
{% endblock %}

This will include the content from the correct content-file.

Solution 2

You can use the include statement.

Solution 3

I'd like to add the proper syntax for using include, one given above works fine, but when it comes to the path, it took some time to find this, it is not even mentioned in the official document.

Syntax for include is:

{% include 'path_to_template_file' %}

108,005

quapka

Master's degree in Information Technology Security, Masaryk University in Brno, in the Czech Republic. Bachelor's degree in Mathematics at Faculty of Science, Masaryk University in Brno. Tweet me!: https://twitter.com/quapka Or if you'd like to be more business-like: https://www.linkedin.com/pub/jan-kvapil/97/453/65b Previous projects: Git: https://github.com/JendaPlhak/math_in_python/tree/master/KvagrsWork

Updated on December 16, 2021

Comments

quapka over 2 years
I am using Flask micro-framework for my server which uses Jinja templates.

I have a parent template.html and some children templates called child1.html and child2.html, some of these children templates are pretty large HTML files and I would like to somehow split them for better lucidity over my work.

Contents of my main.py script:
```
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/<task>')
def home(task=''):
  return render_template('child1.html', task=task)

app.run()
```
The simplified template.html:
```
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="container">
      {% block content %}{% endblock %}
    </div>
  </body>
</html>
```
The magic is in child1.html:
```
{% extends 'template.html' %}
{% block content %}
  {% if task == 'content1' %}
    
  {% endif %}
  {% if task == 'content2' %}
    
  {% endif %}
{% endblock %}
```
Instead of the comments:
```

```
I have a lot of html text, and it is very hard to keep track of changes and not to make some mistakes, which are then pretty hard to find and correct.

I'd like to just load the content1.html instead of writing it all in child1.html.

I came across this question, but I had problems implementing it.

I think Jinja2 might have a better tool for that.

NOTE: The code above might not be working properly, I just wrote it to illustrate the problem.