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

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

Пример панели администратора django-jet-reboot (ссылка на Github)

Несмотря на то, что одним из значительных преимуществ 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$ (один проект). 

За работу

  1. Скачиваем и устанавливаем последнюю версию 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_SIDE_MENU_COMPACT = True
Сравнение расширенного и компактного меню (ссылка на опции конфигурации)

По умолчанию 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 предоставляет широкие возможности для индивидуальной настройки панели администратора, вследствие чего она выгодно отличается по внешнему виду от предустановленного аналога.

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен

Перевод статьи Nacho Vargas: Improve Your Django Admin Panel With Django Jet

Предыдущая статья8 бесплатных шпаргалок, которые должны быть в закладках у каждого разработчика
Следующая статьяНастройка проекта TypeScript с помощью ESLint, Prettier и VS Code