Working with template inheritance
This episode covers :-
1.) How to setup a base app.
2.) How the template inheritance works.
- Setup :-
Terminal
cp -fr 09-Hello-World 11-Template-Inheritance
cd 11-Template-Inheritance
source ../venv/bin/activate
- Creating a base app :-
Create a new app:
Terminal
python manage.py startapp base
You should now have this kind of folder structure:
Folder structure
11-Template-Inheritance
├── base < # new app
├── db.sqlite3
├── manage.py
├── myapp
└── mysite
Edit mysite app settings.py file and add the base app to the INSTALLED_APPS list:
mysite/settings.py
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
'base', # < here
'myapp',
]
- Extending templates :-
Create a base.html file in the base app templates folder:
Template file location
11-Template-Inheritance
├── base
│ ├── templates <-- here
│ │ └── base <-- here
│ │ └── base.html <-- here
...
Add these lines to the base.html file:
base/templates/base/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>MySite</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
Replace myapp index.html file contents with these lines:
myapp/templates/myapp/index.html
{% extends 'base/base.html' %}
{% block content %}
<h1>Hello from myapp index view!</h1>
{% endblock %}
Run the development server:
Terminal
python manage.py runserver
Visit http://127.0.0.1:8000 to see the results:
Right-click the web page to view the page source:
Page source
<!DOCTYPE html>
<html lang="en">
<head>
<title>MySite</title>
</head>
<body>
<div id="content">
<h1>Hello from myapp index view!</h1>
</div>
</body>
</html>
- In Details :-
Let’s take a closer look on how this works.
Parent and child templates
11-Template-Inheritance
├── base
│ ├── templates
│ │ └── base
│ │ └── base.html # < parent template
├── myapp
│ ├── templates
│ │ └── myapp
│ │ └── index.html # < child template
With template inheritance we can have a base “skeleton” that has blocks that child templates can override.
In base.html we define a content block:
base/templates/base/base.html
<div id="content">
{% block content %}{% endblock %}
</div>
In index.html we also define a content block:
myapp/templates/myapp/index.html
{% extends 'base/base.html' %}
{% block content %}
<h1>Hello from myapp index view!</h1>
{% endblock %}
This block overrides the content block in the base template.
{% extends 'base/base.html' %} tells the templating engine that this template extends another template. In this case the index.html template extends the base.html template.
{% %} marks a tag. These provide several kinds of features like for loops and inheritance related functionality.
Now we don’t have to specify the common boilerplate markup for every page. This is one of the benefits you have with dynamic systems like Django.
Summary
- You can create a base app to hold things that are common to all apps like the main HTML skeleton.
- Template inheritance allows you to define blocks that child templates can override.
No comments:
Post a Comment
If you have any doubts. Please let me know.