Создание шаблонов представлений
Вы создали представления и шаблоны URL-адресов для приложения blog.
Шаблоны URL-адресов соотносят URL-адреса с представлениями, а те, в свою очередь, решают, какие данные будут возвращаться пользователю.
Шаблоны определяют способ отображения данных; обычно они пишутся на HTML в сочетании с языком шаблонов Django.
Более подробная информация о языке шаблонов Django находится на странице https://docs.djangoproject.com/en/5.0/ref/templates/language/.
Давайте добавим в приложение шаблоны, чтобы отображать посты в удобном для пользователя виде.
Внутри каталога нашего проекта создайте следующие ниже каталоги и файлы:
Приведенная выше структура будет файловой структурой ваших шаблонов.
Файл base.html будет включать в себя главную HTML-структуру веб-сайта и разделит контент на главную область содержимого и боковую панель.
Файлы list.html и detail.html будут наследовать от файла base.html, чтобы прорисовывать представления соответственно списка постов блога и детальной информации о посте.
Так-же необходимо прописать расположение каталога шаблонов в файле настроек settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'], # указываем путь к каталогу с шаблонами
# ...
},
]
Django обладает мощным языком шаблонов, который позволяет указывать внешний вид отображения данных.
Он основан на шаблонных тегах, шаблонных переменных и шаблонных фильтрах:
-
шаблонные теги управляют прорисовкой шаблона и выглядят как
{% tag %}; -
шаблонные переменные заменяются значениями при прорисовке шаблона и выглядят как
{{ variable }}; -
шаблонные фильтры позволяют видоизменять отображаемые переменные и выглядят как
{{ variable|filter }}.
Все встроенные шаблонные теги и фильтры можно посмотреть на странице https://docs.djangoproject.com/en/5.0/ref/templates/builtins/.
Создание базового шаблона
Отредактируйте файл base.html, добавив в него следующий ниже исходный код:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}
{% endblock %}
</div>
<div id="sidebar">
<h2>My blog</h2>
<p>This is my blog.</p>
</div>
</body>
</html>Тег {% load static %} сообщает Django, что нужно загрузить статические шаблонные теги static, предоставляемые приложением django.contrib.staticfiles, которое содержится в настроечном параметре INSTALLED_APPS.
После их загрузки шаблонный тег {% static %} можно использовать во всем этом шаблоне.
С помощью указанного шаблонного тега можно вставлять статические файлы, такие как файл blog.css
STATIC_URL = 'static/'Так как по умолчанию переменная STATIC_URL имеет значение static/, а это значит, что нам достаточно создать в папке приложения blog каталог с именем static и добавить в него необходимые нам статические файлы. Но, естественно, при необходимости через данную настройку мы можем изменить расположение каталога статических файлов. Если нас не устраивает хранение файлов в каталоге по умолчанию - каталоге static приложения, либо мы хотим указать несколько папок, то мы можем в файле settings.py задать все необходимые каталоги с помощью переменной STATICFILES_DIRS
Создайте данные папки и добавьте в файл. Общий путь должен быть mysite/blog/static/css/blog.css:
body {
margin: 0;
padding: 0;
font-family: helvetica, sans-serif;
}
a {
color: #00abff;
text-decoration: none;
}
h1 {
font-weight: normal;
border-bottom: 1px solid #bbb;
padding: 0 0 10px 0;
}
h2 {
font-weight: normal;
margin: 30px 0 0;
}
#content {
float: left;
width: 60%;
padding: 0 0 0 30px;
}
#sidebar {
float: right;
width: 30%;
padding: 10px;
background: #efefef;
height: 100%;
}
p.date {
color: #ccc;
font-family: georgia, serif;
font-size: 12px;
font-style: italic;
}
/* pagination */
.pagination {
margin: 40px 0;
font-weight: bold;
}
/* forms */
input[type=submit] {
font-weight: bold;
background: #00abff;
color: #fff;
padding: 10px 20px;
font-size: 14px;
text-transform: uppercase;
}
.errorlist {
color: #cc0033;
float: left;
clear: both;
padding-left: 10px;
}
/* comments */
.comment {
padding: 10px;
}
.comment:nth-child(even) {
background: #efefef;
}
.comment .info {
font-weight: bold;
font-size: 12px;
color: #666;
}Вы видите, что в базовом шаблоне присутствуют два тега {% block %}. Они сообщают Django, что нужно определить блок в отмеченной области. Шаблоны, которые наследуют от этого шаблона, могут заполнять блоки контентом.
В приведенном выше исходном коде был определен блок под названием title и блок под названием content.
