Chapter 7: Template System
7.2 Template Inheritance
Creating Base Templates
Template inheritance is one of the most powerful features of the Django template system. It allows you to create a base template that other templates can inherit and extend, avoiding duplicate code.
First, create a base template base.html:
html
<!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 Website{% endblock %}</title>
{% block extra_css %}{% endblock %}
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}
<!-- Child templates will fill content here -->
{% endblock %}
</main>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
{% block extra_js %}{% endblock %}
</body>
</html>Block Tags
The block tag defines parts that can be overridden in child templates. Multiple blocks can be defined in the base template:
html
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Default Title{% endblock %}</title>
{% block meta %}{% endblock %}
{% block css %}{% endblock %}
</head>
<body>
<div id="header">
{% block header %}
<h1>My Website</h1>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="footer">
{% block footer %}
<p>Copyright © 2025</p>
{% endblock %}
</div>
</body>
</html>Template Inheritance Chain
Child templates use the extends tag to inherit the base template and use block tags to override or extend blocks in the parent template:
html
<!-- blog_list.html -->
{% extends "base.html" %}
{% block title %}Blog List - {{ block.super }}{% endblock %}
{% block content %}
<h2>Latest Articles</h2>
{% for article in articles %}
<article>
<h3><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h3>
<p>{{ article.summary }}</p>
<p class="meta">Published on {{ article.publish_date|date:"Y-m-d" }}</p>
</article>
{% empty %}
<p>No articles available.</p>
{% endfor %}
{% endblock %}
{% block sidebar %}
{{ block.super }}
<div class="widget">
<h3>Categories</h3>
<ul>
{% for category in categories %}
<li><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>
</div>
{% endblock %}Practical Example: Blog Layout
Here's a complete blog layout example:
Base template base.html:
html
<!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 Blog{% endblock %}</title>
<link rel="stylesheet" href="/static/css/style.css">
{% block extra_head %}{% endblock %}
</head>
<body>
<div class="container">
<header class="header">
{% block header %}
<h1><a href="/">My Blog</a></h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/categories/">Categories</a></li>
<li><a href="/tags/">Tags</a></li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
{% endblock %}
</header>
<div class="main-content">
{% block content %}{% endblock %}
</div>
<aside class="sidebar">
{% block sidebar %}
<div class="widget">
<h3>About Me</h3>
<p>This is a brief introduction about me.</p>
</div>
{% endblock %}
</aside>
<footer class="footer">
{% block footer %}
<p>© 2025 My Blog. All rights reserved.</p>
{% endblock %}
</footer>
</div>
</body>
</html>Article list template article_list.html:
html
{% extends "base.html" %}
{% block title %}Article List - {{ block.super }}{% endblock %}
{% block content %}
<div class="article-list">
<h2>Latest Articles</h2>
{% for article in articles %}
<article class="article-item">
<h3><a href="{% url 'article_detail' article.pk %}">{{ article.title }}</a></h3>
<div class="article-meta">
<span>Author: {{ article.author }}</span>
<span>Published on: {{ article.publish_date|date:"Y-m-d H:i" }}</span>
</div>
<div class="article-summary">
<p>{{ article.content|truncatewords:50 }}</p>
</div>
</article>
{% empty %}
<p>No articles available.</p>
{% endfor %}
</div>
{% endblock %}Article detail template article_detail.html:
html
{% extends "base.html" %}
{% block title %}{{ article.title }} - {{ block.super }}{% endblock %}
{% block content %}
<article class="article-detail">
<h2>{{ article.title }}</h2>
<div class="article-meta">
<span>Author: {{ article.author }}</span>
<span>Published on: {{ article.publish_date|date:"Y-m-d H:i" }}</span>
<span>Category: {{ article.category }}</span>
</div>
<div class="article-content">
{{ article.content|linebreaks }}
</div>
<div class="article-tags">
{% for tag in article.tags.all %}
<span class="tag">{{ tag.name }}</span>
{% endfor %}
</div>
</article>
{% endblock %}Summary
Template inheritance is a core feature of the Django template system:
- ✅ Use the
extendstag to inherit base templates - ✅ Define overrideable areas with
blocktags - ✅ Use
block.superto preserve parent template content - ✅ Achieve code reuse and reduce duplicate writing
- ✅ Unify website layout and styling
Proper use of template inheritance can significantly improve frontend development efficiency.
Next
We will learn about custom template filters and tags.