Last update on .

A recent question in a Django forum regarding the use of the {% block %} tag inspired this post. I LOVE the block tag and use it extensively so I thought I would share what I know.

What is it?

Django comes with built-in template tags that make life a little bit easier. Tags are basically little shortcuts that let you do extra things right in your HTML template. Some perform logic and some load external information that can be used. (For more on tags, see Django's documentation.)

The block tag is used for template inheritance which allows you to build an outline of how all of your pages on the website will look. The block tag basically lets you designate a "holding spot" for specific components that may be different on different pages. It looks like this {% block somename %}{% endblock %}.

Why use it?

The main reason to use the block tag is to keep your code DRY (Do not Repeat Yourself). You can do all of your styling and structure alignment around your base block, then simply reference the block in other templates. That way you are only designating the <div>, <ul>, etc. and style class once throughout your entire site.

In the example below, because the block is within a <div> with designated class and style attributes, everything contained within the block named 'content' will be formatted the same: centered in a container with blue text.

    <div class="container center" style="color:blue;">
      {% block content%}{% endblock content%}
    </div>

How does it work?

To explain, let's use the <title> element. The <title> element, found in the <head> section of the base template, controls what visitors see on the tab of their browser when they visit the site. Some sites only define this once and display the same title for every page on their site. However, you can change this title as needed. By using Django's block tag, you can make this value a variable that can be specified by each page.

In the example below, the base.html contains this line in the <head> section of the page and subsequent pages change the title to match their content.

    # base.html
    <title>{% block title %}MySite{% endblock title %}</title>

    # about.html
    {% extends base.html %}
    {% block title %}About{% endblock title %}

Now the site visitor's browser tab will show 'MySite' on the home page and 'About' when they are on the about page.

Nesting

The block tag works similarly to a variable. Where it differs is that you can include blocks of code rather than just a singular value. Another difference is that you can nest blocks within blocks.

One example of nesting can be shown with breadcrumbs. I usually create a base template for my entire site and also base templates for my applications. This creates a layer of design elements that allow similar but distinct looks for each section of the website. All website pages have the same structure and share certain elements (like a sidebar), but the user pages may have less elements than the blog pages.

Here's an example of how I structure my breadcrumbs:

    # website base (base.html)
    ...

    <div class="breadcrumbs">
      <ul>
        {% block breadcrumbs %}
          <li><a href="{% url 'home' %}">Home</a></li>
          {% block app-crumbs %}{% endblock app-crumbs %}
        {% endblock breadcrumbs %}
      </ul>
    </div>

    ...


    # user application base (user_base.html)
    {% extends base.html %}
    ...

      {% block app-crumbs %}
        <li><a href="{% url 'users:list' %}">Users</a></li>
        {% block page-crumbs %}{% endblock page-crumbs %}
      {% endblock app-crumbs %}

    ...


    # page within user application
      {% extends users/user_base.html %}
    ...

      {% block page-crumbs %}
        <li><a href="{% url 'users:login' %}">Login</a></li>
      {% endblock page-crumbs %}

    ...

Considerations

1) The block tag does not require a name on the endblock, but I prefer to label them as a default. This makes it easier to read, especially when you have multiple and nested blocks.

2) Not only does the block tag give you the ability to add code in other templates, but you can also remove code. If you have a block tag in the base template, but don't want to see that on a specific page, you can simply include the block tag with nothing between the {% block %} and {% endblock %}. This causes the tag to be removed from the page because it is telling Django to replace the block with nothing.

In the example below, the main page and the about page will have a page title, but the image gallery will not.

    # base.html
    {% block page-title %}
      <h1>My Site</h1>
    {% endblock page-title %}

    # about.html
    {% extends base.html %}

    {% block page-title %}
      <h1>About</h1>
    {% endblock page-title %}


    # image_gallery.html
    {% extends base.html %}

    {% block page-title %}{% endblock page-title %}

Conclusion

If you find yourself duplicating content again and again, consider using the block tag. It makes formatting and organizing the layout of your web pages easy and painless.


Happy coding!

Additional Information about Entry

Comments

No comments yet.

Post your comment