Template Inheritance
Resources:
In this video, we are going to learn how to implement the concept of template inheritance.
If you carefully observe the index page of our django application, you can find that index page consists of 3 different things.
- Head Component which consists of title, favicon and CSS links.
- Body Component which consists of navbar and the container.
- Footer Component
Now, in this project, we are going to build various pages which are going to contain similar components.
That means in most of the pages, that we will create later on in this course, they are going to have some components common. For example:
- The head component is going to be same in each and every pages.
- The footer component is also going to be same in each and every pages.
So, what we will do, we will create a base template that will contain the common components which are frequently used like head component, footer component and we will create a block in the base template so that the child template can place the dynamic content in that block.
That means, in the child template, we will inherit the base template due to which we will get all the commmon components of base template and we will put our dynamic content of child template in the blocks created in the base template.
I hope you have got some general idea of what we are going to do.
-
Move all the contents of index page to any text editor.
-
Create a new file in the template/mysite folder named 'base.html'
-
Copy all the content from the text editor and move it to base.html.
-
In the base.html, cut all the content which are present in the div container having class name container. [Don't cut the div tag, only cut the content inside the div tag]
-
Paste the content in the index.html page.
-
Create a block inside the div tag having class name "container".
{% block content %}
{% endblock content %}
In this way, we can create a block having name content. We will utilize this block in the child template for placing the content of the child template.
Now, in the child template i.e. index.html page, first of all, we need to inherit the base.html page
{% extends 'mysite/base.html' %}
In this way, we can inherit any base template in the child template.
Since, in the child template, we are required to use static files like images, so we need to load the static library.
{% load static %}
After that, we need to place the banner and about section in the block content.
{% block content %}
............
............
............
{% enblock content }
In this way, we can put any content in the block of base template from child template.
[Run the development server and see the changes]
In the base template, we can also create a title block and then we can use that title block in the child template for changing the title of the child template.
Replace the title tag of base.html with a block named "title".
{% block title %}
{% endblock title %}
In the child template i.e. index.html page, we will use that block to define the title of the child template page.
{% block title %}
<title>Book My Vaccine</title>
{% endblock title %}
In this way, we have learnt how to implement template inheritance in django. We can use this concept to create a reusuable template fragment and build web pages more rapidly.
In case you have made any mistake while writing the code, then I have attached the final version of base.html file and index.html file in the resources section, you can download it and copy & paste in your project files.
Final base.html code
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% block title %}
{% endblock title %}
<!-- Favicon -->
<link rel="icon" type="image/png" href="{% static 'images/favicon.png' %}" />
<!-- Bootstrap 5 CSS CDN Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous" />
<!-- Fontawesome Icon CDN Link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom CSS Link -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />
</head>
<body>
<header class="header_wrapper">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="/">
<img src="{% static 'images/logo.png' %}" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-stream navbar-toggler-icon"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav menu-navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/"><i class="fas fa-home"></i>
Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/login/"><i class="fas fa-sign-in-alt"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/signup/"><i class="fas fa-plus"></i> Signup</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container main-content mt-2 p-2">
{% block content %}
{% endblock content %}
</div>
<footer class="text-center">
Copyright © XYZ Privated Limited
</footer>
<!-- Bootstrap 5 JS CDN Link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
</body>
</html>
Final index.html code
{% extends 'mysite/base.html' %}
{% load static %}
{% block title %}
<title>Book My Vaccine</title>
{% endblock title %}
{% block content %}
<!-- Banner Starts Here -->
<section id="home" class="home">
<div class="banner_wrapper wrapper pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-1 order-2 p-5">
<h3>Save Life</h3>
<h2>Get Vaccinated</h2>
<p>Vaccines can lower your chance of getting certain diseases. Vaccines work with your body’snatural defenses to help you safely develop immunity to disease. This lowers your chances of getting certain diseases and suffering from their complications.
</p>
<a href="/accounts/login/"
class="main-btn mt-4 fill-btn">Schedule Vaccination</a>
</div>
<div class="col-md-6 order-md-2 order-1 mb-md-0 b-5">
<div class="top-right-sec">
<div class="banner-img">
<img src="{% static 'images/banner-image.png' %}" alt="Docter with Syringe">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper mt-1 pb-0">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-success">
<i class="fas fa-syringe"></i>
</div>
<h4>Vaccine</h4>
<p>Get different types of vaccines for various infections or disease like Covid-19, Polio, Chickenpox, Typhoid, Yellow Fever, Rabies etc.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-primary">
<i class="fas fa-map-marker-alt"></i>
</div>
<h4>Center</h4>
<p>Book your vaccine from your nearest vaccination center. This saves your time, money and energy for getting vaccinated as soon as possible.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-warning">
<i class="fas fa-calendar"></i>
</div>
<h4>Campaign</h4>
<p>Choose your desired campaign and book a slot based on your availabity. There's no need to stay on line and become a part of crowd.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Banner Ends Here -->
<!-- About Starts Here -->
<section id="about" class="about_wrapper wrapper">
<div class="container text-center">
<h2>Our Journey</h2>
<p>We launched this platform on 2020 and so far, we have onboarded various hosiptals, collaborated with various local health authorities for conduction mass vaccination campaign. We are committed to make a healthy society through our platform. Our mission is to help every single organization involved in vaccination drives.
</p>
<div class="row">
<div class="col-md-6 mb-md-0 mb-5">
<div class="postion-relative">
<img src="{% static 'images/about-image.jpg' %}" alt="Nurse with syringe" class="about-img img-fluid">
</div>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center">
<div class="card">
<div class="row text-center">
<div class="col-6">
<h4>50+</h4>
<p>Vaccines Available</p>
</div>
<div class="col-6">
<h4>500+</h4>
<p>Vaccination Center</p>
</div>
</div>
<div class="row text-center mt-4">
<div class="col-6">
<h4>600+</h4>
<p>Campaign Created</p>
</div>
<div class="col-6">
<h4>5000+</h4>
<p>Successful Vaccination</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Ends Here -->
{% endblock content %}
At last, push the changes to remote repository
git add .
git commit -m "Added Views and Configured Template"
git push origin main