django built-in template tags¶

django built-in template tags

Django built in template tags are very useful in data manipulation, conditional data rendering and templates re-usability with template inheritance. We should follow smart ways to make our development life ease and consistent. While working with django templates we can make use of django built-in template tags render the templates in smart way and reuse the templates wherever required.

Django Built-in Template Tags¶

We have many built-in template tags in django but let's discuss most used django built-in template tags.

if...else...endif
for...endfor
block and extends
include
url

django template tag "if...else...endif"¶

It's the most frequently used template tag in django templates. Let's see how we can use it.

{% if marks > 80 %}
    Grade A
{% elif var2 > 70 %}
    Grade B
{% else %}
    Grade C
{% endif %}

use case: Show student grade based on the

django template tag for...endfor¶

It's useful when we want to iterate the same content. Let's see how we can use it

{% for product in products_list %}
<div class="product">
  <p>Product: {{product.name}}</p>
  <p>Cost: {{product.cost}}</p>
</div>
{% endfor %}

use case: To show list of products in a e-commerse website

django template tags "block" and "extends"¶

It's most used built-in template tag in django templates. If we see websites like Amazon and Flipcart then we can find that header and footer is constant and the only content changes from page to page. I this kinds of scenarios we use blocks and template inheritance like below.

We create a "base.html" template which as the code for the header and footer of the website and content which can be changed.

File: base.html

<html>
<body>
  <header>
    <ul>
      <a>Home</a>
      <a>Contact Us</a>
      <a> About Us </a>  
    </ul>
  </header> 
  <div class="content">
    {% block content %} {% endblock %}
  </div>
  <footer>
    <a> FaQ</a>
  </footer>
</body>
</html>

In the above django template we have created a "content" block and it can be used in two templates "contact_us.html" and "about_us.html". Let's see how to implement it.

File: contact_us.html

{% extends "base.html" %}
{% block content %}
<p> Contact me for more details :D </p>
{% endblock %}

Now, the actual rendered page looks like below.

<html>
<body>
  <header>
    <ul>
      <a>Home</a>
      <a>Contact Us</a>
      <a> About Us </a>  
    </ul>
  </header> 
  <div class="content">
    <p> Contact me for more details :D </p>
  </div>
  <footer>
    <a> FaQ</a>
  </footer>
</body>
</html>

we follow the same logic for "about_us.html" just like "contact_us.html". So, The conclusion is we write less code and make use if effectively to reach our goal.

Points to remember: "extends" should be in the beginning of the document otherwise it will throw us an error.

django "include" template tag¶

include is super cool template tag can be used in django template tags. It's useful when we need a part of the html code in different pages then we ue it. use case: Let's take a blog application, we show latest blog posts in the home page and list all other blog posts in another page. but, we use the disign sample same for both of the places. In that scenario django include template tag is useful. Let's implement it.

File: blog_article.html

<div class="blog-article">
  <h1> {{ article.title }}</h1>
  <p class="desc">{{ article.description }}</p> 
</div>

File: home.html

{% extends "base.html" %}
{% block content %}
   <!-- some data before -->
   {% for article in latest_articles %}
       {% include "blog_article.html" with article=article %}
   {% endfor %}
{% endblock %}

File: blog_list.html

{% extends "base.html" %}
{% block content %}
   <!-- some data before -->
   {% for article in all_blog_articles %}
       {% include "blog_article.html" with article=article %}
   {% endfor %}
{% endblock %}

django url template tag¶

It's useful when we generate a dynamic url based on some parameters

use case: Generate blog post deail url based on blog post id like below

File: blog_article.html

<div class="blog-article">
  <h1><a href="{% url 'blog_post_detail' article.id %}">{{ article.title }}</a></h1>
  <p class="desc">{{ article.description }}</p> 
</div>

That's it folks. We can check out more django template tags in the official documentation.

Reference: docs.djangoproject.com/en/3.0/ref/templates/builtins/#built-in-template-tags-and-filters

django built-in template tags¶