13,8 тыс подписчиков

Как заказывали: админ-панель от Django Jet

14 августа 202214 авг 2022

6 мин

Оглавление

За работу
Настраиваемые опции
Тема

Утверждение о том, что каждый разработчик Django доволен предустановленной панелью администратора, довольно спорное. Предлагаю рассмотреть альтернативный вариант.

Несмотря на то, что одним из значительных преимуществ Django является возможность быстрой разработки с нуля, вид базовой админ-панели может не соответствовать текущему облику и состоянию страницы Django в целом.

Если вы хотите усовершенствовать панель администратора, но у вас нет времени на полную настройку путем создания собственных пользовательских представлений, то рекомендую воспользоваться django-jet-reboot.

Django Jet Reboot — это обновление изначального шаблона Django Jet, позволяющего максимально легко улучшить общий внешний вид админ-панели.

Перед продолжением работы обратим внимание на два обстоятельства.

1) django-jet-rebootподдерживает только Django >= 3.0 и Python >= 3.7.

2) Данная библиотека и django-jet имеют строго свободную лицензию AGPLv3. Хотя Django Jet предлагает еще и коммерческую лицензию за 65$ (один проект).

За работу

Скачиваем и устанавливаем последнюю версию django-jet-reboot с помощью pip:

pip install django-jet-reboot

2. Добавляем его в раздел INSTALLED_APPS настроек Django (файл settings.py).

Важно: он должен предшествовать django.contrib.admin.

INSTALLED_APPS = (
...
'jet',
'django.contrib.admin',
)

3. Проверяем, чтобы контекстный процессор django.template.context_processors.request был указан в settings.py:

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
...
'django.template.context_processors.request',
...
],
},
},
]

4. Добавляем URL-шаблон Django Jet в файл urls проекта:

urlpatterns = patterns(
'',
path('jet/', include('jet.urls', 'jet')), # URL-адреса Django JET
path('admin/', include(admin.site.urls)),
...
)

5. Выполняем команду migrate для создания таблиц базы данных:

python manage.py migrate jet

Можете пропустить следующий шаг, если вы работаете не в среде продакшн.

Выполняем collectstatic:

python manage.py collectstatic

Чистим кэш браузера и тестируем!

Если все успешно сработало, увидим страницу авторизации Django Jet по URL-адресу /admin:

Страница авторизации админ-панели django-jet-reboot

Пока не авторизуйтесь, есть вариант получше.

Чтобы воспользоваться всеми преимуществами библиотеки, стоит установить приложение Django Jet Dashboard.

6. Добавляем приложение jet.dashboard в файл settings.py:

INSTALLED_APPS = (
...
'jet.dashboard',
'jet',
'django.contrib.admin',
...
)

7. Добавляем urls приложения jet.dashboard в главный файл urls:

urlpatterns = patterns(
'',
path('jet/', include('jet.urls', 'jet')), # URL-адреса Django JET
path('jet/dashboard/', include('jet.dashboard.urls', 'jet-dashboard')), # URL-адреса Django JET dashboard
path('admin/', include(admin.site.urls)),
...
)

8. Создаем модели (снова…):

python manage.py migrate dashboard

Можете пропустить следующий шаг, если вы работаете не в среде продакшн.

Выполняем collectstatic (снова…).

python manage.py collectstatic

Вот теперь можно войти в админ-панель и посмотреть!

Переходим к индивидуальным настройкам.

Настраиваемые опции

Эта часть взята из django-jet. Опции конфигурации предоставлены в файле settings.py.

Тема

Jet предлагает 6 тем:

по умолчанию;
зеленую;
светло-фиолетовую;
светло-зеленую;
голубую;
светло-серую.

Для установки новой темы просто добавляем JET_DEFAULT_THEME в настройки:

JET_DEFAULT_THEME = 'light-gray'

Пользователь может динамически выбрать тему. Для этого нужно добавить список возможных тем в settings.py:

JET_THEMES = [
{
'theme': 'default', # название папки с темой
'color': '#47bac1', # цвет кнопки выбора темы в пользовательском меню
'title': 'Default' # название темы
},
{
'theme': 'green',
'color': '#44b78b',
'title': 'Green'
},
{
'theme': 'light-green',
'color': '#2faa60',
'title': 'Light Green'
},
{
'theme': 'light-violet',
'color': '#a464c4',
'title': 'Light Violet'
},
{
'theme': 'light-blue',
'color': '#5EADDE',
'title': 'Light Blue'
},
{
'theme': 'light-gray',
'color': '#222',
'title': 'Light Gray'
}
]

Пользователям предоставляется выбор:

Выбор темы django-jet (ссылка на опции конфигурации)

С помощью Jet вы также можете внести собственные цветовые схемы, добавив новую папку в /static/jet/css/themes/<my_theme>.

Согласно документации в качестве примера можно использовать папку /jet/static/jet/css/themes/light-violet/.

_variables.scss содержит все настраиваемые переменные.

Для применения собственной темы необходимо собрать все файлы .scss в каталоге theme.

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

Настроим элементы меню.

Воспользуемся JET_SIDE_MENU_ITEMS в settings.py для отображения нужных приложений и моделей или изменения их порядка:

JET_SIDE_MENU_ITEMS = [ # Список приложений или пользовательских элементов dict
{'label': _('General'), 'app_label': 'core', 'items': [
{'name': 'help.question'},
{'name': 'pages.page', 'label': _('Static page')},
{'name': 'city'},
{'name': 'validationcode'},
{'label': _('Analytics'), 'url': 'http://example.com', 'url_blank': True},
]},
{'label': _('Users'), 'items': [
{'name': 'core.user'},
{'name': 'auth.group'},
{'name': 'core.userprofile', 'permissions': ['core.user']},
]},
{'app_label': 'banners', 'items': [
{'name': 'banner'},
{'name': 'bannertype'},
]},
]

Каждый элемент имеет следующие ключи:

app_label — имя приложения (имя приложения Django);
label — текстовая метка приложения;
items — список дочерних элементов;
url — пользовательский URL (формат описан ниже);
url_blank — открытие URL в новой таблице (логическое значение);
permissions — список необходимых разрешений для отображения элемента.

Обязательно требуется поле items, а также app_label или label. Стоит только допустить ошибки в их определении, и никакого меню в портале мы не увидим.

Каждый элемент меню также представляет собой словарь dict с указанными ниже ключами:

name — имя модели (возможен как вариант MODEL_NAME, так APP_LABEL.MODEL_NAME);
label — текстовая метка элемента;
url — пользовательский URL (формат описан ниже);
url_blank — открытие URL в новой таблице (логическое значение);
permissions — список необходимых разрешений для отображения элемента.

Для элементов в обязательном порядке устанавливается name или label. Соблюдается очередность элементов.

С полным списком настраиваемых элементов можно ознакомиться на странице документации. Учитывая ограниченный формат статьи, мы рассмотрели не все возможности конфигурации. Интерес также представляет функциональность автозаполнения полей поиска и фильтров админ-панели.

Заключение

Стоит ли игра свеч? Конечно да, в условиях нехватки времени на создание собственной пользовательской панели. Именно поэтому мы часто выбираем Django, чтобы быстро создать MVP или прототип.

Если у вас есть время и потребность в настоящей пользовательской админ-панели, рекомендую самостоятельно создать представления и переписать предустановленную панель. Django особенно хорош тем, что все эти представления являются настраиваемыми. Именно для таких целей как нельзя лучше подходят такие пакеты, как django-jet.

В целом, Jet предоставляет широкие возможности для индивидуальной настройки панели администратора, вследствие чего она выгодно отличается по внешнему виду от предустановленного аналога.

Как заказывали: админ-панель от Django Jet

За работу

Настраиваемые опции

Тема

Меню

Заключение