JavaRush /Курсы /Модуль 3: Django /Введение в шаблоны Django

Введение в шаблоны Django

Модуль 3: Django
5 уровень , 0 лекция
Открыта

Пока мы изучали основы Django, мы ограничивались минимальным HTML или вовсе не использовали его. Настало время выйти из зоны комфорта разработчика и начать создавать красивые и функциональные веб-страницы.

Что такое шаблоны?

Представьте пекарню. У пекаря есть две важные вещи: форма для печенья и рецепт. Форма определяет, как печенье будет выглядеть, а рецепт — из чего оно будет состоять. Вместе они создают готовый продукт.

Точно так же работают шаблоны в Django. Они разделяют внешний вид (HTML) и внутреннюю логику вашего приложения. HTML — это форма, которая определяет, как страница будет выглядеть в браузере.
А Django Template Language (DTL) — это рецепт, который говорит, какие данные и куда нужно поместить.

Шаблоны не просто показывают статичный HTML. Они позволяют:

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

Шаблоны помогают следовать принципу "Separate of Concerns", отделяя "что делать" (логика) от "как это выглядит" (представление).

Django Template Language (DTL)

HTML хорош для статических страниц, где контент не меняется. Но в реальных проектах нужно показывать динамические данные — списки пользователей, товары в магазине, комментарии к постам. Здесь и пригодится Django Template Language (DTL) — встроенный язык шаблонов Django.

Представьте DTL как умную систему подстановок. Вы создаёте HTML-страницу с специальными метками, а Django в нужный момент заменяет эти метки реальными данными. Например, вместо жёстко прописанного имени "Андрей" вы можете вставить переменную {{ user.name }}, и система сама подставит имя текущего пользователя.

DTL даёт вам три крутые возможности:

  1. Вставлять динамические данные из базы прямо в HTML
  2. Использовать условия и циклы — например, показать список только активных пользователей
  3. Преобразовывать данные на лету — форматировать даты, обрезать длинные тексты, переводить в верхний регистр

Можно сказать, DTL — это HTML на стероидах

Как это работает: Простейший пример

Вот базовое представление в Django, которое использует шаблон:

from django.shortcuts import render

def home(request):
    context = {'user_name': 'Джон'}
    return render(request, 'home.html', context)

Обратите внимание на функцию render:

  • Она загружает шаблон 'home.html'.
  • Передаёт в него данные через словарь context.

А вот и шаблон home.html:

<!DOCTYPE html>
<html>
<head>
    <title>Приветствие</title>
</head>
<body>
    <h1>Привет, {{ user_name }}!</h1>
</body>
</html>

Результат в браузере:

<!DOCTYPE html>
<html>
<head>
    <title>Приветствие</title>
</head>
<body>
    <h1>Привет, Джон!</h1>
</body>
</html>

Основные возможности шаблонов

Вставка переменных

используется конструкция {{ variable }}. Например:

<p>Ваше имя: {{ user_name }}</p>

Если переменная user_name равна "Джон", то на странице отобразится <p>Ваше имя: Джон</p>.

условия (if)

Иногда нужно проверить, например, авторизован ли пользователь:

{% if user.is_authenticated %}
    <p>Привет, {{ user.username }}</p>
{% else %}
    <p>Привет, гость!</p>
{% endif %}

Циклы (for)

Вывод списков в шаблонах — одно из самых частых действий:

<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

Если в контексте есть items = ['яблоко', 'банан', 'вишня'], то результат будет:

<ul>
    <li>яблоко</li>
    <li>банан</li>
    <li>вишня</li>
</ul>

Фильтры

Данные можно форматировать прямо в шаблоне с помощью фильтров:

<p>Текущая дата: {{ current_date|date:"d-m-Y" }}</p>

Здесь current_date отобразится в формате "день-месяц-год", например "05-10-2023".

Как Django ищет шаблоны?

Шаблоны хранятся в папке templates, которую нужно создать внутри вашего приложения или проекта. Например:

my_project/
    my_app/
        templates/
            home.html

Django автоматически ищет шаблоны в папке templates. Чтобы она заработала, убедитесь, что в settings.py добавлен TEMPLATES:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # Здесь можно указать дополнительные директории.
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Практическое задание

Шаг 1: создайте шаблон home.html

Создайте папку templates внутри вашего приложения и добавьте следующий файл:

<!DOCTYPE html>
<html>
<head>
    <title>Домашняя страница</title>
</head>
<body>
    <h1>Привет, {{ user_name }}!</h1>
    <p>Сегодня: {{ current_date|date:"d M Y" }}</p>
</body>
</html>

Шаг 2: настройте представление

Обновите ваше представление в views.py, чтобы передать данные в шаблон:

from django.shortcuts import render
from datetime import date

def home(request):
    context = {
        'user_name': 'Мария',
        'current_date': date.today()
    }
    return render(request, 'home.html', context)

Шаг 3: добавьте маршрут

Обновите файл urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

Запустите сервер и откройте браузер

Откройте http://127.0.0.1:8000/. Вы должны увидеть приветствие и текущую дату.

Подводные камни и общие ошибки

  1. Отсутствие тега закрытия. Если вы забыли закрыть теги, такие как {% if %} или {% for %}, вы получите ошибку. Django не позволит запустить шаблон с некорректным синтаксисом.

  2. Неверный путь к шаблону. Иногда Django не может найти шаблон, если он не лежит в папке templates или если неправильно настроен параметр DIRS в settings.py.

  3. Ошибки в фильтрах. Не все фильтры подходят под любые данные. Например, попытка отформатировать строку как дату закончится ошибкой: {{ "тест"|date:"d M Y" }}.

Зачем это нужно разработчику?

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

1
Задача
Модуль 3: Django, 5 уровень, 0 лекция
Недоступна
Создание базового HTML-шаблона
Создание базового HTML-шаблона
1
Задача
Модуль 3: Django, 5 уровень, 0 лекция
Недоступна
Вывод списка данных через шаблон
Вывод списка данных через шаблон
Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ