Сайт администрирования Django великолепен — полнофункциональный, простой в использовании, безопасный по дизайну, надежный… и несколько уродливый, что может быть чем-то вроде недостатка, если вы хотите интегрировать его с внешним видом остальной части вашего сайта. Давайте разберемся с этим.
Администратор Django по умолчанию
Допустим, вы только прототип веб — приложение с Django и Vue.js. Для широкого спектра случаев использование администратора Django для бэк-офиса как есть, и даже передача его вашему клиенту после соответствующей настройки разрешений — это нормально. В конце концов, он работает отлично, и его можно сильно настроить с помощью встроенных инструментов, чтобы охватить многие ситуации.
Итак, опять же, зачем беспокоиться?
Причины взломать внешний вид админа
Однако есть ряд веских причин для того, чтобы сделать еще один шаг в интеграции:
- Брендинг: нет ничего плохого в том, чтобы вместо «администрирования Django» указать название и цвета вашей компании (и, к сведению, это соответствует лицензии Django BSD ).
- Полная интеграция между основным сайтом и администратором: вы можете иметь возможность переключаться между функциями бэк-офиса во время навигации по сайту и наоборот, имея общую панель навигации.
- Приятно: хотя администратор выглядит нормально и даже реализовал принципы адаптивного веб-дизайна с версии 2 (он хорошо работает как на мобильных, так и на настольных компьютерах), хорошо продуманная таблица стилей может многое сделать, чтобы она выглядела лучше.
- Функциональность обхода: вы также можете просто создать настраиваемые раскрывающиеся меню для администратора, отображающие параметры, которые вы действительно используете, и скрывающие от пользовательского интерфейса то, что вам действительно не нужно, что может улучшить взаимодействие с пользователем.
- Практический пример
- Интеграция основного шаблона пользовательского интерфейса с администратором
- Включение каталога для шаблонов в целом
- Обертывание шаблона администратора ( admin/baseвзлом)
- Создание пользовательского шаблона администратора ( admin/base_siteвзлом)
- Breakdown
- Caveats
- Создание общей панели навигации
- Дополнительно: экран входа администратора
- Breakdown
- Некоторые соображения
- Демо и полный код
- Заворачивать
Практический пример
В этом примере, чтобы не повторяться, мы возобновим простое веб-приложение публикации, которое мы начали для статьи » Прототипирование веб-приложения с помощью Django и Vue.js.».
В двух словах:
- приложение Django с двумя моделями:
- Articleс полями name author(связаны) contentиslug
- Author: с полями nameиslug
- Один вид называется, frontendчто опрашивает все регистры в обеих моделях.
- Один шаблон называется template.
- Реализация Vue.js с Vue Router и Vuex для реактивного масштабируемого интерфейса.
Мы не будем особо заботиться об интеграции Vue.js в этом выпуске, и мы не будем изменять ее здесь.
Шаблоны Django очень универсальны и мощны, и могут быть созданы либо на уровне приложения (компонент сайта Django), либо на уровне сайта, и даже могут переопределять шаблоны, поставляемые с Django (что мы и сделаем здесь). ).
Мы создали базовый шаблон, который связан с JavaScript и таблицей стилей Bootstrap, а также с его сопутствующими инструментами, jQuery и Popper.
Вот базовый шаблон, который мы используем для основного сайта, ничем не отличающийся от того, что мы обычно использовали бы для любого другого сайта Django:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Django and Vue.js</title> </head> <body class="bg-light"> <div class="bg-white container"> <h1>Prototyping a Web App with Django and Vue.js</h1> <!-- Content --> </div> <!-- Vue.js --> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-router"></script> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
Затем мы интегрируем это в админку и добавим общую панель навигации на обоих концах — на основном сайте и вспомогательном офисе!
Интеграция основного шаблона пользовательского интерфейса с администратором
Как уже упоминалось, мы можем переопределить шаблоны, в том числе шаблоны администратора. Однако из-за дизайна Django и неудивительно, что основной сайт и вспомогательный офис — это две разные системы, каждая со своими собственными шаблонами, таблицами стилей и contribпакетами. Поэтому, даже если они будут почти идентичными, нам нужно будет поддерживать два разных шаблона — один для основного пользовательского интерфейса, а другой — для администратора.
Включение каталога для шаблонов в целом
Во-первых, нам нужно указать Django, где мы будем хранить взломанный шаблон администратора в базовом каталоге.
Se нам нужно отредактировать myproject/settings.py. сначала найдите TEMPLATESконстанту и этот DIRSключ:
'DIRS': [],
Измените этот код на этот:
'DIRS': [os.path.join(BASE_DIR, 'templates')],
Обертывание шаблона администратора ( admin/baseвзлом)
Если бы мы просто хотели внести косметические изменения, такие как передача настраиваемой таблицы стилей администратору или удаление / замена ее заголовка, мы могли бы справиться с этим, просто отредактировав admin/base_siteшаблон и полностью пропустив этот текущий шаг. Однако, если мы хотим пройти весь путь и » обернуть » раздел администратора, как если бы он содержался на нашем основном сайте, с возможностью иметь общий верхний и нижний колонтитулы, продолжайте читать.
Нам нужно будет скопировать Django admin/base.htmlв каталог наших шаблонов templates/admin/base.html, чтобы мы могли разместить наши оболочки.
Мы отредактируем код вокруг containerраздела, чтобы он шел следующим образом:
<!-- Container --> <div id="container"> (...) </div> <!-- END Container -->
к этому:
{% block bodyheader %}{% endblock %} <!-- Container --> <div id="container"> (...) </div> <!-- END Container --> {% block bodyfooter %}{% endblock %}
И это все! Мы просто создали bodyheaderи bodyfooterзаблокировали теги, чтобы мы могли внедрить код, который обернет администратора на следующем шаге.
Создание пользовательского шаблона администратора ( admin/base_siteвзлом)
Затем мы закодируем фактический шаблон templates/admin/base_site.html(нам нужно создать каталоги в корне нашего проекта):
{% extends "admin/base_site.html" %} {% block title %}Django with Bootstrap | Admin site{% endblock %} {% block branding %}{% endblock %} {% block breadcrumbs %}{% endblock %} {% block bodyclass %}bg-light{% endblock %} {% block extrastyle %} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style> #header, .breadcrumbs { display: none; } /* Bootstrap issues with admin */ * { box-sizing: unset; } div.module caption { caption-side: top !important; } .collapse { display: block !important; } </style> {% endblock %} {% block bodyheader %} <div class="bg-white container"> <div class="jumbotron"> <h1 class="display-4">Hacking the Django Admin with Bootstrap</h1> <p class="lead"> The <a ref="https://docs.djangoproject.com/en/dev/ref/contrib/admin/">Django administration site</a> is great—full-featured, easy to use, secure by design, rock solid… and somewhat ugly, which can be something of a downside when you want to integrate it with the look-and-feel of the rest of the website. Let’s sort that out. </p> </div> {% endblock %} {% block bodyfooter %} </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> {% endblock %}
Breakdown
Попробуем объяснить, что мы здесь делаем:
- Мы сообщаем механизму шаблонов, что мы «расширяем» admin/base_site.htmlшаблон, чтобы эффективно переопределить некоторые из его определений.
- Мы используем titleблок для настройки заголовка просматриваемой страницы администратора.
- А также мы опорожнить содержание brandingи breadcrumbsблоков, как мы на самом деле не нужны.
- Мы используем bodyclassблок для установки Bootstrap bg-light, как мы это делали в frontendшаблоне.
- Мы используем extrastyleблок для встраивания Bootstrap и некоторого кода CSS.
а. Хорошо, #header,.breadcrumbs { display: none; }это что-то вроде повторения числа 3; но полезно знать, что вы можете отключить разделы брендинга и хлебных крошек обоими способами.
б. Могут возникнуть некоторые проблемы при перекрытии Bootstrap с CSS Django в админке, так что это некоторые исправления.
Используйте bodyheaderи bodyfooterблоки, чтобы обернуть содержание администратора.
Теперь, когда у нас есть доступ к шаблону администратора, мы могли бы продолжить его таблицу стилей или просто оставить все как есть с общим стилем с основным пользовательским интерфейсом.
Caveats
Мы поддерживаем два разных шаблона (основной пользовательский интерфейс и административный), чтобы сделать практически одинаковую презентацию. По общему признанию, это не идеально, поскольку мы явно нарушаем один из принципов разработки программного обеспечения: не повторяйтесь (СУХОЙ).
Как мы уже отмечали, это связано с тем, что администратор Django был спроектирован так, чтобы быть отделенным от основного пользовательского интерфейса. И в этом нет ничего плохого, так же как нет ничего плохого в нестандартном мышлении. Но да, это заставляет нас использовать два шаблона с почти одинаковым содержанием.
Фактически, в принципе, мы могли бы разработать шаблон шаблона, который включал бы эту навигационную панель и другие общие элементы из основного пользовательского интерфейса и администратора, и повторно использовать их из этого единственного источника; но на данном этапе и для целей этой статьи такой подход был бы немного излишним. В любом случае, я оставлю эту идею для вас. 😉
Создание общей панели навигации
Теперь, когда основной пользовательский интерфейс и сайт администратора выглядят почти одинаково, мы можем пойти дальше в нашей интеграции и сделать общую навигацию… и, даже более того, представить некоторые параметры администратора прямо в главном меню!
Вот фрагмент для панели навигации:
Обратите внимание на dropdown-menuраздел, который позаботится о представлении меню администратора (см. Компонент Navbar в Bootstrap для получения дополнительной информации).
Мы также выполняем условную проверку с помощью {% if user.is_authenticated %}/ {% endif %}, чтобы решить, показывать ли мы меню администратора или нет.
Наконец, помните, что, поскольку сейчас мы поддерживаем два разных основных шаблона, нам нужно добавить HTML-код навигационной панели в оба, myapp/templates/myapp/tempalte.html и templates/admin/base_site.html.
Дополнительно: экран входа администратора
Об админке позаботились, но все еще есть слабый конец: экран входа в систему.
Теперь мы можем повернуть что-то вроде этого:
… На что-то вроде этого:
Мы можем достичь чего-то более близкого к этому, создав следующий шаблон в templtes/admin/login.html:
{% extends "admin/login.html" %} {% load i18n static %} {% block extrastyle %} {{ block.super }} <style> #header { background-color: transparent !important; } </style> {% endblock %} {% block branding %} <h1> <span style="color: #57C5A5 !important">ActionPlanNow.com</span> <br /> <small>{% block head_title %}{% endblock %}</small> </h1> {% endblock %} {% block content_title %} <p class="lead" style="font-size: larger"> A Simple Tool for Leaders, Coaches, and Counselors. </p> {% endblock %}
Breakdown
Что мы здесь делаем:
- {{ block.super }}Тег там сказать шаблон двигателя, который мы не перекрывая содержания extrastyle(что мы определили в templates/admin/base_site.htmlшаблоне), но мы просто добавляя к нему содержимое (см наследования шаблоновдля получения дополнительной информации).
- brandingБлок позволяет изменить заголовок «администрирования Django» к чему — то более интересное.
- Избавляемся от head_titleблока, задав пустое определение.
- Мы используем content_titleблок, чтобы добавить дополнительную информацию.
Некоторые соображения
Как и Bootstrap, сайт администратора Django также предоставляет свой собственный пакет jQuery, но, к счастью, разработчики Django продумали это, и, чтобы избежать конфликтов с пользовательскими скриптами и библиотеками, jQuery Django имеет пространство имен как django.jQuery. Таким образом, мы можем безопасно включить вашу собственную копию (как мы это сделали).
Будьте осторожны, когда сходите с ума с определениями классов в своей основной таблице стилей, так как это также повлияет на сайт администратора, неожиданным образом повлияя на его функциональность. В этом случае вы всегда можете увидеть, что происходит, с помощью инструментов отладки вашего браузера, таких как Chrome DevTools, Firefox Developer Tools (особенно Page Inspector ) или Safari Developer Tools.
Демо и полный код
Эта реализация, которую мы здесь обсуждали, будет выглядеть так:
Вы можете перемещаться по всему коду проекта в моем репозитории GitHub, luzdealba / djangovuejs.
Заворачивать
Хотя некоторые могут утверждать — вполне разумно — что нет особой необходимости изменять внешний вид администратора Django, также верно и то, что плавная интеграция различных конечных точек сайта — отличный способ улучшить UX, поскольку он может обеспечить плавный переход между двумя, и даже более контролируемая навигация в админке.
И сделать это не так уж и сложно. На что вам нужно обратить внимание, так это на то, как вы обертываете админку, а также на то, как вы смешиваете сторонние библиотеки с вашим собственным кодом JavaScript и таблицами стилей. К счастью, вы можете легко интегрировать некоторые из них в админку, некоторые — в остальную часть основного сайта, а некоторые — в оба.
Надеюсь, у вас есть идеи о том, как можно дальше настраивать Django не столь очевидными способами!
Если вам нужен повод для создания веб-приложения, чтобы вы могли поиграть с администратором Django, ознакомьтесь с учебником прошлой недели по созданию прототипа веб-приложения с помощью Django и Vue.js — это очень весело. А если вы хотите развить свои навыки работы с Django, в библиотеке SitePoint Premium есть множество ресурсов для вас.