Template extending
Part of this chapter is based on tutorials by Django Girls Tutorial : https://tutorial.djangogirls.org
Another nice thing Django has for you is template extending. What does this mean? It means that you can use the same parts of your HTML for different pages of your website.
Templates help when you want to use the same information or layout in more than one place. You don't have to repeat yourself in every file. And if you want to change something, you don't have to do it in every template, just one!
Create a base template
A base template is the most basic template that you extend on every page of your website.
Let's create base.html file in myfirstgame/templates/myfirstgame directory.
myfirstgame
└───templates
└───myfirstgame
base.html
index.html
Then open it up and copy everything from index.html to base.html file, like this:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/myfirstgame.css' %}">
<title>Welcome to Text-Based Adventure Game in Django</title>
</head>
<body>
<div class="page-header">
<h1>Welcome to Text-Based Adventure Game in Django</h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-12">
<h2>Come back soon when we add more functionality</h2>
<p>This is a <em>choose your own adventure game</em>.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="player-listings">List of players in order of latest who played</h3>
<ul class="player-list">
{% for player in players %}
<li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</body>
</html>
You will be replacing your whole <body> (everything between <body> and </body>) with the following:
{% block content %}
{% endblock %}
Then in base.html should look like the following:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/myfirstgame.css' %}">
<title>Welcome to Text-Based Adventure Game in Django</title>
</head>
<body>
<div class="page-header">
<h1>Welcome to Text-Based Adventure Game in Django</h1>
</div>
{% block content %}
{% endblock %}
</body>
</html>
Save base.html file.
But why? You just created a block! You used the template tag {% block %} to make an area that will have HTML inserted in it. That HTML will come from another template that extends this template (base.html). We will show you how to do this in a moment.
Now open myfirstgame/templates/myfirstgame/index.htmlfile.
Remove everything above <div class="content container"> and everything after the last </div>. You should have the following in the file:
<div class="content container">
<div class="row">
<div class="col-md-12">
<h2>Come back soon when we add more functionality</h2>
<p>This is a <em>choose your own adventure game</em>.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="player-listings">List of players in order of latest who played</h3>
<ul class="player-list">
{% for player in players %}
<li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
{% endfor %}
</ul>
</div>
</div>
</div>
We want to use this as part of our template for all the content blocks. Time to add block tags to this file!
You want your block tag to match the tag in your base.html file. You also want it to include all the code that belongs in your content blocks. To do that, put everything between {% block content %} and {% endblock %}. The file should now look like this:
{% block content %}
<div class="content container">
<div class="row">
<div class="col-md-12">
<h2>Come back soon when we add more functionality</h2>
<p>This is a <em>choose your own adventure game</em>.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="player-listings">List of players in order of latest who played</h3>
<ul class="player-list">
{% for player in players %}
<li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endblock %}
Only one thing left. We need to connect these two templates together. This is what extending templates is all about! We'll do this by adding an extends tag to the beginning of the file. Like this:
{% extends 'myfirstgame/base.html' %}
{% block content %}
<div class="content container">
<div class="row">
<div class="col-md-12">
<h2>Come back soon when we add more functionality</h2>
<p>This is a <em>choose your own adventure game</em>.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="player-listings">List of players in order of latest who played</h3>
<ul class="player-list">
{% for player in players %}
<li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endblock %}
That's it! Save the file and go to http://127.0.0.1:8000/ and check if your website is still working properly. :)
If you get the error
TemplateDoesNotExist, that means that there is nomyfirstgame/base.htmlfile and you haverunserverrunning in the console.Try to stop it (by pressing Ctrl+C – the Control and C keys together) and restart it by running a
python manage.py runservercommand.