If you use base.html, you can avoid repeating the same HTML code across multiple templates, making your project easier to maintain.
First, create a base.html file inside your app's "templates" folder which contains the common HTML, CSS, and JS that the entire site will use. It should look something like the following, and include {% block content %} and {% endblock %} tags inside the <body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Note: Here, we use the {% block %} tag to create a placeholder in the base template for inserting content.
In other HTML templates, such as home.html or about.html, include the base template using the {% extends 'base.html' %} tag.
Ex:
{% extends './base.html' %}
{% block content %}
<p> Now add your body Content with HTML tags, add JS scripts etc</p>
{% endblock %}
If you place base.html in a different location within your templates directory or outside of it, you need to specify its path using the following format.
Example directory structure
dir1/
template.html
base2.html
my/
base3.html
base1.html
To add that path
{% extends "./base2.html" %}
{% extends "../base1.html" %}
{% extends "./my/base3.html" %}
That's all.
1. Create a Template Directory: Create a directory called templates in your project's root directory (where your manage.py file is located). The structure should look like this:
myproject/
myapp1/
myapp2/
templates/
base.html
manage.py
settings.py
2. Update settings.py: Make sure your settings.py file is configured to recognize the templates directory. You need to add the path to the TEMPLATES setting:
import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Create Your Base Template: In the templates directory, create your base.html file and add your HTML structure. This will be the template that other templates will extend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Project{% endblock %}</title>
</head>
<body>
<header>
<h1>My Project</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2024 My Project</p>
</footer>
</body>
</html>
4. Extend the Base Template in Your App Templates: In the templates of your individual apps, you can extend this base template. For example, in myapp1/templates/myapp1/home.html
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h2>Welcome to My App 1</h2>
<p>This is the home page content.</p>
{% endblock %}
Render Templates in Views: In your views, render the templates as usual. For example:
from django.shortcuts import render
def home_view(request):
return render(request, 'myapp1/home.html')
That's all.
© 2024 Webapptiv. All rights reserved.