Базовый шаблон

У всех сайтов есть свой стиль, своя обложка, которая не меняется от страницы к странице. Внутри этой рамки меняется только контент, но сама рамка остаётся неизменной. Вот, например, как это выглядит на Хабре:

Но что, если вам захочется поменять что-то в этой обложке? Например, логотип. Придётся менять логотип в каждом шаблоне вашего сайта. Это совершенно неудобно и порождает копипасту: однажды вы пропустите один из шаблонов и на каких-то страницах будет старый логотип, а на каких-то — новый. Чтобы такое избежать, можно вынести "обложку" в отдкльный файл, и сказать, что это базовый шаблон. Вот как он может выглядеть:

Файл blog-base.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
            {% block content %}
            {% endblock %}
    </body>
...

В этом файле только "обложка" блога. Вместо "контента" здесь загадочная надпись {% block content %}.

Чтобы воспользоваться этой обложкой, нужно сделать 2 вещи: сказать, где лежит обложка и определить, что будет лежать в {% block content%}.

Указать путь можно с помощью тега extends:

{% extends 'blog-base.html' %}

Далее тут же определяем блок контента:

Файл index.html

{% extends 'blog-base.html' %}

{% block content %}
<header class="header_area">
  {% for post in posts %}
    {{post.title}}
  {% endfor %}    
  ...
{% endblock %}

Django поймёт, что вы хотите воспользоваться базовым шаблоном и найдёт его в файле blog-base.html, который указан в extends. Дальше она найдёт в нём блок {% block content %} и подставит туда такой же блок из файла index.html.

Теперь все странички можно подключать к blog-base.html, чтобы получить обложку, а сам контент определять внутри {% block content %}.