Create a blog application with django, part 6: create django templates

 Frank    Feb. 9, 2020    4 min read    6,247

Now that We have created views and URL patterns for the blog application. It's time to create the HTML templates to display posts in a user-friendly manner. The render() function looks for HTML templates inside a directory called templates inside your app directory.

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

(venv) mypc:~/venv/mysite/blog$ mkdir templates

$ cd templates

$ touch base.html

$ mkdir blog

$ cd blog

$ touch post_list.html post_detail.html


# mysite/blog/templates


templates/

   base.html
   blog/
       post_detail.html
       post_list.html

The preceding structure 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 the main content area and a sidebar. The post_list.html and post_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, template variables, and template filters:

  • Template tags control the rendering of the template and look like {% tag %}.
  • Template variables get replaced with values when the template is rendered and look like {{ variable }}.
  • Template filters allow you to modify variables for display and look like {{ variable|filter }}.

You can see all about Django built-in template tags and filters here .

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

<!-- mysite/blog/templates/base.html -->

{% 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 that are provided by the django.contrib.staticfiles application, which is contained in the INSTALLED_APPS setting. After loading it, you are able to use the {% static %} template tag throughout this template. With this template tag, you can include static files, such as the blog.css file. This file doesn’t exist yet, but we’ll create it soon.

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 in 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:

<!-- mysite/blog/templates/blog/post_list.html -->

{% extends "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 tell Django to inherit from the 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 preceding one.

To create the blog.css file. First, we have to create a directory called static in your blog application directory. Django will look for static files there, similarly to how Django finds templates inside blog/templates/.

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

(venv) mypc:~/venv/mysite/blog$ mkdir static

$ cd static

$ mkdir css

$ cd css

$ touch blog.css

# mysite/blog/static


static/

   css/
       blog.css

Let's edit the blog.css file and make it look like this:

/* blog/static/css/blog.css */

body {
   margin:0;
   padding:0;
   font-family:helvetica, sans-serif;
}

a {
   color:#00abff;
   text-decoration:none;
}

h1 {
   font-weight:normal;
   border-bottom:1px solid #bbb;
   padding:0 0 10px 0;
}

h2 {
   font-weight:normal;
   margin:30px 0 0;
}

#content {
   float:left;
   width:60%;
   padding:0 0 0 30px;
}

#sidebar {
   float:right;
   width:30%;
   padding:10px;
   background:#efefef;
   height:100%;
}

p.date {
   color:#ccc;
   font-family: georgia, serif;
   font-size: 12px;
   font-style: italic;
}

Open the shell and execute the python manage.py runserver command to start the development server. Visit 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 the Published status to show them here. You should see something like this:

Responsive image

Then, let's edit the post_detail.html file:

<!-- mysite/blog/templates/blog/post_detail.html -->

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

Return to your browser and click on one of the post titles to take a look at the detail view of a post. You should see something like this:

Responsive image

Take a look at the URL, it should be /blog/2020/1/11/python-my-favourite-programming-language/. We have designed SEO-friendly URLs for our blog posts.

That's it for now. The next tutorial is to add pagination to our blog.

If you like my content, please consider buying me a coffee.
Thank you for your support!

Buy me a coffeeBuy me a coffee

Related posts