We will continue to build our blog app where we left in the post writing-your-first-blog-app-in-django-part-6.
In this post we will look at how we can extends templates in django.
Let’s think about a simple scenario.Imagine in our application we have not one template but say 20 or 25 templates.Now in each of those templates the way things are going here in the way we are doing things we’ve had all of the stuff like head,html tags and maybe footer also.
Now suppose we want to change head at some point while developing app,so we have to go to each file and have to change head section in each template.So we have to do a lot of work and it is probably not the best way of arranging our templates.So we can overcome this problem by extending the base template.So the idea is we should have a base template which has all of the global stuff that’s on every template head,the stuff at the top maybe the footer as well.All that contents goes in some kind of base global template.After that individual templates of our project can extends that base template so that they have base template around them and then we nest the specific content for that individual template inside it.
So first to create a base template create a directory called templates in the base directory inside our project and inside that templates directory create a html template called base_layout.html as following:
In that html template file we are going to add content that is going to appear in every single page of our application.
So change that base_layout.html file as below:
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<link rel="stylesheet" href="{% static 'style.css'%}">
</head>
<body>
<div class="wrapper">
{% block content %}
<!-- Inside this content for every page goes on -->
{% endblock %}
</div>
</body>
</html>
and after this change our previous articles_list.html file as below:
{% extends 'base_layout.html' %}
{% block content %}
<h1>
Articles List</h1>
<br>
<div class=" articles ">
{% for article in articles %}
<div class="article ">
<h2><a href="# ">{{ article.title }}</a></h2>
<p>{{ article.snippet }}</p>
<p>{{ article.date }}</p>
<br>
</div>
{% endfor %}
</div>
{% endblock %}
So it wil extends from the base_layout.html file which we have shown in first line of code.After that run the server,you will see the same screen as earlier.
Now after this we have a page which shows all of the articles,but we want to put a link inside every article which when clicked will open the full article.So how to do that?
To do that we will use our slug field which we have defined in our model.Slug field of the particular article is the field which we append after localhost to go to that particular article.Let’s check how to do that?
To achieve that goal we are going to use the concept of url and regex in url.So if you does not know about them first go through this https://padhle.com/url-in-django/ and read about them.We are going to explain this concept about how to go to a particular full article in next post.
This is all about how to use concept of extending base template into another templates for time saving.