django include_javascript/use_javascript and similar

Question

I'm searching for the way to include javascript/css files inside django templates using symfony-like style or similar.

My base/layout.html template looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  {% load static %} 
  <meta http-equiv="X-UA-Compatible" content="IE=8" />  
  <meta name="description" content="{% block meta_description %}{% endblock %}" />
  <meta name="keywords" content="{% block meta_keywords %}{% endblock %}" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title>{% block meta_title %}{% endblock %} Daily-Cooking</title>
  {% block javascript %}  
  <script type="text/javascript" src="http://yandex.st/jquery/1.6.2/jquery.min.js"></script>  
  {% endblock %}
  {% block css %}
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/print.css" type="text/css" media="print">
  <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/src/forms.css" type="text/css" media="screen, projection">  
  <link rel="stylesheet" href="{% get_static_prefix %}/css/base.css" type="text/css" media="screen, projection"> 
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="{% get_static_prefix %}/blueprint/ie.css" type="text/css" media="screen, projection">
  <![endif]-->  
  {% endblock %}
</head> 
<body>
  {% include "base/header.html" %}
  {% block content %}{% endblock %}
  {% include "base/footer.html" %}      
  {% block layer %}{% endblock %}
</body>
</html>

I can easily add another template extending base one:

{% extends "base/layout.html" %}
{% block javascript%}
   some custom scropt
{% endblock %}

This will work fine. But 2 problems: 1. I can't use {% block %} more than once 2. Every {% block javascript %} inside included template (for ex. header.html in example) will be treated as block fro THIS included template

The best way i can see: base/layout.html has something like: {% include_javascripts %}

Any child or included template: {% use_javascript "jquery.js" %}

Also, i want block {% block layer %}{% endblock %} extended similiar way and to be extended as many times as i want

bx2 · Accepted Answer · 2011-08-07 09:39:40Z

1

You can extract js and css calls into another template like ie. js.html and then every time you would like to add it, you're calling django's native {% include "js.html" %}. Docs: https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#include.

You can always use {{ block.super }} in child templates to inherit whole block from the parent, or override it like:

<head>
    {% block javascript %}
        {{ block.super }}
        <link .... >
    {% endblock %}
</head>

Full docs about it here: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance.

Second approach would be to write your own templatetag to render the links in any manner you wish - https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-tags.

Third way is to use ie. django-compress (plugin's purpouse is to ie. minify and concatenate jss/css to reduce http requests on the site) it has some built-in tags which might help you. Basically you're defining file groups in ie settings.py like that:

COMPRESS_CSS = {
    'group_one': {
        'source_filenames': ('css/style.css', 'css/foo.css', 'css/bar.css'),
        'output_filename': 'css/one_compressed.css',
        'extra_context': {
        'media': 'screen,projection',
        },
    },
# other CSS groups goes here
}

And then in the template you call {% compressesd_css 'group_one' %}.

edited Aug 7, 2011 at 9:39

answered Aug 7, 2011 at 9:33

bx2

6,4966 gold badges38 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gray Hound Over a year ago

I'm really surprised. I've been waiting for such things to be implemented in such powerful framework. Made my own app with templatetags, will commit to github soon

bx2 Over a year ago

well, what can you do ;) django has no assets like rails ;)

bx2 Over a year ago

if my answer helped you, I would appreciate if you would marked it as correct one :)

Collectives™ on Stack Overflow

django include_javascript/use_javascript and similar

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related