Django 어드민을 Bootstrap으로 재설계하는 방법

Django 관리자 사이트는 훌륭합니다. 기능이 완전하고, 사용이 쉽고, 설계상 안전하며, 굉장히 신뢰할 수 있지만, 다소 못생겼습니다. 이는 웹사이트의 나머지 부분과의 통합을 원할 때 단점이 될 수 있습니다. 이 문제를 해결해 보겠습니다.

만약 망가지지 않았다면…

The default Django admin. (Source)

당신이 방금 Django와 Vue.js로 웹 앱을 프로토타이핑했다고 가정합시다. 많은 경우에, Django의 관리자를 백오피스 용도로 그대로 사용하고, 권한을 적절하게 설정한 후 고객에게 넘겨주는 것이 충분합니다. 결국, 이것은 완벽하게 작동하며 내장된 도구로 매우 많은 상황을 커버하도록 많이 사용자 정의할 수 있습니다.

다시 한 번, 왜 귀찮게 할까요?

관리자의 모양과 느낌을 변경해야 하는 이유

그러나 통합을 더 깊이 있게 접근해야 하는 여러 가지 유효한 이유가 있습니다.

  • 브랜딩: 당신의 회사 이름과 색상을 원하는 것은 잘못된 것이 아닙니다. “Django 관리” 대신에요 (그리고 기록으로, 이것은 Django의 BSD 라이선스와 일치합니다).
  • 메인 사이트와 관리자 간의 원활한 통합: 사이트를 탐색하는 동안 백 오피스 기능으로 전환하거나 그 반대로 전환할 수 있으면 좋을 것입니다. 공통 네비게이션 바를 가짐으로써.
  • 미적 개선: 관리자는 괜찮아 보이고 v2부터 반응형 웹 디자인 원칙을 구현하여 모바일과 데스크탑 모두에서 잘 작동합니다. 하지만 많은 것을 잘 만든 스타일 시트가 더 나은 모양을 만들 수 있습니다.
  • 우회 기능: 관리자용 사용자 정의 드롭다운 메뉴를 생성하여 실제로 사용하는 옵션을 표시하고 사용자 인터페이스에서 사용하지 않는 것을 숨기면 사용자 경험을 더 좋게 만들 수 있습니다.

A Practical Example

이 예제의 경우, 반복하지 않기 위해 Django와 Vue.js로 웹 앱 프로토타이핑 기사에 대해 시작한 간단한 게시 웹 애플리케이션을 계속합니다.

간단히 말해서:

  • a Django app with two models:
  • Article 필드 name author (연결됨), contentslug
  • Author: 필드 nameslug
  • A single view called frontend that queries all registries in both models.
  • A single template called template.
  • Vue.jsVue Router, Vuex를 통한 반응형 확장 가능한 인터페이스 구현.

이번 파트에서는 Vue.js 통합에 특별히 신경 쓰지 않고, 여기서 수정하지 않겠습니다.

기본 템플릿

Source

Django 템플릿은 매우 다재다능하고 강력하며, 앱 수준(Django 사이트의 구성 요소)이나 사이트 수준에서 생성될 수 있으며, Django에서 기본적으로 제공하는 템플릿을 덮어쓸 수도 있습니다(이번에 우리가 하려는 작업임).

Source

기본 템플릿을 생성하여 Bootstrap의 JavaScript와 스타일 시트, 그리고 함께 사용되는 도구인 jQueryPopper에 연결했습니다.

다음은 메인 사이트에 사용하고 있는 기본 템플릿으로, 다른 어떤 Django 사이트에서 사용하는 것과 크게 다르지 않습니다:

<!doctype html>
<html lang="en">
  <head>
    <!-- 필수 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 부트스트랩 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>

      <!-- 컨텐츠 -->
    </div>

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

    <!-- 먼저 jQuery, 다음으로 Popper.js, 그리고 부트스트랩 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>

다음으로, 이를 관리자 페이지에 통합하고, 메인 사이트와 백오피스 모두에서 공유되는 네비게이션 바를 추가할 것입니다!

메인 UI 템플릿을 관리자와 통합하기

언급했듯이, 우리는 템플릿 재정의를 할 수 있으며, 이는 관리자의 것을 포함합니다. 그러나 Django의 디자인 때문에, 놀랍지 않게도 메인 사이트와 백오피스는 각각 자체 템플릿, 스타일 시트 및 contrib 패키지를 가진 두 개의 다른 시스템입니다. 그래서 그들이 거의 동일할지라도, 우리는 메인 UI용과 관리자용 두 개의 다른 템플릿을 유지해야 합니다.

일반적인 템플릿용 디렉토리 활성화

먼저, Django에게 우리가 해킹한 관리자 템플릿을 기본 디렉토리의 어디에 저장할지 알려주어야 합니다.

그래서 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 %}

그리고 그게 다입니다! 우리는 단순히 bodyheaderbodyfooter 블록 태그를 생성했습니다. 그래서 다음 단계에서 관리를 래핑할 코드를 주입할 수 있습니다.

사용자 지정 관리자 템플릿 코딩 (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 문제 */
      * { 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 먼저, 다음으로 Popper.js, 그리고 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 %}

분석

여기서 무엇을 하고 있는지 설명해 보겠습니다:

  1. 우리는 템플릿 엔진에게 admin/base_site.html 템플릿을 “확장”하고 있음을 알립니다. 이는 일부 정의를 효과적으로 재정의합니다.
  2. 우리는 title 블록을 사용하여 관리자 페이지의 제목을 맞춤화합니다.
  3. 우리는 brandingbreadcrumbs 블록의 내용을 비웁니다. 이들은 실제로 필요하지 않습니다.
  4. 우리는 bodyclass 블록을 사용하여 frontend 템플릿에서와 마찬가지로 Bootstrap의 bg-light를 설정합니다.
  5. 우리는 extrastyle 블록을 사용하여 Bootstrap와 일부 CSS 코드를 포함합니다.
    a. 좋습니다, #header, .breadcrumbs { display: none; }는 3번과 유사한 재언을 하고 있지만, 브랜딩과 브레드크럼 섹션을 두 가지 방법으로 비활성화할 수 있다는 것이 유용합니다.
    b. 관리자에서 Bootstrap과 Django의 CSS를 겹칠 때 문제가 발생할 수 있으므로, 이들은 일부 수정입니다.
  6. bodyheaderbodyfooter 블록을 사용하여 관리자 콘텐츠를 래핑합니다.

이제 관리자 템플릿에 액세스할 수 있으므로, 스타일 시트를 더 발전시키거나 기본 UI와 공유되는 스타일로 둘 수 있습니다.

주의사항

우리는 기본적으로 동일한 표현을 하기 위해 두 가지 다른 템플릿(메인 UI와 관리자)을 유지하고 있습니다. 인정할 수 있듯이, 이는 이상적이지 않으며, 소프트웨어 개발의 최대치 중 하나를 명시적으로 위반하고 있습니다: 자신을 반복하지 마십시오 (DRY).

우리가 언급했듯이, 이는 Django 관리자가 메인 UI와 분리되도록 설계되었기 때문입니다. 그리고 그것에 문제가 있는 것은 아니며, 상자 밖을 생각하는 것에 문제가 있는 것도 아닙니다. 하지만 네, 그것은 거의 동일한 내용의 두 개의 템플릿을 사용하도록 강요합니다.

사실, 원칙적으로 우리는 메인 UI와 관리자의 네비게이션 바 및 기타 공통 요소를 포함하는 템플릿 패턴을 설계하고 단일 소스에서 재사용할 수 있습니다. 하지만 이 시점에서, 이 기사의 목적을 위해 해당 접근 방식은 약간 과도할 수 있습니다. 어쨌든, 저는 그 생각을 당신에게 심어 두겠습니다. 😉

공유 네비게이션 바 만들기

이제 메인 UI와 관리 사이트가 거의 동일하게 보이므로 통합을 더욱 발전시키고 공통 탐색 경험을 만들 수 있습니다. 심지어 메인 메뉴에 바로 관리 옵션을 표시할 수도 있습니다!

여기 네비게이션 바에 대한 스니펫이 있습니다:

<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>

Bootstrap의 Navbar 구성 요소에 대한 자세한 내용을 보려면 dropdown-menu 섹션을 참조하십시오.

또한 조건부 검사{% if user.is_authenticated %} /{% endif %}와 함께 수행하여 관리자 메뉴를 표시할지 여부를 결정합니다.

마지막으로, 이제 두 개의 서로 다른 기본 템플릿을 유지 관리하고 있기 때문에, 네비게이션 바의 HTML 코드를 두 곳에 추가해야 합니다. myapp/templates/myapp/template.html 그리고 templates/admin/base_site.html.

추가: 관리자 로그인 화면

관리자 사이트는 이미 처리되었지만, 그러나 아직 마무리되지 않은 부분이 있습니다: 로그인 화면입니다.

이런 것을:

Source

… 이런 것으로 바꿀 수 있습니다:

다음과 같은 템플릿을 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 %}

분석

우리가 여기서 하는 일:

  1. {{ block.super }} 태그는 extrastyle의 내용을 덮어쓰지 않고 단순히 그것에 내용을 추가한다는 것을 템플릿 엔진에게 알리기 위해 있습니다 (템플릿 상속에 대한 자세한 내용은 참조).
  2. branding 블록은 “Django administration” 헤더를 더 흥미로운 것으로 변경할 수 있게 해줍니다.
  3. head_title 블록을 빈 정의로 설정하여 제거합니다.
  4. content_title 블록을 사용하여 추가 정보를 추가합니다.

몇 가지 고려사항

Source

Bootstrap과 마찬가지로 Django 관리 사이트도 jQuery의 자체 번들을 제공하지만, Django 개발자들이 사용자가 제공한 스크립트 및 라이브러리와의 충돌을 피하기 위해 고려하여 Django의 jQuery는 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 라이브러리에서 다양한 자원을 찾을 수 있습니다.

Bootstrap으로 Django 관리자 맞춤화에 대한 자주 묻는 질문(FAQ)

Bootstrap으로 Django 관리자를 맞춤화하는 것의 이점은 무엇인가요?

부트스트랩을 사용하여 Django 관리자를 맞춤화하면 여러 가지 이점이 있습니다. 첫째, 관리자 인터페이스의 시각적 매력을 향상시켜 더 사용자 친화적이고 직관적으로 만듭니다. 부트스트랩은 타이포그래피, 폼, 버튼 및 기타 인터페이스 구성 요소에 대한 다양한 디자인 템플릿을 제공하는 인기 있는 프론트엔드 프레임워크입니다. Django 관리자와 통합하여 이러한 템플릿을 활용하여 시각적으로 더 매력적이고 기능적인 관리자 인터페이스를 만들 수 있습니다. 둘째, 관리자 인터페이스에 맞춤 기능을 추가할 수 있습니다. 예를 들어 관리자 인터페이스의 사용성을 향상시키기 위해 맞춤 작업, 필터 및 폼을 추가할 수 있습니다. 마지막으로 관리자 인터페이스의 반응성을 개선하여 다양한 기기와 화면 크기에서 더 접근 가능하게 만들 수 있습니다.

Django 관리자에 맞춤 작업을 추가하려면 어떻게 해야 하나요?

Django 관리자를 사용하면 선택한 개체에 대해 수행할 수 있는 맞춤 작업을 추가할 수 있습니다. 맞춤 작업을 추가하려면 선택한 개체에 대해 원하는 작업을 수행하는 함수를 정의해야 합니다. 이 함수는 모델 관리자, 요청 및 선택한 개체의 쿼리셋에 대한 세 가지 매개변수를 사용해야 합니다. 이 함수를 정의하면 모델 관리자의 ‘actions’ 속성에 추가할 수 있습니다. 이렇게 하면 관리 변경 목록 페이지의 작업 드롭다운에서 작업을 사용할 수 있습니다.

부트스트랩을 사용하여 Django 관리자의 모양과 느낌을 맞춤화할 수 있나요?

네, Django Admin의 디자인을 Bootstrap을 사용하여 맞춤화할 수 있습니다. Bootstrap은 타이포그래피, 폼, 버튼 및 기타 인터페이스 구성 요소에 대한 다양한 디자인 템플릿을 제공하는 프론트엔드 프레임워크입니다. Django Admin과 통합하여 이러한 템플릿을 활용하여 더 시각적으로 매력적이고 기능적인 관리자 인터페이스를 만들 수 있습니다. 관리자 인터페이스의 색상, 글꼴, 레이아웃 및 기타 디자인 요소를 브랜드 정체성이나 개인적인 선호에 맞게 조정할 수 있습니다.

Django Admin에 맞춤 필터를 추가하려면 어떻게 해야 하나요?

Django Admin은 관리자 변경 목록 페이지에 표시된 객체를 필터링하는 데 사용할 수 있는 맞춤 필터를 추가할 수 있습니다. 맞춤 필터를 추가하려면 django.contrib.admin.SimpleListFilter의 하위 클래스를 정의해야 합니다. 이 하위 클래스는 lookups와 queryset 두 가지 메서드를 정의해야 합니다. lookups 메서드는 각각 필터 옵션을 나타내는 튜플의 목록을 반환해야 합니다. queryset 메서드는 선택한 필터 옵션을 기반으로 필터링된 queryset을 반환해야 합니다. 이 하위 클래스를 정의한 후 모델 관리자의 ‘list_filter’ 속성에 추가할 수 있습니다.

추가 패키지 없이 Django Admin에 Bootstrap을 사용할 수 있나요?

추가 패키지 없이 Bootstrap을 Django Admin에 사용하는 것은 가능하지만 일반적으로 django-admin-bootstrap과 같은 패키지를 사용하는 것이 더 쉽고 효율적입니다. 이 패키지는 Django Admin용 Bootstrap 기반 테마를 제공하므로 Bootstrap을 Django Admin과 통합하는 데 도움이 됩니다. 또한 반응형 디자인 및 맞춤 폼 렌더링과 같은 추가 기능을 제공하므로 관리자 인터페이스의 사용 및 기능을 더욱 개선할 수 있습니다.

Django Admin에서 어떻게 양식 필드를 사용자 정의할 수 있나요?

Django Admin을 사용하면 객체를 생성하거나 편집하는 데 사용되는 양식 필드를 사용자 정의할 수 있습니다. 양식 필드를 사용자 정의하려면 모델 관리자의 ‘formfield_for_dbfield’ 메서드를 재정의해야 합니다. 이 메서드는 지정된 데이터베이스 필드에 대해 사용될 양식 필드 인스턴스를 반환해야 합니다. 양식 필드의 속성, 위젯 및 유효성 검사 동작을 필요에 맞게 사용자 정의할 수 있습니다.

Django Admin에 사용자 정의 뷰를 추가할 수 있나요?

예, Django Admin에 사용자 정의 뷰를 추가할 수 있습니다. 사용자 정의 뷰를 추가하려면 뷰 로직을 처리하는 메서드를 모델 관리자에 정의해야 합니다. 이 메서드는 요청을 유일한 매개변수로 받아야 하며 응답을 반환해야 합니다. 그런 다음 모델 관리자의 ‘get_urls’ 메서드에 URL 패턴을 추가하여 이 메서드를 URL에 매핑할 수 있습니다. 이렇게 하면 관리 인터페이스에서 뷰에 액세스할 수 있습니다.

Django Admin에서 목록 표시를 어떻게 사용자 정의할 수 있나요?

Django Admin을 사용하면 관리 변경 목록 페이지에 표시되는 객체 테이블인 목록 표시를 사용자 정의할 수 있습니다. 목록 표시를 사용자 정의하려면 모델 관리자의 ‘list_display’ 속성을 원하는 표시 필드 이름 목록으로 설정하십시오. 이 목록에 메서드 이름을 포함할 수도 있으며, 이 경우 해당 메서드가 각 개체에 대해 호출되고 결과가 표시됩니다.

복잡한 데이터베이스 모델에 Django Admin을 사용할 수 있나요?

네, Django Admin은 복잡한 데이터베이스 모델을 처리하도록 설계되어 있습니다. 관련 개체의 인라인 편집, 사용자 정의 양식 필드 및 사용자 정의 작업과 같은 다양한 기능을 제공하여 복잡한 데이터 구조를 관리하는 데 도움이 될 수 있습니다. 그러나 매우 복잡한 데이터 구조나 고급 데이터베이스 작업의 경우 사용자 정의 뷰, 양식 또는 작업으로 Django Admin을 확장해야 할 수도 있습니다.

Django Admin의 성능을 향상시킬 수 있는 방법은 무엇인가요?

Django Admin의 성능을 향상시킬 수 있는 여러 가지 방법이 있습니다. 한 가지 방법은 데이터베이스 쿼리를 최적화하는 것입니다. Django Admin은 모델 정의 및 관리 옵션에 따라 자동으로 데이터베이스 쿼리를 생성합니다. 그러나 이러한 쿼리는 때로 비효율적일 수 있으며, 특히 복잡한 데이터 구조나 큰 데이터 세트의 경우에는 더욱 그러합니다. 관리 옵션을 사용자 정의하고 Django의 데이터베이스 최적화 기능을 사용하여 데이터베이스 쿼리 수를 크게 줄이고 관리 인터페이스의 성능을 향상시킬 수 있습니다. 또 다른 방법은 캐싱을 사용하는 것입니다. Django는 비용이 많이 드는 작업 또는 자주 액세스하는 데이터의 결과를 캐시하는 데 사용할 수 있는 강력한 캐싱 프레임워크를 제공합니다. 캐싱을 사용하면 데이터베이스의 부하를 줄이고 관리 인터페이스의 반응성을 향상시킬 수 있습니다.

Source:
https://www.sitepoint.com/how-to-hack-redesign-customize-the-django-admin-with-bootstrap/