Наследование шаблонов и статические файлы

Наследование шаблонов

Если внимательно посмотреть предыдущие примеры шаблонов, видны большие блоки одинакового кода: панель навигации, заголовок, блоки со служебными тегами и т.д. Это увеличивает общий объем используемых шаблонов, а также усложняет внесение изменений – например, для добавления нового пункта в меню, понадобится редактирование всех файлов с данным блоком.

Для решения данной проблемы используется наследование шаблонов (аналогично наследованию классов). Шаблон, который является базовым, содержит повторяющийся код, в определенных местах которого объявляются блоки, указывающие места вставки содержимого из производных шаблонов. Каждый такой блок должен иметь уникальное в пределах текущего шаблона имя.

Для примера создадим базовый шаблон, содержащий следующие блоки:

title – будет вставляться в тег <title> и выводить название текущей страницы;
content – размещение уникального содержимого страниц.

Далее создадим в каталоге templates папку layout, в котором создадим базовый шаблон basic.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Главная {% endblock %} ||
        Доска объявлений</title>
    </head>
    <body>
        <header>
            <h1>Объявления</h1>
        </header>
        <nav>
            <a href="{% url 'index' %}">Главная</a>
            <a href="{% url 'add' %}">Добавить</a>
            {% for rubric in rubrics % }
            <a href="{% url 'by_rubric' rubric.pk %}">
            {{ rubric.name }}</a>
            {% endfor %}
        </nav>
        <section>
        {% block content %}
        {% endblock %}
        </section>
    </body>
</html>

Тег шаблонизатора block обозначает начало объявляемого блока, за ним должно идти имя нового блока. Конец блока обозначается тегом endblock.

При этом блок, объявленный в базовом шаблоне, может быть пустым (в примере это блок content) или уже иметь содержимое (блок title). В последнем случае текст будет выведен, если производный шаблон не передаст собственное наполнение.

Создадим новый шаблон bboard\index.html, сделав его производным от созданного ранее шаблона layout\basic.html. Код шаблона:

{% extends "layout\basic.html" %}
{% block content %}
{% for bb in bbs %}
<div>
    <h2>{{ bb.title }}</h2>
    <p>{{ bb.content }}</p>
    <p><a href="{% url 'by_rubric' bb.rubric.pk %}">
    {{ bb.rubric.name }}</a></p>
    <p>{{ bb.published | date: "d.m.Y H:i:s" }}</p>
</dev>
{% endfor %}
{% endblock %}

Производный шаблон должен начинаться с тега extends, в котором прописывается путь к шаблону, который является базовым. Далее при помощи тегов block и endblock объявляются нужные блоки.

После сохранения всех внесенных изменений можно обновить главную страницу и убедиться, что она не изменилась.

Аналогичные изменения внесем в шаблон bboard\create.html:

{% extends "layout/basic.html" %}

{% block title %}Добавление объявления{% endblock %}

{% block content %}
<h2> Добавление объявления </h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type = "submit" value= "Добавить">
</form>
{% endblock %}

А также в шаблон bboard\by_rubric.html:

{% extends "layout/basic.html" %}

{% block title %}{{ current_rubric.name }}{% endblock %}

{% block content %}
<h2>Рубрика: {{ current_rubric.name }}</h2>
{% for bb in bbs %}
<div>
    <h3>{{ bb.title }}</h2>
    <p>{{ bb.content }}</p>
    <p>{{ bb.published|date:"d.m.Y H:i:s" }}</p>
</div>
{% endfor %}
{% endblock %}

Статические файлы

Тестовый сайт почти готов. Осталось только при помощи таблицы стилей style.css сделать страницы более красивыми.

header h1 {
    font-size: 40pt;
    text-transform: uppercase;
    text-align: center;
    background: url("bg.jpg") left / auto 100% no-repeat;
}
nav {
    font-size: 16pt;
    width: 150px;
    float: left;
}
nav a {
    display: block;
    margin: 15px 0px;
}
section {
    margin-left: 150px;
}

Сразу возникает вопрос, где должен храниться файл с изображением и сама таблица стилей. И как собственно указать базовому шаблону, что необходимо использовать данную таблицу стилей.

Файлы, которые при формировании страниц интернет-сайта отправляются клиенту без обработки, в терминологии Django принято называть статическими. К таким файлам, к примеру, относятся графические элементы и таблицы стилей.

Создадим в каталоге приложения bboard папку static, в ней вложенный каталог bboard. В него и сохраним картинку bg.jpg и файл style.css.

Откроем созданный ранее шаблон layout\basic.html и добавим в него следующие строки:

{% load static %}
<! DOCTYPE html>
<html>
    <head>
        . . .
        <link rel="stylesheet" type="text/css"
        href="{% static 'bboard/style.css' %}">
    </head>
    . . .
</html>

Тег load обеспечивает загрузку указанного модуля расширения, который содержит дополнительные фильтры и теги. В нашем случае загружается модуль static, в котором содержатся теги для вставки ссылок на нужные статические файлы.

Тег static позволяет сгенерировать полный адрес статического файла при помощи относительного. Он необходим в нашем случае для вставки в HTML-тег <link> корректной ссылки на таблицу стилей.

После повторного запуска отладочного сервера и перезагрузки главной страницы, можно увидеть изменения – она выглядит более презентабельно.



Вы можете оставить комментарий, или Трекбэк с вашего сайта.

Оставить комментарий