How to use extends from Django template tags
A Django template is a text document, like HTML, that adds jinja syntax.
The syntax of the Django template language involves four constructs, which are {{ }} or {% %}.
extends in Django signals that a template inherits a parent template.
For example:
{% extends 'base.html' %}
{% extends 'app/base.html' %}
{% extends 'home.html' %}
Step 1: Install Django
pipis the package installer for Python.
pip install pipenv
pipenv shell
pipenv install django
Step 2
django-admin startproject Extends ./
python manage.py startapp
codebase
Step 3
python manage.py migrate
python manage.py runserver
Step 4
Go to settings.py and enter the following.
settings.py helps register your app and packages that are being installed, and even writes rules.
# Application definitionINSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','codebase',]
Step 5
In the views.py file, add the following code.
This file is used to create functions or classes that visualize how a route will operate.
views.py
from django.shortcuts import renderdef home(request):life = 'it is just my passion to code out the world'goals = 'to get a Tech Job'context = {'life': life,'goals': goals}return render(request, 'app/home.html', context)
Step 6
In the codebase app, create a folder and name it “templates.”
- Inside the “templates” folder, create another folder and name it “app.”
- Then, inside the “app” folder, create the
base.htmlandhome.htmlfiles.
base.html
base.htmlwill be the parent template file that will be inherited.
<!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"><title>Django Template</title><!-- bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></head><body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">Extend</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div></nav><!-- block is used for overriding specific parts of a template -->{% block content %}{% endblock %}</body></html>
Step 7
We will extend the base.html file, inheriting some parts of it that are not under the {% block content %}
{% endblock %} tags.
home.html
<!-- here we extended base.html -->extends "app/base.html" %}<!-- block is used for overriding specific parts of a template -->{% block content %}<!-- double curly braces is used to pull data from the database --><div class="container mt-4"><p>passion: {{life}}</p><p>goals: {{goals}}</p></div><!-- end of block -->{% endblock %}
Step 8
In the “urls.py” file in the Extends folder, add the following code.
The urls.py file is used to add different url routes.
urls.py
from django.contrib import adminfrom django.urls import path# importing the views.py filefrom views import homeurlpatterns = [path('admin/', admin.site.urls),path('', home, name="home")]
Step 9
Then, run the following commands to make migrations to the code:
python manage.py makemigrations
python manage.py migrate
Step 10
Run the command below to start the server:
python manage.py runserver
Then, go to http://127.0.0.1:8000 to access the homepage.
