Настраиваем внешний вид админ-панели

Курс по Django: https://stepik.org/a/183363

Смотреть материал на видео

Архив проекта: 42_sitewomen.zip

На этом занятии мы сделаем некоторые изменения в оформлении админ-панели, настроим ее под свой разрабатываемый сайт. Если перейти в документацию по Django, то на странице:

https://docs.djangoproject.com/en/4.2/

есть раздел «Admin» и ссылка «Admin site», где подробно объясняются различные нюансы настройки админ-панели. Это огромная тема, поэтому, мы коснемся лишь некоторых базовых вещей.

Меняем стили оформления

Вначале давайте посмотрим, как можно поменять стили оформления админ-панели. Это бывает необходимо, чтобы админка визуально выглядела в тех же тонах, что и основной сайт. Для этого, мы с помощью панели Debug Toolbar посмотрим, какие используются шаблоны для формирования этой страницы:

  • admin/index.html

    D:\\Python\\django\\djsite\\venv\\lib\\site-packages\\django\\contrib\\admin\\templates\\admin\\index.html

  • admin/base_site.html

    D:\\Python\\django\\djsite\\venv\\lib\\site-packages\\django\\contrib\\admin\\templates\\admin\\base_site.html

  • admin/base.html

    D:\\Python\\django\\djsite\\venv\\lib\\site-packages\\django\\contrib\\admin\\templates\\admin\\base.html

  • admin/app_list.html

    D:\\Python\\django\\djsite\\venv\\lib\\site-packages\\django\\contrib\\admin\\templates\\admin\\app_list.html

Здесь нам показываются четыре шаблона и по названию можно понять, что базовым для страниц сайта является шаблон base_site.html. Также под ним прописан путь, где он располагается.

Давайте, откроем его и по идее, конечно, можно было бы внести изменения прямо здесь. Но это не лучшая практика. Все дополнительные файлы, которые были сформированы при установке Django, лучше оставлять без изменений. А переопределение делать уже непосредственно в нашем проекте. В частности, если добавить в каталог sitewomen/templates подкаталог admin и там разместить файл с тем же именем base_site.html, то Django, сканируя первым этот каталог, будет использовать файл admin/base_site.html.

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

В файле base_site.html расположены три блока:

  • block title – отвечает за отображение заголовка во вкладке;
  • block branding – за отображение ссылки «Администрирование Django» в верхней панели;
  • block nav-global – глобальный блок навигации.

Сейчас мы хотим прописать свои собственные стили оформления. Как это сделать? Для этого откроем шаблон более верхнего уровня base.html и видим в нем специальный блок:

{% block extrastyle %}{% endblock %}

который служит для добавления дополнительных стилей оформления. Пропишем его в файле base_site.html и в нем укажем свой файл оформления: 

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/admin/admin.css' %}">
{% endblock %}

Соответственно, выше загрузим тег static: 

{% load static %}

и сформируем файл admin.css в нашем приложении в каталоге static/css/admin относительно каталога нашего проекта: 

#header {
    background: #3F4137;
}

Чтобы фреймворк Django находил нестандартный путь к этой папке, ее нужно указать в настройках settings.py с помощью специальной коллекции: 

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

После обновления админ-панели мы должны увидеть изменение цвета фона шапки. Но почему мы прописали именно такой селектор #header для изменения цвета верхней панели? Очень просто. Если перейти в браузер и проинспектировать этот элемент, то увидим тег div с id="header". Значит, для назначения свойств, можно использовать этот идентификатор. По аналогии можно переобозначать стили для всех других элементов админ-панели. Например, такой же стиль пропишем и для заголовков блоков: 

#header, .module caption {
    background: #3F4137;
}

Я думаю, общий принцип понятен. Этим способом можно переопределить все стили и настроить вид админки под дизайн, цветовую схему вашего сайта. И, давайте внесем еще пару изменений: 

div.breadcrumbs {
    background: #6A6E5D;
}
 
.module h2, .module caption, .inline-group h2 {
    background: #6A6E5D;
}

Вот так, можно настраивать стили и отображение содержимого админ-панели.

Курс по Django: https://stepik.org/a/183363

Видео по теме

Добрый, добрый Django с Сергеем Балакиревым

#1. Django, что это такое? Инструментальные средства

#2. Установка Django. Создание проекта

#3. Модель MTV. Добавление первого приложения

#4. Маршрутизация и функции представления

#5. Отладка проекта Django в Pycharm

#6. Динамические URL. Пользовательские конвертеры

#7. GET- и POST-запросы. Обработчики исключений запросов

#8. Перенаправления (redirect). Функция reverse

#9. Шаблоны, начало. Функции render() и render to string()

#10. Передача данных (переменных) в шаблоны

#11. Стандартные шаблонные фильтры

#12. Теги шаблонов. Теги if и for

#13. Шаблонный тег url

#14. Наследование шаблонов (extends). Тег include

#15. Подключение статических файлов

#16. Пользовательские теги шаблонов. Декораторы simple_tag и inclusion_tag

#17. Что такое БД, SQL и ORM. Создание первой модели

#18. Создание и запуск файлов миграций

#19. Понятие CURD. Добавление записей в таблицу БД. Модуль django-extensions

#20. Методы выбора записей из таблиц. Fields lookups

#21. Сортировка, изменение и удаление записей

#22. Слаги (slug) в URL-адресах. Метод get_absolute_url()

#23. Создание пользовательского менеджера модели

#24. Типы связей между моделями ForeignKey, ManyToManyField, OneToOneField

#25. Создание связи many-to-one многие к одному (ForeignKey)

#26. ORM-команды для связи many-to-one

#27. Отображение постов по рубрикам

#28. Добавляем связь many-to-many (многие ко многим)

#29. Добавление тегов на сайт

#30. Связь one-to-one (один к одному)

#31. ORM-команды с классом Q

#32. Методы выбора записей. Методы exists() и count()

#33. Класс F, Value и метод annotate()

#34. Агрегирующие функции Count, Sum, Avg, Max, Min. Метод values()

#35. Группировка записей. Вычисления на стороне СУБД

#36. Оптимизация сайта с Django Debug Toolbar

#37. Подключение админ-панели. Регистрация моделей

#38. Настройка отображения списка статей в админ-панели

#39. Пользовательские поля и действия в админ-панели

#40. Панель поиска и панель фильтрации

#41. Настройка формы редактирования записей в админ-панели

#42. Настраиваем внешний вид админ-панели

#43. Что такое HTML-формы. Отправка данных по GET и POST-запросам

#44. Использование форм не связанных с моделями

#45. Отображение полей формы. Сохранение переданных данных в БД

#46. Валидация полей формы. Создание пользовательского валидатора

#47. Формы связанные с моделями

#48. Загрузка (upload) файлов на сервер. Классы FileField и ImageField

#49. Загрузка файлов с использованием моделей

#50. Отображение загруженных изображений в HTML-документе и админ-панели

#51. Введение в CBV (Class Based Views). Классы View и TemplateView

#52. Класс ListView

#53. Класс DetailView

#54. Класс FormView

#55. Классы CreateView и UpdateView

#56. Mixins как способ улучшения программного кода

#57. Введение в пагинацию. Класс Paginator

#58. Пагинация с классом ListView

#59. Введение в авторизацию пользователей

#60. Авторизация пользователей. Функции authenticate() и login()

#61. Шаблонные контекстные процессоры

#62. Классы LoginView, LogoutView и AuthenticationForm

#63. Декоратор login_required и класс LoginRequiredMixin

#64. Регистрация пользователей через функции представления

#65. Класс UserCreationForm

#66. Авторизация через email. Профайл пользователя

#67. Классы PasswordChangeView и PasswordChangeDoneView

#68. Восстановление пароля. Идея алгоритма

#69. Реализация алгоритма восстановления пароля

#70. Настройка почтового сервера по SMTP-протоколу

#71. Расширение модели User. Класс AbstractUser

#72. Разрешения и группы (Permissions & Groups)