Cómo Rediseñar el Administrador de Django con Bootstrap

El sitio de administración de Django es excelente — con todas las características, fácil de usar, seguro por diseño, sólido como una roca… y algo feo, lo cual puede ser un inconveniente cuando deseas integrarlo con el aspecto y sensación del resto de tu sitio web. Vamos a solucionarlo.

Si No Está Roto…

Digamos que acabas de prototipar una aplicación web con Django y Vue.js. Para una amplia gama de casos, usar el administrador de Django para fines de back office tal como está, e incluso entregarlo a tu cliente después de establecer permisos adecuadamente, está bien. Después de todo, funciona perfectamente y puede ser muy personalizado con las herramientas incorporadas para abarcar muchas situaciones.

Entonces, ¿por qué preocuparse?

Razones para Modificar el Aspecto y Sensación del Administrador

Sin embargo, hay varias razones válidas para llevar la integración un paso más allá:

Identidad Corporativa: no hay nada malo en querer el nombre y los colores de tu empresa en lugar de “Administración de Django” (y, por cierto, esto está en conformidad con la licencia BSD de Django).
Integración sin fisuras entre el sitio principal y el administrador: podrías querer poder cambiar entre la funcionalidad de back office mientras navegas por el sitio, y viceversa, mediante una barra de navegación común.
Embellecimiento: aunque el administrador se ve bien, e incluso ha implementado los principios de diseño web responsivo desde la versión 2 (funciona bien tanto en móviles como en escritorio), hay mucho que una hoja de estilo bien elaborada puede hacer para mejorar su aspecto.
Funcionalidad de bypass: también podrías simplemente querer crear menús desplegables personalizados para el administrador, mostrando las opciones que realmente usas y ocultando de la interfaz de usuario lo que no necesitas, lo que podría mejorar la experiencia de usuario.

A Practical Example

Para este ejemplo, y para no repetirnos, retomaremos la aplicación web de publicación simple que comenzamos para el artículo Prototipado de una Aplicación Web con Django y Vue.js.

En pocas palabras:

a Django app with two models:
Artículo con campos nombre autor (enlazado), contenido y slug
Autor: con campos nombre y slug
A single view called frontend that queries all registries in both models.
A single template called template.
Implementación de Vue.js con Vue Router y Vuex para una interfaz reactiva escalable.

No nos preocuparemos especialmente por la integración de Vue.js en esta entrega, y no la modificaremos aquí.

La Plantilla Básica

Plantillas de Django son muy versátiles y potentes, y pueden ser creadas a nivel de aplicación (un componente del sitio Django) o a nivel del sitio, e incluso pueden anular las plantillas que vienen con Django (lo cual es lo que haremos aquí).

Creamos una plantilla básica que enlaza con el JavaScript y la hoja de estilo de Bootstrap, además de sus herramientas complementarias, jQuery y Popper.

Aquí está la plantilla base que estamos utilizando para el sitio principal, no muy diferente de lo que normalmente usaríamos para cualquier otro sitio Django:

<!doctype html>
<html lang="en">
  <head>
    <!-- Etiquetas meta requeridas -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS de Bootstrap -->
    <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>

      <!-- Contenido -->
    </div>

    <!-- Vue.js -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>

    <!-- jQuery primero, luego Popper.js, luego 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/[email protected]/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>

A continuación, lo integraremos en el administrador y agregaremos una barra de navegación compartida en ambos extremos: el sitio principal y la oficina trasera.

Integrando la Plantilla de IU Principal con el Administrador

Como se mencionó, podemos sobreescribir plantillas, incluidas las del administrador. Sin embargo, debido al diseño de Django, y como era de esperar, el sitio principal y la oficina trasera son dos sistemas diferentes, cada uno con sus propias plantillas, hojas de estilo y paquetes contrib. Por lo tanto, aunque serán casi idénticos, necesitaremos mantener dos plantillas diferentes: una para la IU principal y otra para el administrador.

Habilitar un Directorio para Plantillas en General

Primero, necesitamos indicarle a Django dónde almacenaremos la plantilla modificada del administrador en el directorio base.

Por lo tanto, tendremos que editar myproject/settings.py. Primero, localice la constante TEMPLATES y esta clave DIRS:

'DIRS': [],

Cambie ese código a esto:

'DIRS': [os.path.join(BASE_DIR, 'templates')],

Envolviendo la Plantilla del Administrador (`admin/base` Hack)

Si solo deseáramos realizar cambios cosméticos, como pasar una hoja de estilo personalizada al administrador, o eliminar/reemplazar su encabezado, podríamos hacerlo editando la plantilla admin/base_site y saltarnos este paso actual por completo. Sin embargo, si queremos ir hasta el final y “envolver” la sección de administración como si estuviera contenida dentro de nuestro sitio principal, con la posibilidad de tener un encabezado y pie de página comunes, entonces sigue leyendo.

Necesitaremos copiar el admin/base.html de Django a nuestro directorio de plantillas en templates/admin/base.html, para que podamos colocar nuestros envoltorios.

Editará el código alrededor de la sección container, de modo que pase de esto:

<!-- Container -->
<div id="container">
(...)
</div>
<!-- END Container -->

a esto:

{% block bodyheader %}{% endblock %}

<!-- Container -->
<div id="container">
(...)
</div>
<!-- END Container -->

{% block bodyfooter %}{% endblock %}

¡Y eso es todo! Simplemente creamos las etiquetas de bloque bodyheader y bodyfooter, para que pudiéramos inyectar el código que envolverá el administrador en el siguiente paso.

Codificando una Plantilla de Administrador Personalizada (`admin/base_site` Hack)

Entonces, codificaremos la plantilla real en templates/admin/base_site.html (tendremos que crear las carpetas en la raíz de nuestro proyecto):

{% 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; }

      /* Problemas de Bootstrap con el administrador */
      * { 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 primero, luego Popper.js, luego 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/[email protected]/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 %}

Desglose

Intentemos explicar lo que estamos haciendo aquí:

Le decimos al motor de plantillas que estamos “extendiendo” la plantilla admin/base_site.html, para sobreescribir efectivamente algunas de sus definiciones.
Utilizamos el bloque title para personalizar un título para la página de administración que se está visitando.
Vaciamos el contenido de los bloques branding y breadcrumbs, ya que no los necesitamos realmente.
Utilizamos el bloque bodyclass para establecer el bg-light de Bootstrap, como lo hicimos en la plantilla frontend.
Utilizamos el bloque extrastyle para incrustar Bootstrap y algo de código CSS.
a. Está bien, #header, .breadcrumbs { display: none; } es algo así como una reafirmación del número 3; pero es útil saber que puedes desactivar las secciones de marca y breadcrumbs de ambas maneras.
b. Pueden surgir algunos problemas al superponer Bootstrap con CSS de Django en el administrador, por lo que estas son algunas soluciones.
Utilice los bloques bodyheader y bodyfooter para envolver el contenido del administrador.

Ahora que tenemos acceso a la plantilla del administrador, podríamos profundizar su hoja de estilo, o simplemente dejarlo así con un estilo compartido con la interfaz principal.

Advertencias

Estamos manteniendo dos plantillas diferentes (interfaz principal y administración) para presentar esencialmente lo mismo. Sin duda, esto no es ideal, ya que estamos violando explícitamente uno de los principios fundamentales del desarrollo de software: no te repitas (DRY).

Como comentamos, esto se debe a que el administrador de Django está diseñado para estar separado de la interfaz principal. Y no hay nada de malo en eso, al igual que no hay nada de malo en pensar fuera de la caja. Pero sí, eso nos obliga a usar dos plantillas con contenido casi idéntico.

En realidad, en principio podríamos diseñar un patrón de plantilla que incluyera esa barra de navegación y otros elementos comunes de la interfaz principal y el administrador, y reutilizarlos desde esa única fuente; pero en este momento, y con el propósito de este artículo, ese enfoque sería un poco excesivo. De todos modos, dejaré la idea plantada para ti. 😉

Creando una Barra de Navegación Compartida

Ahora que la interfaz principal y el sitio del administrador se parecen casi lo mismo, podemos profundizar en nuestra integración y crear una experiencia de navegación común… ¡e incluso presentar algunas opciones de administración directamente en el menú principal!

Aquí está el fragmento para la barra de navegación:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a
        class="nav-link text-primary"
        href="/author/"
      >
        Go to Authors
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link text-primary"
        href="/article/"
      >
        Go to Articles
      </a>
    </li>
    {% if user.is_authenticated %}
    <li class="nav-item dropdown">
      <a
        aria-expanded="false"
        aria-haspopup="true"
        class="font-weight-bold nav-link text-primary dropdown-toggle"
        data-toggle="dropdown"
        href="#"
        role="button"
      >
        Admin
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="/admin/myapp/author/">
          Manage authors
        </a>
        <a class="dropdown-item" href="/admin/myapp/article/">
          Manage articles
        </a>
      </div>
    </li>
    {% endif %}
  </ul>
</nav>

Fíjate en la sección dropdown-menu, que se encargará de presentar un menú de administración (consulta el componente Navbar de Bootstrap para obtener más información).

También realizamos una verificación condicional con {% if user.is_authenticated %} /{% endif %}, para decidir si mostramos o no el menú de administración.

Por último, recuerda que, dado que ahora mantenemos dos plantillas principales diferentes, tendremos que agregar el código HTML de la barra de navegación a ambas, myapp/templates/myapp/template.html y templates/admin/base_site.html.

Extra: la Pantalla de Inicio de Sesión del Administrador

El sitio de administración ha sido atendido, pero aún queda un cabo suelto: la pantalla de inicio de sesión.

Ahora podríamos transformar algo como esto:

… en algo como esto:

Podemos lograr algo más cercano a eso creando la siguiente plantilla en templates/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 %}

Análisis

Lo que estamos haciendo aquí:

La etiqueta {{ block.super }} indica al motor de plantillas que no estamos anulando el contenido de extrastyle (que definimos en la plantilla templates/admin/base_site.html) sino que simplemente estamos agregando contenido a él (consulta herencia de plantillas para obtener más información).
El bloque branding nos permite cambiar el encabezado “Administración de Django” por algo más interesante.
Eliminamos el bloque head_title estableciendo una definición vacía.
Utilizamos el bloque content_title para agregar información adicional.

Algunas Consideraciones

Al igual que Bootstrap, el sitio de administración de Django también incluye su propio conjunto de jQuery, pero afortunadamente, los desarrolladores de Django pensaron en esto y para evitar conflictos con scripts y bibliotecas suministradas por el usuario, jQuery de Django está nombrado como django.jQuery. Por lo tanto, podemos incluir nuestra propia copia (como hemos hecho) de forma segura.

Tenga cuidado al exagerar con las definiciones de clases en su hoja de estilos principal, ya que eso también afectará al sitio de administración, afectando su funcionalidad de maneras inesperadas. En tal caso, siempre puede ver lo que está sucediendo con las herramientas de depuración de su navegador, como Chrome DevTools, Firefox Developer Tools (especialmente Page Inspector), o Safari Developer Tools.

Demostración y Código Completo

Esta implementación que hemos discutido aquí se verá así:

Puede navegar todo el código del proyecto en mi repositorio de GitHub, luzdealba / djangovuejs.

Conclusión

Aunque algunos podrían afirmar, con toda razón, que no hay mucha necesidad de alterar la apariencia del administrador de Django, también es cierto que integrar de manera fluida los diferentes puntos finales de un sitio es una excelente solución para mejorar la UX, ya que puede proporcionar una transición sin problemas entre los dos, e incluso una navegación más controlada del administrador.

Y hacerlo no es tan difícil. Lo que debes prestar atención es cómo envolves al administrador y también cómo mezclas las bibliotecas de terceros con tu propio código JavaScript y hojas de estilo. Afortunadamente, puedes integrar fácilmente algunas en el administrador, algunas en el resto del sitio principal y algunas en ambas.

Con suerte, tienes algunas ideas sobre cómo puedes personalizar aún más Django de maneras que no eran tan evidentes!

Si necesitas una excusa para construir una aplicación web solo para jugar con el administrador de Django, consulta el tutorial de la semana pasada sobre prototipar una aplicación web con Django y Vue.js — es mucha diversión. Y si quieres llevar tus habilidades de Django más allá, la Biblioteca Premium de SitePoint tiene montones de recursos para ti.

Preguntas Frecuentes (FAQs) sobre Personalizar el Administrador de Django con Bootstrap

¿Cuáles son los beneficios de personalizar el Administrador de Django con Bootstrap?

Personalizar Django Admin con Bootstrap ofrece varios beneficios. En primer lugar, mejora el atractivo visual de tu interfaz de administración, haciéndola más amigable y fácil de usar. Bootstrap es un popular framework front-end que proporciona una variedad de plantillas de diseño para tipografía, formularios, botones y otros componentes de la interfaz. Al integrarlo con Django Admin, puedes aprovechar estas plantillas para crear una interfaz de administración más atractiva y funcional. En segundo lugar, te permite agregar funcionalidades personalizadas a tu interfaz de administración. Por ejemplo, puedes agregar acciones personalizadas, filtros y formularios para mejorar la usabilidad de tu interfaz de administración. Por último, puede mejorar la capacidad de respuesta de tu interfaz de administración, haciéndola más accesible en diferentes dispositivos y tamaños de pantalla.

¿Cómo puedo agregar acciones personalizadas a Django Admin?

Django Admin te permite agregar acciones personalizadas que se pueden realizar en objetos seleccionados. Para agregar una acción personalizada, debes definir una función que realice la acción deseada en los objetos seleccionados. Esta función debe tomar tres parámetros: el administrador del modelo, la solicitud y un queryset de los objetos seleccionados. Una vez que hayas definido esta función, puedes agregarla al atributo ‘acciones’ de tu administrador de modelos. Esto hará que la acción esté disponible en el menú desplegable de acciones en la página de lista de cambios de administración.

¿Puedo personalizar el aspecto y la sensación de Django Admin usando Bootstrap?

Sí, puedes personalizar la apariencia y el diseño del Django Admin utilizando Bootstrap. Bootstrap es un framework front-end que proporciona una variedad de plantillas de diseño para tipografía, formularios, botones y otros componentes de la interfaz. Al integrarlo con Django Admin, puedes aprovechar estas plantillas para crear una interfaz administrativa más atractiva visualmente y funcional. Puedes personalizar los colores, fuentes, diseño y otros elementos de diseño de tu interfaz administrativa para que coincidan con la identidad de tu marca o tus preferencias personales.

¿Cómo agrego filtros personalizados al Django Admin?

Django Admin te permite agregar filtros personalizados que se pueden utilizar para filtrar los objetos mostrados en la página de lista de cambios del administrador. Para agregar un filtro personalizado, debes definir una subclase de django.contrib.admin.SimpleListFilter. Esta subclase debe definir dos métodos: lookups y queryset. El método lookups debe devolver una lista de tuplas, cada una representando una opción de filtro. El método queryset debe devolver un queryset filtrado basado en la opción de filtro seleccionada. Una vez que hayas definido esta subclase, puedes agregarla al atributo ‘list_filter’ de tu administrador de modelos.

¿Puedo usar Bootstrap con Django Admin sin paquetes adicionales?

Aunque es posible usar Bootstrap con Django Admin sin ningún paquete adicional, generalmente es más fácil y eficiente utilizar un paquete como django-admin-bootstrap. Este paquete proporciona un tema basado en Bootstrap para Django Admin, lo que facilita la integración de Bootstrap con Django Admin. También proporciona características adicionales como diseño responsivo y renderizado de formularios personalizados, que pueden mejorar aún más la usabilidad y funcionalidad de tu interfaz administrativa.

¿Cómo puedo personalizar los campos del formulario en Django Admin?

Django Admin te permite personalizar los campos del formulario utilizados para crear o editar objetos. Para personalizar un campo de formulario, debes sobrescribir el método ‘formfield_for_dbfield’ de tu administrador de modelos. Este método debe devolver una instancia de campo de formulario que se utilizará para el campo de base de datos especificado. Puedes personalizar los atributos del campo de formulario, widgets y comportamiento de validación para satisfacer tus necesidades.

¿Puedo agregar vistas personalizadas a Django Admin?

Sí, puedes agregar vistas personalizadas a Django Admin. Para agregar una vista personalizada, debes definir un método en tu administrador de modelos que maneje la lógica de la vista. Este método debe tomar una solicitud como único parámetro y devolver una respuesta. Luego, puedes mapear este método a una URL agregando un patrón de URL al método ‘get_urls’ de tu administrador de modelos. Esto hará que la vista sea accesible desde la interfaz de administración.

¿Cómo puedo personalizar la lista de visualización en Django Admin?

Django Admin te permite personalizar la lista de visualización, que es la tabla de objetos mostrada en la página de lista de cambios de administración. Para personalizar la lista de visualización, puedes establecer el atributo ‘list_display’ de tu administrador de modelos en una lista de nombres de campos que deseas mostrar. También puedes incluir nombres de métodos en esta lista, lo que llamará al método correspondiente en cada objeto y mostrará el resultado.

¿Puedo usar Django Admin para modelos de base de datos complejos?

Sí, Django Admin está diseñado para manejar modelos de bases de datos complejos. Proporciona una variedad de características que pueden ayudarte a gestionar estructuras de datos complejas, como la edición en línea de objetos relacionados, campos de formulario personalizados y acciones personalizadas. Sin embargo, para estructuras de datos muy complejas o operaciones de base de datos avanzadas, es posible que necesites extender Django Admin con vistas, formularios o acciones personalizados.

¿Cómo puedo mejorar el rendimiento de Django Admin?

Existen varias formas de mejorar el rendimiento de Django Admin. Una manera es optimizar tus consultas a la base de datos. Django Admin genera automáticamente consultas a la base de datos en función de las definiciones de tus modelos y opciones de administración. Sin embargo, estas consultas a veces pueden ser ineficientes, especialmente para estructuras de datos complejas o conjuntos de datos grandes. Al personalizar tus opciones de administración y utilizar las características de optimización de base de datos de Django, puedes reducir significativamente el número de consultas a la base de datos y mejorar el rendimiento de tu interfaz de administración. Otra forma es utilizar la caché. Django proporciona un robusto marco de caché que puedes utilizar para almacenar en caché los resultados de operaciones costosas o datos accedidos con frecuencia. Al usar la caché, puedes reducir la carga en tu base de datos y mejorar la respuesta de tu interfaz de administración.