Преобразование шаблона и стилизация
Для улучшения внешнего вида мини-блога используется новый HTML-шаблон index.html, обеспечивающий более привлекательное отображение записей в рамках и возможность добавления изображений. Шаблон включает лаконичный дизайн и определённый шрифт. Стили задаются в CSS-файле style.css.
Подключение шаблона и статических файлов
Новый шаблон index.html копируется в папку с шаблонами блога, после чего старый шаблон block.html удаляется, а новый переименовывается в block.html.
Для хранения статических файлов (CSS, JS, изображений) создаётся папка static. Папка css с файлом style.css перемещается в static.
В файле settings.py проекта необходимо настроить подключение статических файлов:
- STATIC_URL остаётся без изменений (например, /static/).
- Добавляется STATICFILES_DIRS с путём к папке static: BASE_DIR / ‘static’.
Подключение CSS в HTML-шаблон осуществляется следующим кодом внутри блока <head>:
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">Интеграция записей в шаблон
Вывод записей в новый шаблон осуществляется с помощью цикла for для перебора элементов post_list:
{% for post in post_list %}
<h2>{{ post.title }}</h2>
<img src="{{ post.image.url }}" width="250" height="200">
<p>{{ post.description }}</p>
<p>Автор: {{ post.author }}</p>
{% endfor %}Добавление поля для изображений в модель
Для хранения ссылок на изображения в модель добавляется поле ImageField:
from django.db import models
class Post(models.Model):
# ... другие поля ...
image = models.ImageField(upload_to='images/%Y/') # images/%Y/ создает папки по годам
# ... другие поля ...Создаётся папка media для хранения загружаемых изображений. В settings.py добавляются настройки для медиа-файлов:
- MEDIA_ROOT = BASE_DIR / ‘media’
- MEDIA_URL = ‘/media/’
В urls.py добавляются настройки для работы с медиа-файлами в режиме отладки:
from django.conf import settings
from django.urls import path, include
from django.conf.urls.static import static
urlpatterns = [
# ... другие URL-паттерны ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)В продакшене режим отладки (DEBUG) должен быть выключен.
После добавления поля в модель необходимо выполнить миграции:
python manage.py makemigrations
python manage.py migrateПри непустой базе данных потребуется указать значения по умолчанию для нового поля.
Загрузка изображений
Изображения загружаются через админ-панель Django и сохраняются в папке media/images/<год>. В HTML-шаблоне для отображения изображений используется тег <img> с атрибутами width и height для ограничения размера.
Мини-блог получил более привлекательный внешний вид и возможность отображения изображений в записях. В следующем уроке будет добавлена возможность создания отдельных страниц для каждой записи и добавления комментариев.