How to create a simple blog using Django 3 - part 5

/ #Django


We have data in our database and we know how to add and edit it. Let's continue building our blog by creating the necessary templates.

Creating the base template

Our blog (and mosts websites) have one base template. This includes the header, menu, footer and so on and in it, we create a place where sub-templates can put their content.

Go to the root of your folder and create a new folder called "templates". Inside the templates folder, create a new file called "base.html".

When the file is created, add the following content:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<title>My blog</title>
		
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
	</head>
	
	<body>
		<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
			<div class="navbar-brand">
				<a class="navbar-item" href="/">My blog</a>
				
				<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
					<span aria-hidden="true"></span>
					<span aria-hidden="true"></span>
					<span aria-hidden="true"></span>
				</a>
			</div>
		</nav>
		
		<section class="section">
			{% block content %}
			{% endblock %}
		</section>
	</body>
</html>

Most of the code should look familiar if you know basic HTML. The only "django-ish" thing here is the "block content" code inside the section element. This makes it possible for other templates to extend this base template, and put content inside here.

The front page template

Create one more file inside the "templates" folder called "index.html". This will be the front page for our blog, and it should look like this:

{% extends 'base.html' %}

{% block content %}
	<div class="container splitter">
		<div class="blog-list">
			{% for post in posts %}
				<article class="post">
					<a href="{% url 'post_detail' post.slug %}">
						<h2 class="subtitle">{{ post.title }}</h2>

						<p class="info">
							<time datetime="{{ post.created_at|date:"y-m-d" }}">My name / {{ post.created_at|date:"M d, y" }}
						</p>

						<p class="description">
							{{ post.intro }}
						</p>
					</a>
					
					<a href="{% url 'post_detail' post.slug %}" class="readmore">Read more</a>
				</article>
			{% endfor %}
		</div>
		
		<aside class="splitter-aside">
			<div class="categories">
				<h4>Categories</h4>
			</div>
		</aside>
	</div>
{% endblock %}

The first thing we do in this template is to tell it to extend the base template we just created. As you can see, we also use the "block content" here which tells Django to take this content and put it in the block content of the base file.

Inside this block, we use a for-loop to iterate through all of the blog posts.

  • {% url 'post_detail' post.slug %} - This will generate a url to the detail page of a post. I will explain more about this later. Just know that 'post_detail' is the name of the route and we pass the slug of the post as a parameter.
  • {{ post.title }} - This will print the title of the blog post here.
  • "{{ post.created_at|date:"y-m-d" }} - This will print the created_at field. We pipe the date into a filter called "date" and we want the y-m-d values which stands for "year", "month", "day".

We don't need to do anything more about the sidebar yet. We will come back to it.

The detail view

We will need one more template for the detail view of a post. Inside the "blog" folder, create a new folder called "templates" and inside that folder, create a file called detail.html. Put the following content inside:

{% extends 'base.html' %}

{% block content %}
	<div class="container splitter">
		<article class="content blog-detail">
			<h1>{{ post.title }}</h1>
			
			<p class="info">
				<time datetime="{{ post.created_at|date:"y-m-d" }}">Tim Niets / {{ post.created_at|date:"M d, y" }}</time>
			</p>
			
			<hr>
			
			<p class="description">
				{{ post.intro }}
			</p>
			
			<div>
				{{ post.body|safe }}
			</div>
		</article>
		
		<aside class="splitter-aside">
			<div class="categories">
				<h4>Categories</h4>
			</div>
		</aside>
	</div>
{% endblock %}

Most of the code here should look familiar as it's very similar to the front page of our blog. The only new thing here is this: {{ post.body|safe }}. |safe makes it possible for us to add HTML to the content of our blog posts and it will be printed as elements instead of HTML code.

Settings

Before we continue, we need to tell Django where to look for the templates (where the templates folder are located).

Open up your "myblog/settings.py" file and find a block called "TEMPLATES". Inside the "DIRS" options, add this line:

os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, '')

Now, Django will know that it can look for templates in the root of our project and inside the "templates" folder which is located in the root.

Summary

In this part we have set up some of the templates we're going to need for this blog. We'll be creating more templates later.

In the next part of this series, we'll create the views we need to make use of the templates we created in this part.

How to create a simple blog using Django 3 series

Part 1 - Installation
Part 2 - File structure
Part 3 - Database models
Part 4 - Admin interface
Part 5 - Creating some templates
Part 6 - Views and URLs
Part 7 - Category views
Part 8 - Media files
Part 9 - Comments
Part 10 - Search


Comments

No comments yet...

Add comment

Subscribe to my newsletter