Django templates

Time to display some data! Django gives us some helpful built-in template tags for that.

What are template tags?

You see, in HTML, you can’t really write Python code, because browsers don’t understand it. They know only HTML. We know that HTML is rather static, while Python is much more dynamic.

Django template tags allow us to transfer Python-like things into HTML, so you can build dynamic websites faster. Cool!

Display post list template

In the previous chapter we gave our template a list of posts in the posts variable. Now we will display it in HTML.

To print a variable in Django templates, we use double curly brackets with the variable’s name inside, like this:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

  1. {{ posts }}

Try this in your blog/templates/blog/post_list.html template. Replace everything from the second <div> to the third </div> with {{ posts }}. Save the file, and refresh the page to see the results:

Figure 13.1

As you can see, all we’ve got is this:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

  1. <QuerySet [<Post: My second post>, <Post: My first post>]>

This means that Django understands it as a list of objects. Remember from Introduction to Python how we can display lists? Yes, with for loops! In a Django template you do them like this:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

  1. {% for post in posts %}
  2.     {{ post }}
  3. {% endfor %}

Try this in your template.

Figure 13.2

It works! But we want the posts to be displayed like the static posts we created earlier in the Introduction to HTML chapter. You can mix HTML and template tags. Our body will look like this:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

  1. <div>
  2.     <h1><a href="/">Django Girls Blog</a></h1>
  3. </div>
  5. {% for post in posts %}
  6.     <div>
  7.         <p>published: {{ post.published_date }}</p>
  8.         <h1><a href="">{{ post.title }}</a></h1>
  9.         <p>{{ post.text|linebreaksbr }}</p>
  10.     </div>
  11. {% endfor %}

{% raw %}Everything you put between {% for %} and {% endfor %} will be repeated for each object in the list. Refresh your page:{% endraw %}

Figure 13.3

Have you noticed that we used a slightly different notation this time ({{ post.title }} or {{ post.text }})? We are accessing data in each of the fields defined in our Post model. Also, the |linebreaksbr is piping the posts’ text through a filter to convert line-breaks into paragraphs.

One more thing

It’d be good to see if your website will still be working on the public Internet, right? Let’s try deploying to PythonAnywhere again. Here’s a recap of the steps…

  • First, push your code to Github

{% filename %}command-line{% endfilename %}

  1. $ git status
  2. [...]
  3. $ git add --all .
  4. $ git status
  5. [...]
  6. $ git commit -m "Modified templates to display posts from database."
  7. [...]
  8. $ git push
  • Then, log back in to PythonAnywhere and go to your Bash console (or start a new one), and run:

{% filename %}PythonAnywhere command-line{% endfilename %}

  1. $ cd my-first-blog
  2. $ git pull
  3. [...]
  • Finally, hop on over to the Web tab and hit Reload on your web app. Your update should be live! If the blog posts on your PythonAnywhere site don’t match the posts appearing on the blog hosted on your local server, that’s OK. The databases on your local computer and Python Anywhere don’t sync with the rest of your files.

Congrats! Now go ahead and try adding a new post in your Django admin (remember to add published_date!) Make sure you are in the Django admin for your pythonanywhere site, https://yourname.pythonanywhere.com/admin. Then refresh your page to see if the post appears there.

Works like a charm? We’re proud! Step away from your computer for a bit – you have earned a break. :)

Figure 13.4