Как изменить админку Django с помощью Bootstrap

Администратор Django по умолчанию Программирование и разработка

Сайт администрирования Django великолепен — полнофункциональный, простой в использовании, безопасный по дизайну, надежный… и несколько уродливый, что может быть чем-то вроде недостатка, если вы хотите интегрировать его с внешним видом остальной части вашего сайта. Давайте разберемся с этим.

Администратор Django по умолчанию

Администратор Django по умолчанию

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

Итак, опять же, зачем беспокоиться?

Причины взломать внешний вид админа

Однако есть ряд веских причин для того, чтобы сделать еще один шаг в интеграции:

  • Брендинг: нет ничего плохого в том, чтобы вместо «администрирования Django» указать название и цвета вашей компании (и, к сведению, это соответствует лицензии Django BSD ).
  • Полная интеграция между основным сайтом и администратором: вы можете иметь возможность переключаться между функциями бэк-офиса во время навигации по сайту и наоборот, имея общую панель навигации.
  • Приятно: хотя администратор выглядит нормально и даже реализовал принципы адаптивного веб-дизайна с версии 2 (он хорошо работает как на мобильных, так и на настольных компьютерах), хорошо продуманная таблица стилей может многое сделать, чтобы она выглядела лучше.
  • Функциональность обхода: вы также можете просто создать настраиваемые раскрывающиеся меню для администратора, отображающие параметры, которые вы действительно используете, и скрывающие от пользовательского интерфейса то, что вам действительно не нужно, что может улучшить взаимодействие с пользователем.

Практический пример

В этом примере, чтобы не повторяться, мы возобновим простое веб-приложение публикации, которое мы начали для статьи » Прототипирование веб-приложения с помощью Django и Vue.js.».

Читайте также:  Неупорядоченная карта в C++

В двух словах:

  • приложение 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

Попробуем объяснить, что мы здесь делаем:

  1. Мы сообщаем механизму шаблонов, что мы «расширяем» admin/base_site.htmlшаблон, чтобы эффективно переопределить некоторые из его определений.
  2. Мы используем titleблок для настройки заголовка просматриваемой страницы администратора.
  3. А также мы опорожнить содержание brandingи breadcrumbsблоков, как мы на самом деле не нужны.
  4. Мы используем bodyclassблок для установки Bootstrap bg-light, как мы это делали в frontendшаблоне.
  5. Мы используем 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

Что мы здесь делаем:

  1. {{ block.super }}Тег там сказать шаблон двигателя, который мы не перекрывая содержания extrastyle(что мы определили в templates/admin/base_site.htmlшаблоне), но мы просто добавляя к нему содержимое (см наследования шаблоновдля получения дополнительной информации).
  2. brandingБлок позволяет изменить заголовок «администрирования Django» к чему — то более интересное.
  3. Избавляемся от head_titleблока, задав пустое определение.
  4. Мы используем 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 есть множество ресурсов для вас.

Оцените статью
bestprogrammer.ru
Добавить комментарий