Creating templates for your views

We have created views and URL patterns for our application. Now it's time to add templates to display posts in a user-friendly way.

Create the following directories and files inside your blog application directory:

templates/
    blog/
        base.html
        post/
            list.html
            detail.html

This will be the file structure for our templates. The base.html file will include the main HTML structure of the website and divide the content into a main content area and a sidebar. The list.html and detail.html files will inherit from the base.html file to render the blog post list and detail views respectively.

Django has a powerful template language that allows you to specify how data is displayed. It is based on template tags, which look like {% tag %} template variables, which look like {{ variable }} and template filters, which can be applied to variables and look like {{ variable|filter }}. You can see all built-in template tags and filters in https://docs.djangoproject.com/en/1.8/ref/templates/builtins/.

Let's edit the base.html file and add the following code:

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
  <div id="content">
    {% block content %}
    {% endblock %}
  </div>
  <div id="sidebar">
    <h2>My blog</h2>
      <p>This is my blog.</p>
  </div>
</body>
</html>

{% load staticfiles %} tells Django to load the staticfiles template tags that are provided by the django.contrib.staticfiles application. After loading it, you are able to use the {% static %} template filter throughout this template. With this template filter, you can include static files such as the blog.css file that you will find in the code of this example, under the static/ directory of the blog application. Copy this directory into the same location of your project to use the existing static files.

You can see that there are two {% block %} tags. These tell Django that we want to define a block in that area. Templates that inherit from this template can fill the blocks with content. We have defined a block called title and a block called content.

Let's edit the post/list.html file and make it look like the following:

{% extends "blog/base.html" %}

{% block title %}My Blog{% endblock %}

{% block content %}
  <h1>My Blog</h1>
  {% for post in posts %}
    <h2>
      <a href="{{ post.get_absolute_url }}">
        {{ post.title }}
      </a>
    </h2>
    <p class="date">
      Published {{ post.publish }} by {{ post.author }}
    </p>
    {{ post.body|truncatewords:30|linebreaks }}
  {% endfor %}
{% endblock %}

With the {% extends %} template tag, we are telling Django to inherit from the blog/base.html template. Then we are filling the title and content blocks of the base template with content. We iterate through the posts and display their title, date, author, and body, including a link in the title to the canonical URL of the post. In the body of the post, we are applying two template filters: truncatewords truncates the value to the number of words specified, and linebreaks converts the output into HTML line breaks. You can concatenate as many template filters as you wish; each one will be applied to the output generated by the previous one.

Open the shell and execute the command python manage.py runserver to start the development server. Open http://127.0.0.1:8000/blog/ in your browser and you will see everything running. Note that you need to have some posts with status Published in order to see them here. You should see something like this:

Creating templates for your views

Then, let's edit the post/detail.html file and make it look like the following:

{% extends "blog/base.html" %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
  <h1>{{ post.title }}</h1>
  <p class="date">
    Published {{ post.publish }} by {{ post.author }}
  </p>
  {{ post.body|linebreaks }}
{% endblock %}

Now, you can go back to your browser and click on one of the post titles to see the detail view of a post. You should see something like this:

Creating templates for your views

Take a look at the URL. It should look like /blog/2015/09/20/who-was-django-reinhardt/. We have created a SEO friendly URL for our blog posts.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset