django-sekizai Support

Django Compressor comes with support for django-sekizai via an extension. django-sekizai provides the ability to include template code, from within any block, to a parent block. It is primarily used to include js/css from included templates to the master template.

It requires django-sekizai to be installed. Refer to the django-sekizai docs for how to use render_block

Please note that the sekizai integration does not work with offline compression. See this issue for details.

Usage

In templates which either extend base templates or are included by other templates, use any of these directives to import Stylesheets and JavaScript files:

{% load static sekizai_tags %}

{% addtoblock "css" %}<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />{% endaddtoblock %}
{% addtoblock "css" %}<link href="{% static 'app/css/mystyle.css' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}

{% addtoblock "js" %}<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static 'js/js/myapp.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key={{ config.apiKey }}&callback=initMap"></script>{% endaddtoblock %}

Note that some files are loaded by the browser directly from a CDN and thus can not be compressed by django-compressor. Therefore the Sekizai compressor checks whether a file is compressable, and only if so, concatenates its payload.

{% load sekizai_tags %}

<html>
  <head>
  ...
  {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %}
  </head>

  <body>
  ...
  {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %}
  </body>
</html>

In the above example, we render StyleSheets inside the <head> element and JavaScript files just before closing the </body> tag.

Here, we first render some references to CSS and JavaScript files, served from external sources. Afterwards all local files are concatenated and optionally minified. In the last step all references to deferred files are rendered.