0

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

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Gray Hound
  • 1
  • 1
  • 2

1 Answers1

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' %}.

bx2
  • 6,356
  • 5
  • 36
  • 40
  • 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 – Gray Hound Aug 07 '11 at 14:15
  • well, what can you do ;) django has no `assets` like rails ;) – bx2 Aug 07 '11 at 21:57
  • if my answer helped you, I would appreciate if you would marked it as correct one :) – bx2 Aug 21 '11 at 20:45