Django 5 для начинающих

Прогресс по курсу:  9/1004

10.3 Работа с ListView, вывод списка статей
2 из 13 шагов пройдено
0 из 48 баллов  получено

Работа с шаблонами

Переходим в конфигурационный файл, и находим параметр TEMPLATES, проверяем пути наших шаблонов 'DIRS': [BASE_DIR / 'templates'].

BASE_DIR - это папка нашего проекта Django.

templates - это папка с нашими шаблонами, где мы будем работать с html файлами для вывода контента.

Создадим файл main.html в корневой папке шаблонов, общий путь будет templates/main.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Блог 2.0</title>
</head>
<body>
{% block content %}

{% endblock %}
</body>
</html>

Я думаю что вы помните, что {% block content %} отвечает за вывод определенного контента, когда мы наследуем главную страницу в других шаблонах с помощью {% extends 'template_name.html' %}, этот тег обязательно необходимо закрыть с помощью {% endblock %}

Внутри корневой папки templates создадим папку blog, в которой добавим файл post_list.html со следующим содержимым:

{% extends 'main.html' %}

{% block content %}
    {% for post in posts %}
        <img src={{ post.thumbnail.url }} alt={{ post.title }} width="150"/>
        <strong>{{ post.title }}</strong>
        <p>{{ post.description }}</p>
        <small>{{ post.create }}</small>
        <hr>
        <span>{{ post.category.title }}</span>
        <br>
    {% endfor %}
{% endblock %}


Теперь нам все это необходимо проверить, давайте запустим сервер и добавим первую запись в наш блог. Для этого перейдем в админ панель и заполним необходимые поля:


Теперь перейдем на главную страницу нашего блога:


Если мы посмотрим нашу файловую структуру:

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

Поэтому внутри модели Post, в файле apps/blog/models.py мы изменим поле thumbnail, а именно параметр upload_to:

upload_to='images/thumbnails/%Y/%m/%d/',

Добавив /%Y/%m/%d/, это обозначает, что мы хотим сохранить изображение в по дате, например images/thumbnails/2023/10/28.

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

 

Работа с заголовком

Также нам необходимо сделать получение заголовка страницы из нашего класса. Для этого в шаблоне main.html изменим тег title на следующий:

<title>{{ title }}</title>

А в класс PostListView добавим функцию обработки:

from django.views.generic import ListView
from .models import Post


class PostListView(ListView):
    model = Post
    template_name = 'blog/post_list.html'
    context_object_name = 'posts'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['title'] = 'Главная страница'
        return context

Функция get_context_data может использоваться для передачи содержимого или параметров вне модели в шаблон, что очень полезно. Например, в нашем случае мы передаем значение заголовка страницы.

Теперь если мы перейдем по адресу http://127.0.0.1:8000, мы увидим наш заголовок страницы.

 

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


  • Комментария
Будьте вежливы и соблюдайте наши принципы сообщества. Пожалуйста, не оставляйте решения и подсказки в комментариях, для этого есть отдельный форум.
Оставить комментарий

Хочу предложить альтернативный вариант сохранки изображений (мне кажется он наиболее удобен):

1. Определяем функцию models.py:

def post_images_directory_path(instance: 'Post', filename: str) -> str:

    return 'images/thumbnails/{post_name}/{filename}'.format(
        post_name=instance.title,
        filename=filename,
    )

2. Изменяем параметр upload_to на:

upload_to=post_images_directory_path

3. Результат, имеем следующую иерархию (Мы всегда знаем в какой папке находится картинка так как папка названа по названию статьи, таже туда можно и дату добавить):

Создадим файл main.html в корневой папке шаблонов templates/base.html:

И на скринах в одном варианте "base.htmll", в другом он уже "main.htm" 

@Иван, Спасибо, исправил.

Спасибо за классную фишку: upload_to='images/thumbnails/%Y/%m/%d/'