Teague Teague - 4 months ago 8x
Python Question

What's the difference between template include and static include in Django?

I'm trying to learn Django at the moment and am trying to make sure I'm not doing anything stupid.

I'm in the process of making my web page more modular in the sense that I am removing hardcoded values in the template (base .html). Doing so, I'm trying to convert hardcoded CDN references (jquery, bootstrap, etc.) to modular pieces that can be included in every web page. Doing so will allow me to change a single file in the future, instead of being forced to go to every web page and make that change.

However, I'm slightly confused. I'm trying to determine if it would make sense to copy them into a html file and use Django's

{% include '' %}
template tag to directly include the cdn portions, or if using Django's static include would be more appropriate.

So what exactly is the best route? It seems like it would be very easy to use template includes for everything static in all honesty. Why not use it to include javascript or css?


Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, we refer to these files as “static files”.

We call them 'static' simply because they aren't dynamic i.e the contents of these files are relatively fixed, either by design or by it's intrinsic characteristics (eg: binary content like images) and thus does not need to processed by our application server.

We differentiate them from other files because it's advisable to serve these static files at a lower level, for example, using nginx. This allows us to serve these files faster as is which leads to performance gains. It also allows easy caching.

But when using a CDN, you offload this work from your server to somebody else's server.

Now coming back to your question. You shouldn't have to declare your resources in every template. Usually, base.html contains the base of the page which can then me extended (read: template inheritance) by more specific (children) templates.

To understand this quickly, here's an example:


        <meta charset="utf-8">
        <link rel="stylesheet" href="~~CDN HERE~~">
        <script src="~~CDN HERE~~"></script>
        {% block body %}{% endblock %}


{% extends "app/base.html" %}
{% load static %}
{% block body %}
<h1>{{ page_title }}</h1>
<img src="{% static 'app/img/detective.png' %}" alt="detective" />
    {{ page_content | safe }}
{% endblock %}

Now for every article on your site, you render the article template which automatically extends the base removing the need to mention your css/js files for multiple pages.

If you're using different resource files for different pages, you can creation an additional block like {% block css %}{% endblock %}

and then add this to your article.html

{% block css %}
<link rel="stylesheet" href="{% static 'app/css/article.css' %}">
{% endblock %}

Notice how I'm using static for image, which is served directly by nginx.

Theoretically, you can club your CDN links into a file and then include it in base.html, but it just leads over modularity which causes redundant complexity.

Let me know if you have any issues!