Создание шаблонов представлений
Структура шаблонов
blog/
└── templates/
└── blog/
├── base.html
└── post/
├── list.html
└── detail.html
blog/
└── static/
└── css/
└── blog.css
base.html — общий каркас, list.html и detail.html его наследуют.
Базовый шаблон
blog/templates/blog/base.html:
{% load static %}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} · Мой блог</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
<aside id="sidebar">
<h2>Мой блог</h2>
<p>Это мой блог о Django.</p>
</aside>
</body>
</html>
{% load static %}подключает тегstatic.- Два блока:
titleиcontent. - Боковая панель (
sidebar) потом пополнится последними постами, тегами и поиском.
Шаблон списка
blog/templates/blog/post/list.html:
{% extends "blog/base.html" %}
{% block title %}Мой блог{% endblock %}
{% block content %}
<h1>Мой блог</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
</h2>
<p class="date">Опубликовано {{ post.publish|date:"d.m.Y" }} автором {{ post.author }}</p>
{{ post.body|truncatewords:30|linebreaks }}
{% empty %}
<p>Постов пока нет.</p>
{% endfor %}
{% endblock %}
Фильтры:
truncatewords:30— оставляет первые 30 слов и добавляет «…»;linebreaks— превращает переносы строк в абзацы<p>и<br>;date:"d.m.Y"— формат даты. Полезные символы:d— день,m— месяц числом,E— месяц словом в родительном падеже («октября»),Y— год,H:i— время.
Фильтры применяются слева направо: сначала обрезаем, потом размечаем абзацы.
Шаблон поста
blog/templates/blog/post/detail.html:
{% extends "blog/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
<h1>{{ post.title }}</h1>
<p class="date">Опубликовано {{ post.publish|date:"j E Y" }} автором {{ post.author }}</p>
{{ post.body|linebreaks }}
<p><a href="{% url 'blog:post_list' %}">← Все посты</a></p>
{% endblock %}
Стили
blog/static/css/blog.css — несколько правил для приятного вида:
body { margin: 0; font-family: system-ui, sans-serif; color: #222; display: flex; gap: 40px; padding: 30px; }
#content { flex: 1; max-width: 720px; }
#sidebar { width: 260px; background: #f4f4f4; padding: 16px; border-radius: 8px; height: fit-content; }
a { color: #0c6; }
.date { color: #888; font-size: 14px; }
Позже мы заменим самописные стили на Bootstrap 5.
Смотрим результат
Запустите runserver и откройте http://127.0.0.1:8000/blog/. Вы увидите список опубликованных постов, а по клику — страницу поста. Черновики не показываются.
Проверьте:
- адрес несуществующего поста
/blog/999/даёт 404; - адрес черновика тоже даёт 404;
- в админке у поста появилась кнопка «Смотреть на сайте».
Итог
- Шаблоны блога наследуют
blog/base.html. truncatewords,linebreaks,date— главные фильтры для вывода текста и дат.- Ссылки строятся через
get_absolute_urlи{% url %}, статика — через{% static %}.
Практика решено 0 из 5
Расставьте файлы шаблонов блога по иерархии: от общего к частному.
-
blog/post/list.html— наследует base.html, выводит список -
blog/post/detail.html— наследует base.html, выводит один пост -
blog/base.html— каркас страницы с блоком content
В шаблоне списка выведите для каждого поста из posts заголовок-ссылку
<h2><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h2>
и первые 30 слов текста с фильтрами truncatewords:30 и linebreaks.
{% extends "blog/base.html" %}
{% block content %}
<h1>Мой блог</h1>
{% for post in posts %}
<h2><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h2>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% endblock %}
Что делает фильтр linebreaks?
Выведите дату публикации поста в формате 25.10.2026 с подписью: Опубликовано {дата} автором {автор}.
Используйте фильтр date с форматом "d.m.Y" и post.author.
<p class="date">Опубликовано {{ post.publish|date:"d.m.Y" }} автором {{ post.author }}</p>
Какой тег нужно загрузить в начале шаблона, чтобы использовать {% static %}? Напишите тег целиком.
{% load static %}Войдите, чтобы отмечать пройденные уроки.