Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add Site Header, Site Title, Index Title in a Django Project?
Django templates use a powerful template system that allows you to create reusable layouts with dynamic content. Adding a site header, site title, and index title helps users navigate and understand your website's purpose. This tutorial shows how to implement these elements using Django's template inheritance system.
Template Structure Overview
Django templates use template blocks to define sections that can be overridden in child templates. The basic approach involves creating a base template with placeholder blocks, then extending it in specific pages.
Step 1: Create Base Template
First, create a base template that defines the overall structure ?
<!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 Django Site{% endblock %}</title>
</head>
<body>
<header>
<h1>{% block site_header %}Welcome to My Site{% endblock %}</h1>
<nav>
<a href="/">Home</a> | <a href="/about/">About</a>
</nav>
</header>
<main>
<h2>{% block page_title %}{% endblock %}</h2>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2024 My Django Project</p>
</footer>
</body>
</html>
Step 2: Create Index Template
Extend the base template and override specific blocks ?
{% extends "base.html" %}
{% block title %}Home - My Django Site{% endblock %}
{% block site_header %}My Awesome Django Project{% endblock %}
{% block page_title %}Welcome to Our Homepage{% endblock %}
{% block content %}
<p>This is the main content area of your homepage.</p>
<p>You can add any HTML content here that will appear below the page title.</p>
<div class="features">
<h3>Featured Content</h3>
<ul>
<li>Feature 1: Dynamic content loading</li>
<li>Feature 2: Responsive design</li>
<li>Feature 3: User-friendly navigation</li>
</ul>
</div>
{% endblock %}
Step 3: Django Views Configuration
In your views.py, render the templates ?
from django.shortcuts import render
def index(request):
context = {
'dynamic_title': 'Dynamic Page Title',
'user_name': 'John Doe'
}
return render(request, 'index.html', context)
def about(request):
return render(request, 'about.html')
Understanding Template Blocks
| Block Name | Purpose | Location |
|---|---|---|
title |
Browser tab title | <head> section |
site_header |
Main site heading | <header> section |
page_title |
Page-specific heading | <main> content area |
content |
Main page content | <main> content area |
Advanced Example with Dynamic Content
You can also pass dynamic data from views to templates ?
{% extends "base.html" %}
{% block title %}{{ page_title }} - {{ site_name }}{% endblock %}
{% block site_header %}{{ site_name }}{% endblock %}
{% block page_title %}{{ page_title }}{% endblock %}
{% block content %}
<p>Hello, {{ user_name }}! Welcome back.</p>
<p>Today's date: {{ current_date|date:"F d, Y" }}</p>
{% endblock %}
Key Benefits
Template inheritance provides several advantages for Django projects:
Consistency All pages share the same base structure
Maintainability Changes to the base template affect all pages
Flexibility Each page can customize specific sections
DRY Principle Avoid repeating common HTML structure
Conclusion
Using Django template inheritance with blocks for site header, title, and index content creates a maintainable and consistent website structure. This approach allows you to define common elements once while providing flexibility for page-specific customizations.
964 Views
