This is our sixth article in Django, and in this article we are going to talk about Django Template Inheritance Tutorial. Django Template Inheritance is one of the best features that you can use.
Read Django Articles
1: Django Introduction & Installation
4: Django Templates Introduction
What is Django Templates Inheritance ?
Templates tend to have common sections that are equally used across multiple instances. For example, the header and footer sections on all templates rarely change, whether a project has 5 or 100 templates. Other template sections like menus and advertisements also fall into this category of content that’s constant across multiple templates. All of this can lead to repetition over multiple templates, which can be avoided by creating template inheritance. with Django template inheritance you can define common sections on separate templates and reuse them inside other templates. This process makes it easy to create and manage a project’s templates because a single template update takes effect on all templates. reusable Django templates also allow you to define page blocks to override content on a page-by-page basis. This process makes a project’s templates more modular because you define top-level blocks to establish the overall layout and define content on a page-by-page basis.
OK first of all you need to create a project in Django, we have already covered the creation of the Django project in our previous article Django Introduction & Installation. but you can use this command for creating of Django Project.
|
1 |
django-admin startproject MyProject |
After creation of the Django Project, you need to migrate your Django Project.
|
1 2 |
cd MyProject python manage.py migrate |
Now we need to create an App, you can read the complete article about Django Apps in this link Django Apps & URL Routing . i have named my App as news, but you can name it what ever you want.
|
1 |
python manage.py startapp news |
Also you need to add your newly created app in the Django settings.py INSTALLED_APPS. make sure that always do this process after creating a new App.
|
1 2 3 4 5 6 7 8 9 10 |
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'contact', 'news', ] |
OK before this we have talked that about how you can use templates in django, you can check this article Django Templates Introduction. but you need to just create a templates folder in your project and you need to add some html files. basically we are going to create three html files. and also don’t forget to add your templates folder in your settings.py DIRS Section.
home.html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> <h1>Codeloop.org , this is our home page</h1> </body> </html> |
about.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>About</title> </head> <body> <h1>Codeloop.org, this is our about page</h1> </body> </html> |
contact.html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contact</title> </head> <body> <h1>Welcome to codeloop.org , this is our contact page</h1> </body> </html> |
You can see that in these three html files, we are duplicating the code, and one of the main concept in Django is DRY(Don’t Repeat Yourself). now for solving of this problem we are going to use django Template Inheritance. basically we are going to create another html file at name of base.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> </head> <body> {% block body %} {% endblock %} </body> </html> |
Now we are going to change our three html files.
home.html
|
1 2 3 4 5 6 7 8 9 10 |
{% extends 'base.html' %} {% block title %} Home {% endblock %} {% block body %} <h1>Codeloop.org, this is our home page</h1> {% endblock %} |
about.html
|
1 2 3 4 5 6 7 8 9 10 |
{% extends 'base.html' %} {% block title %} About {% endblock %} {% block body %} <h1>Codeloop.org, this is our about page</h1> {% endblock %} |
contact.html
|
1 2 3 4 5 6 7 8 9 10 |
{% extends 'base.html' %} {% block title %} Contact {% endblock %} {% block body %} <h1>Codeloop.org, this is our contact page</h1> {% endblock %} |
So now open your views.py and we need to add our view functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
from django.shortcuts import render def home(request): return render(request, "home.html") def about(request): return render(request, "about.html") def contact(request): return render(request, "contact.html") |
Also you need to create your urls, you can read this article for url routing Django Apps & URL Routing . but just create a new python file in your news app at name of urls.py and add these codes.
|
1 2 3 4 5 6 7 8 9 10 |
from django.urls import path from .views import home, about,contact urlpatterns = [ path('', home, name = 'home'), path('about/', about, name = 'about'), path('contact/', contact, name = 'contact'), ] |
And also you need to include your app urls.py in your project urls.py file.
|
1 2 3 4 5 6 7 8 |
from django.contrib import admin from django.urls import path,include urlpatterns = [ path('admin/', admin.site.urls), path('', include('news.urls')), ] |
So now you can run your project and see the urls
|
1 |
python manage.py runserver |
http://localhost:8000/
http://localhost:8000/about/
http://localhost:8000/contact/
Subscribe and Get Free Video Courses & Articles in your Email