Расширение шаблонов в Django

На сайте у страниц общий каркас: шапка, подвал, общая разметка HTML документа. Меняется обычно только контент и заголовок title.

Ранее мы собирали страницу из кусков через {% include %}. Есть и другой подход: сделать один базовый макет, а в нем отметить места, которые каждая страница заполнит по-своему.

Такой подход называют наследованием шаблонов (template inheritance).

Давайте разместим общий макет в файле base.html. Пока просто наметим, где будет контент страницы:

<!DOCTYPE html>
<html>
	<head>
		<title>title</title>
	</head>
	<body>
		<header>
			header
		</header>
		<main>
			page content here
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Места, которые дочерние шаблоны могут переопределить, задают тегом {% block %}. У каждого блока есть имя.

Давайте сделаем блок title для заголовка страницы и блок content для основного содержимого. Внутри блока можно указать значение по умолчанию - оно используется, если дочерний шаблон блок не переопределил:

<!DOCTYPE html>
<html>
	<head>
		<title>{% block title %}My Site{% endblock %}</title>
	</head>
	<body>
		<header>
			header
		</header>
		<main>
			{% block content %}{% endblock %}
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Теперь сделаем страницу about.html. Она не дублирует весь макет, а расширяет базовый шаблон тегом {% extends %} и заполняет нужные блоки.

Тег extends должен быть первой строкой файла:

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block content %}
    <h1>About page</h1>
{% endblock %}

Django возьмет base.html и подставит в блоки то, что записано в дочернем шаблоне. В браузере отобразится:

<!DOCTYPE html>
<html>
	<head>
		<title>About</title>
	</head>
	<body>
		<header>
			header
		</header>
		<main>
			<h1>About page</h1>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Дан базовый шаблон base.html с блоками title и content. Создайте шаблон страницы, который расширяет базовый и переопределяет оба блока.