Understanding Jinja2 Tags with Examples
Django is a powerful web framework that allows developers to build robust web applications. To get started with the Django setup and installation refer here.
Jinja2 is a powerful templating engine for Python, widely used in web frameworks like Flask and Django. It allows developers to create dynamic web pages by embedding Python-like expressions in HTML. Here, we'll explore some of the essential Jinja2 tags and provide examples to illustrate their usage.
Some of the common template tags in Jinja2 are:
% extends %}
The {% extends %} tag is used to extend a base template. It takes a template name as an argument, and extends the base template with the contents of the template file.
For example, the following code extends the layout.html template with the contents of a template file called child.html , the code looks like:
Example:
{% extends "base.html" %}
{% block content %}
<h1>Welcome to my website!</h1>
<p>This is a child template.</p>
{% endblock %}
In this example, the content block in the child template overrides the content block in the base template, and the title block is not overridden.
{% load %}The
{% load %}tag is used to load a template tag library. It takes a library name as an argument, and loads the template tag library with that name. For example, the following code loads thestatictemplate tag library:{% load static %}This will load the
statictemplate tag library, which provides a set of template tags for working with static files.{ block %} and {% endblock %}
The {% block %} tag is used to define a block of content that can be overridden in child templates. It takes a name as an argument, and defines a block with that name that can be overridden or modified in child templates. For example, the following code defines a base template that includes a header and a footer with some default values:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
{% block content %}
<h1>Welcome to my website!</h1>
{% endblock %}
<footer>
{% block footer %}
<p>Copyright © 2021</p>
{% endblock %}
</footer>
</body>
</html>
And the following code defines a child template that overriding the content block:
{% extends "base.html" %}
{% block title %}My Website{% endblock %}
{% block content %}
<h1>Welcome to my website!</h1>
<p>This is a child template.</p>
{% endblock %}
In this example, the content block in the child template overrides the content block in the base template, and the title block is not overridden.
{% include %}
The {% include %} tag is used to include another template within the current template. This is useful for reusing components like headers and footers.
Example:
{% include "header.html" %}
{% if %},{% else %}, and{% endif %}
These tags are used for conditional statements, allowing you to render content based on certain conditions.
Example:
{% if user.is_authenticated %}
<p>Welcome, {{ user.username }}!</p>
{% else %}
<p>Please log in.</p>
{% endif %}
{% for %}and{% endfor %}
The {% for %} tag is used to iterate over a sequence of items. It takes a variable name and a sequence as arguments, and displays the content inside the tag for each item in the sequence. For example, the following code will display a items which are iterated:
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% with %}and{% endwith %}
The {% with %} tag allows you to define a variable for use within a block, simplifying complex expressions.
Example:
{% with total=price * quantity %}
<p>Total: {{ total }}</p>
{% endwith %}
{% url %}
The {% url %} tag is used to generate a URL for a view. It takes a view name and a set of arguments as arguments, and generates a URL for the view with those arguments.
For example, the following code generates a URL for the index view with the name argument set to 'home':
<a href="{% url 'index' name='home' %}">Go to the home page</a>
This will generate a link to the home page with the name argument set to 'home' in the views file.
{% macro %}and{% endmacro %}
Macros are like functions in Jinja2, allowing you to define reusable snippets of code.
Example:
{% macro render_item(item) %}
<li>{{ item }}</li>
{% endmacro %}
{% call %}
The {% call %} tag is used to call a macro with a block of content.
Example:
{% call render_item() %}
<li>Special Item</li>
{% endcall %}
Conclusion
Jinja2 tags provide a flexible way to create dynamic and reusable templates. By understanding and utilizing these tags, you can build efficient and maintainable web applications. Whether you're extending templates, including components, or using control structures, Jinja2 offers a robust set of tools to enhance your web development workflow.