Django Templates & Static files

Django templates are the presentation layer of the Django web application. A templates folder is typically created under the app directory and it has .html files. A static directory can also be created under the app directory to store images, CSS, and js files.

        └── ...    
        └── templates
            └── index.html
        └── static
            └── img
            └── css
            └── js

Django Template Tags

Django template is a mix of static HTML markups and dynamic python context dictionary. Several template tags and filters are available to render the context dictionary.

Template Tags

  • extends 'base.html': It extends the code of the base template to any template file that sub-classes it. extends tag must be the first line if used.
  • block content: It marks the dynamic section of a template which will be described in the extending template.
  • : It loads the static resources under the static directory.
  • for item in collection: It implements a simple python for a loop.
  • if condition: It implements a simple python if condition.
  • : It is used for comments other than HTML comments.
  • : It prints the value of the given variable. A newline is not automatically included, unlike the Python print statement. Although HTML <br> tag can serve the same purpose.

Template Filters

Filters can be used to enhance the value of the context key variables.

All available filters in Django templates are as follows:

  • add
  • addslashes
  • capfirst
  • center
  • cut
  • date
  • default
  • default_if_none
  • dictsort
  • dictsortreversed
  • divisibleby
  • escape
  • escapejs
  • filesizeformat
  • first
  • floatformat
  • force_escape
  • get_digit
  • iriencode
  • join
  • json_script
  • last
  • length
  • length_is
  • linebreaks
  • linebreaksbr
  • linenumbers
  • ljust
  • lower
  • make_list
  • phone2numeric
  • pluralize
  • pprint
  • random
  • rjust
  • safe
  • safeseq
  • slice
  • slugify
  • stringformat
  • striptags
  • time
  • timesince
  • timeuntil
  • title
  • truncatechars
  • truncatechars_html
  • truncatewords
  • truncatewords_html
  • unordered_list
  • upper
  • urlencode
  • urlize
  • urlizetrunc
  • wordcount
  • wordwrap
  • yesno

Static files

Django project defines a static directory that typically houses images, CSS, and javascript files. A sample code below shows how to use the static files.

load static

In img tag use:

src = "/static/img/my_image.png"                                             

For CSS files use under link tag:

href = "/static/css/my_stylesheet.css"                          

For Javascript files use under script tag:

src = "/static/js/my_script.js"