Начало работы с шаблонами Django

  • 7 мин

Шаблоны — это текстовые файлы, которые можно использовать для создания текстовых форматов, таких как HTML или XML. Каждый шаблон содержит статические данные, которые совместно используются на сайте, а также заполнители для динамических данных. Шаблоны содержат переменные и теги, которые управляют поведением и тем, что в итоге будет отображаться на странице сайта.

Рассмотрим, как работают шаблоны в Django.

Переменные

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

Django позволяет отобразить переменные в шаблоне с помощью синтаксиса {{ }}. Любая переменная в двойных фигурных скобках определяется по своему текстовому содержимому, а затем помещается в шаблон. Например, если нам нужно отобразить имя собаки, можно использовать {{dog.name}}.

Представление передает переменные в шаблон с помощью функции render, которую мы рассмотрим в следующих модулях. В шаблон можно передать значения и другие данные, включая набор запросов из Django ORM. Это позволяет использовать базу данных в приложении.

Фильтры

Фильтры — это отличный способ управления отображением данных при их запросе в шаблоне. Поскольку фильтры уже готовы к использованию, это простой способ форматирования данных без написания кода.

Например, предположим, что нужно распечатать названия пород собак, и при этом необходимо, чтобы каждое название начиналось с прописной буквы.

{{ dog.name | capfirst }}

Переменная находится слева от символа вертикальной черты (|), а фильтр — справа. Это лишь один из множества фильтров, которые можно применять для управления данными при использовании фильтров шаблонов в Django.

Теги

Теги можно использовать для выполнения циклов, создания текста или передачи других типов команд для подсистемы шаблонов. Теги часто напоминают синтаксис Python. Но поскольку они выполняются внутри шаблона (а не внутри интерпретатора Python), вы заметите некоторые отличия в синтаксисе. Без возможности использовать вкладки как в Python, для каждого оператора блока потребуется соответствующий end.

Мы можем использовать оператор if для булевой логики и циклы for для итерации. Основной синтаксис для операторов if выглядит следующим образом:

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

Примечание.

Оператор elif используется так же, как elif в Python.

Аналогичным образом можно использовать цикл for для вывода названий всех пород в списке:

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

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

Шаблоны используются для создания HTML-кода, который пользователь увидит при использовании приложения. Страницы в приложении обычно имеют общую структуру, в которой панель навигации может быть слева, заголовок находится в верхней части, а также есть единая таблица стилей. Шаблоны Django позволяют работать с общими структурами с помощью наследования.

Создание родительской страницы

Создание родительской страницы аналогично созданию любого HTML-шаблона в Django. Вы создаете внешнюю структуру, а затем добавляете заполнители {% block %}. Эти заполнители позволяют использовать содержимое из дочерних элементов.

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

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

Создание дочерней страницы

Можно создать дочернюю страницу из родительского элемента с помощью ключевого слова extends. Это ключевое слово позволяет использовать имя HTML-файла родительского шаблона. Затем мы используем соответствующие операторы {% block %} для добавления содержимого конкретной страницы.

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

На странице это будет выглядеть следующим образом:

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

Обратите внимание, что на дочерней странице заполнители заменяются содержимым.

Примечание.

В этом примере мы использовали статический текст. Дальше вы увидите, что можно также использовать динамическое содержимое.