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

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

Смотреть материал на YouTube | RuTube

Архив проекта: 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

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

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

Видео по теме