Before we start loading templates, we need to explore the Context and Template objects.  As we discussed, the context makes variables and objects available to the templates during rendering. We pass it a dictionary of variables and objects and their associated values. When the template is rendered, the placeholders will be replaced with their corresponding values.

Edit your mycompany/demo/views.py file, adding the highlighted line and replacing your detail function with this one:

from django.http import HttpResponse
from django.template import Context, Template, loader

def detail(request):
    dict_values = {'fav_color': 'blue'}
    template_string = "My favorite color is {{ fav_color }}."
    c = Context(dict_values)
    t = Template(template_string)
    rendered_template = t.render(c)
    return HttpResponse(rendered_template)

Browse to http://localhost:8000/demo/ and you should see the simple one-liner response:

My favorite color is blue.

So what happened here? Let's break it down.

We created a simple dictionary called dict_values and populated a key called fav_color with a value of blue. If you're not familiar with Python dictionary syntax, check out the code note earlier in this chapter or the Python standard documentation under 'Data Structures'. You'll want to be familiar with this syntax; it's used quite a bit with Django.

We also created a string named template_string that contains our first taste of the Django template syntax. The double brackets in the string are simply the delimiter used to identify template variables. {{ fav_color }} tells the template rendering function that this is a placeholder for the value of the variable fav_color.

Next, we created a context object named c and passed it our dictionary. We also created a template object called t and passed it our template string.

When we call the render method of the Template object, it parses the template string and replaces any template variables and logic with the appropriate values. In this case, {{ fav_color }} was replaced with the value blue. The rendered template is returned as a string to the rendered_template variable.

Finally, we send the value of the variable rendered_template to the browser as an HTTP response. Django nicely handles all the necessary steps of properly formatting the output for the browser to do its work and displaying the HTML.

Keep in mind that the verbosity of this example is intentional to keep the example clear. If you are familiar with Python, you'll know it could be written more concisely like this:

def detail(request):
    c = Context({'fav_color': 'blue'})
    t = Template("My favorite color is {{ fav_color }}.")
    return HttpResponse(t.render(c))

Templates are usually longer than five words, so let's put the template string into a separate file.

We need to create a templates directory in our project. Technically, the templates could go anywhere on the file system, but it is common to put them under a templates directory at the root of your project. Create a directory called templates under the mycompany directory.

In your mycompany/settings.py file, find the TEMPLATE_DIRS variable (it's actually a Python tuple) and add a reference to our new templates directory:

TEMPLATE_DIRS = (
    '/projects/mycompany/templates/',
)

Even though we are only specifying a single directory of templates, make sure you have the trailing comma after the file path in TEMPLATE_DIRS. If you omit it, Python will treat your TEMPLATE_DIRS variable as a string, not a tuple, and you'll get an error when you try to run it.

While we are in the settings.py file, let's enable debugging for our project by setting the DEBUG and TEMPLATE_DEBUG variables at the top of the file to True:

DEBUG = True
TEMPLATE_DEBUG = True

This will ensure that Django shows us error pages with debugging information instead of a blank page.

Now that we've told Django where to find the templates, let's create a file called example.html in the mycompany/templates directory. In the file, add the line that was in our detail view:

My favorite color is {{ fav_color }}.

We need to change our view to load this new template file. Edit your mycompany/demo/views.py file and change the detail view to look like this:

def detail(request):
    c = Context({ 'fav_color': 'blue' })
    t = loader.get_template('example.html')
    rendered_template = t.render(c)
    return HttpResponse(rendered_template)

Browse to http://localhost:8000/demo/ and you should see the same response that we got before we created the template file:

My favorite color is blue

If we want to modify the output of a variable, we can use a template filter. Filters modify the way a context variable is displayed in the output. As we saw earlier, they are applied using a pipe symbol directly after the variable. Do not put a space between the variable and the pipe.

To make the value of our fav_color variable be displayed entirely in capital letters, we can use the upper filter. In your mycompany/templates/example.html file, add the upper filter to the template fav_color template variable:

My favorite color is {{ fav_color|upper }}.

Browse to http://localhost:8000/demo/ and you should see this output:

My favorite color is BLUE

We've already seen how variable substitution takes place. So let's use a template tag to perform some simple logic to compare values.

We're going to use the ifequal tag to test if the fav_color context variable has the value blue. The tag uses this syntax: {% fequal <argument1> <argument2> %}

Change your mycompany/templates/example.html template file to look like this:

{% ifequal fav_color 'blue' %}
  My favorite color is {{ fav_color }}.
{% else %}
  My favorite color is not blue.
{% endifequal %}

Browse to http://localhost:8000/demo/ and you should see this output:

My favorite color is blue.

We can also use template tags to perform looping logic. It is very common in a template to loop over a set of values and perform an action on each value. Let's add a second color to our context variable and use a for loop in our template to write them out.

First, in your detail view, change your fav_color variable to a list of colors by using Python list syntax:

def detail(request):
    c = Context({ 'fav_color': ['blue','green'] })
    t = loader.get_template('example.html')
    rendered_template = t.render(c)
    return HttpResponse(rendered_template)

We'll use the for and endfor tags to loop through the list of favorite colors. Notice that we are using a variable called color to hold the value for each iteration of the loop. In this example, fav_color is our list of colors from the Context, and color is the current value in the loop. Make sure you change the variable in the curly brackets to use color.

Replace the contents of your mycompany/templates/example.html file with these lines:

{% for color in fav_color %}
  My favorite color is {{ color }}.<br/>
{% endfor %}

The resulting output will look like this:

My favorite color is blue.

My favorite color is green.

If you want to add comments to your templates, you have two options: single-line and multi-line comments. If you want to make a comment that only spans a single line, you can wrap your comment with a curly bracket and hash (pound sign) syntax:

{% for color in fav_color %}
  {# We are writing out a comment here #}
  My favorite color is {{ color }}.<br/>
{% endfor %}

If you want to make comments that span multiple lines, you can wrap your comments in a comment tag. Note that the comment tag requires an ending endcomment tag:

{% comment %}
My comment
is more than 
one line long
{% endcomment %}