Django 'Include' template with css/js

Question

I have a generic template, used for including html (ie. a menubar in menubar.html) into other app templates, through the include tag. It has some defined css and js functionality, stored in respective menubar.css|menubar.js files.

Is seems much more convenient to contain links to these files within the menubar.html file, as shown below:

//At the Start
<link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}" />

//.... other menubar HTML

//At the End
<script src="{% static '<app_name>/js/menubar.js' %}"></script>

I'm worried this isn't good practise, because the template will be loaded with the css not located in HEAD and js not located at the end of BODY. These are described as the standard HTML practises.

The clear alternative is to link the css or js in every template that I include the subtemplate, but this seems tedious.

I know there is also the possibility of extending a template, however I believe the same issues occur with css/js usage.

What's best?

score 4 · Accepted Answer · answered Aug 07 '17 at 15:41

You can utilise the django-sekizai package here:

https://django-sekizai.readthedocs.io/en/latest/

You'd have a base template along the lines of this:

{% load sekizai_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <!-- other css and head content goes here -->
        {% render_block "css" %}
    </head>
    <body>
        ...

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        {% render_block "js" %}        
    </body>
</html>

Then in your menubar.html you can add the following anywhere in the template and they css will get added to the page head and the javascript to the bottom of the body:

{% addtoblock "css" %}
    <link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}"/>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script src="{% static '<app_name>/js/menubar.js' %}"></script>
{% endaddtoblock %}

It's a really handy package!

Good suggestion! How is this different to [Template Inheritance](https://docs.djangoproject.com/en/1.11/ref/templates/language/#template-inheritance)? I've just read you can use the `{% block %}` tag and call `{{ block.super }}` to get the original content. Won't that do the same thing natively (without an additional package)? — Mr G, Aug 08 '17 at 23:32
Sorry, I see the distinction - django doesn't provide native support for [processing blocks within includes](https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include). And I see that django-sekizai deals specifically with that problem. Nice one! — Mr G, Aug 09 '17 at 00:56

score 0 · Answer 2 · edited Aug 09 '17 at 03:21

0

You can dynamically load your js and css in django, by using template inheritance. This is the reference.

From this post about javascript loading your use of inheritance tags might look like this:

#base.html
{% block js %}
   <script src="{% static '<app>/js/resource.js' %}"></script>
   ... //other scripts
{% endblock %}

and then in another template:

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

{% block js %}
   {{ block.super }} //Includes base.html js block content
   <script src="{% static '<otherapp>/js/resource2.js' %}">
   ... //other scripts
{% endblock%}

edited Aug 09 '17 at 03:21

Mr G

244
3
10

answered Aug 07 '17 at 15:09

Gene Sescon

165
12

How might this look @gene-sescon if I am using the {% include %} tag rather than inheritance? Ie, I'm including a html resource to a page, but it also needs to extend the JS functionality like the page itself does. – Mr G Aug 08 '17 at 23:49

Django 'Include' template with css/js

2 Answers2