Another nice thing Django has for you is template extending. What does it mean? It means that you can use the same parts of your HTML for different pages of your website.
This way you don't have to write it every time in every single html file you have, you don't repeat yourself and if you want to change something, you don't have to do it in every template, just once!
A base template is the most basic template that you use to extend on every page of your website.
Create a mysite/templates/mysite/base.html file. You also need to create templates and mysite folders, but you probably have noticed this pattern already :)
mysite
└───mysite
└───templates
└───mysite
base.html
Then open it up and copy everything from post_list.html to base.html file, like this:
{% load staticfiles %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css">
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">
<script src="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fjs%2Fbootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F%7B%25+static+%27css%2Fblog.css%27+%25%7D">
</head>
<body>
<div class="page-header">
<h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F">Django Girls Blog</a></h1>
</div>
<div class="content">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
Then in base.html, replace your whole <body> (everything between <body> and </body>) with this:
<body>
<div class="page-header">
<h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com.%2F">Django Girls Blog</a></h1>
</div>
<div class="content">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
We basically replaced everything between {% for post in posts %}{% endfor %} with:
{% block content %}
{% endblock %}
What does it mean? You just created a block, which is a template tag that allows you to insert HTML in this place in templates that are extending base.html. We will show you how to do that in a moment.
Now save it, and open your mysite/blog/templates/blog/post_list.html again. Delete everything else than what's inside the body and then delete also <div class="page-header"></div>, so the file will look like this:
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text }}</p>
</div>
{% endfor %}
And now add this line on the beginning of the file:
{% extends 'mysite/base.html' %}
It means that we're now extending base.html template in post_list.html. Only one thing left: put everything (except the line we just added) between {% block content %} and {% endblock content %}. Like this:
{% extends 'mysite/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text }}</p>
</div>
{% endfor %}
{% endblock content %}
That's it! Check if your website is still working properly :)
If you have an error
TemplateDoesNotExiststhat says that there is nomysite/base.htmlfile and you haverunserverrunning in the console, try to stop it (by pressing Ctrl+c - Control and C buttons together) and restart it withpython manage.py runserver.