Django Blog #16: Creating Templates for Views

by Alex
Django Blog #16: Creating Templates for Views

So, the views and URL templates for the blog application have been created. Now we need to add templates to display the posts in a way that makes them easy to read for users. Create the following directories and files in the blog application folder:

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

This file structure is for templates. The base.html file includes the main HTML code for the site. It divides the content between the main content area and the sidebar. The list.html and detail.html files will inherit base.html to render the list of posts and the post view, respectively. Django has a powerful template language that allows you to designate exactly how data will be displayed. It is based on template tags, variables and filters:

  • Tags control rendering of the template and look like this {% tag %}.
  • Template variables are replaced by values when they are rendered and look like this {{ variable }}.
  • Filters allow you to change the variables displayed and look like this {{ variable|filter }}.

All of the built-in template tags and filters are listed here https://doc.djangoproject.com/en/2.0/ref/templates/builtins/. Let’s edit the base.html file and add the following code:

{% load static %}  
  
<!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 static %} tells Django to load the static template tags provided by the django.contrliv.staticfiles application, which can be found in INSTALLED_APPS. Once the filter is loaded, the {% static %} template can be used throughout the entire template. You can use the filter to include static files, such as the blog.css file. It is located in the code in the static/ folder. Copy the styles from the code below to the same place where the project is stored to apply the CSS styles.

blog/ 
  static/ 
    css/ 
      blog.css

blog.css

* { 
    box-sizing:border-box  
} 
  
a { 
    text-decoration: none  
} 
  
body,  
html { 
    height: 100%  
  margin: 0 
} 
  
h1 { 
    border-bottom: 1px solid lightgrey  
  padding-bottom: 10px  
} 
  
.date,  
.info { 
    color: grey  
} 
  
.comment:nth-child(even) { 
    background-color: whitesmoke  
} 
  
#content,  
#sidebar { 
    display: inline-block  
  float: left  
  padding: 20px  
  height: 100%  
} 
  
#content { 
    width: 70%  
} 
  
#sidebar { 
    width: 30%  
  background-color: lightgrey  
}

Two {% block %} tags are also used. They tell Django to define a block in this area. Inherited templates can fill these blocks with content. They are used to define title and content blocks. Let’s edit the post/list.html file to look like this:

{% 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 %}

The {% extends %} template tag tells Django to inherit the blog/base.html template. Then the title and content blocks of the base template are filled with content. The posts are searched, resulting in their title, date, author, and body, including a link in the title to the canonical URL of the post. Two template filters are applied to the body: truncateword trims the value to a given number of words, and linebreaks converts the output to HTML lines with hyphenation. You can combine as many pattern filters as you like. Each will be applied to the output of the previous one.

Open a terminal and run the python manage.py runserver command to start the development server. Open https://127.0.0.1:8000/blog/ in your browser to see how everything works. To display the posts here, they must have a Published status. The following will appear: Now you need to edit the post/detail.html file:

{% 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 %}

Finally, you can go back to the browser and click on the title of any post to see what it looks like: And look at the URL – its structure should be roughly /blog/2019/11/23/who-was-django-reinhardt/. That means the links are suitable for SEO optimization.

Related Posts

LEAVE A COMMENT