איך לעיצבן מחדש של ה-Django Admin עם Bootstrap

האתר הניהולי של דגנו גדול – מלא פונקציות, קל לשימוש, בטוח בעיצובו, יציב כצורה של סלע… ובעל מראה מעט מכוער, מה שיכול להיות חסרון מסוים כשאתה רוצה לשלב אותו עם המראה והתחושה של שאר האתר שלך. בואו נתקן את זה.

אם זה לא שבור…

The default Django admin. (Source)

נניח שבדיוק פתחת אפליקציה אינטרנט עם דג'נגו וויו.ג'ס. עבור מגוון רחב של מקרים, להשתמש ב-admin של דגנו למטרות משרד כפי שהוא, ואף להעביר אותו ללקוח שלך לאחר הגדרת הרשאות באופן מתאים, זה בסדר. אחרי הכל, זה עובד באופן מושלם ואפשר להתאים אותו באופן משמעותי עם הכלים הבנויים בתוכו כדי לכסות הרבה מצבים.

אז שוב, למה להתעסק?

סיבות לפיצוח המראה והתחושה של ה-admin

עם זאת, יש מספר סיבות תקפות לקחת את השילוב צעד נוסף:

  • שיווק: אין שום דבר רע בלרצות את השם והצבעים של החברה שלך במקום "ניהול דגנו" (ועל פי הרשות, זה עומד בתקן עם רשיון BSD של דגנו).
  • שילוב חלק בין אתר הראשי לאינטרפיית המנהל: ייתכן שתרצה לעבור בין פונקציונליות הראש לבין האתר ולהפך, על ידי יצירת מרכז ניווט משותף ברזי ניווט.
  • מראה מעודן: בעוד שהאינטרפיית המנהל נראית בסדר, וכבר משתמשת בעקרונות עיצוב אינטרנט מסתובב מאז וב2 (היא עובדת טוב גם במובייל וגם במחשב יחידה), יש כל כך הרבה שמסד נתונים מעוצב היטב יכול לעשות כדי להפוך אותו לנראה טוב יותר.
  • פונקציונליות סילוק: ייתכן שתרצה גם ליצור תפריטים מפותלים מותאמים אישית עבור המנהל, המציגים את האפשרויות שאתה באמת משתמש ומסתירים מהממשק המשתמש מה שאתה לא באמת צריך, מה שיכול להביא לחוויה משתמש טובה יותר.

A Practical Example

לשם דוגמה זו, ולא לחזור על עצמנו, נחזור לאפליקציה האינטרנטית הפורסמה הפשוטה שהתחלנו עבור המתודולוגיה של אפליקציה אינטרנטית עם Django ו-Vue.js מאמר.

בקצרה:

  • a Django app with two models:
  • <קוד>מאמר עם שדות <קוד>שם <קוד>מחבר (קשור), <קוד>תוכן ו-<קוד>סלאג
  • <קוד>מחבר: עם שדות <קוד>שם ו-<קוד>סלאג
  • A single view called frontend that queries all registries in both models.
  • A single template called template.
  • יישום של Vue.js עם Vue Router ו-Vuex לממשק מתקדם ומתקצב.

לא נתעמק באינטגרציה עם Vue.js בפרק זה, ולא נשנה אותה כאן.

התבנית הבסיסית

Source

תבניות Django הן מאוד גמישות ועוצמתיות, וניתן ליצור אותן ברמה של יישום (רכיב של אתר Django) או ברמת האתר, ואפילו להחליף את התבניות המגיעות עם Django (מה שנעשה כאן).

Source

יצרנו תבנית בסיסית המקשרת ל-Bootstrap של JavaScript וגיליון הסגנון שלו, וגם לכלים השותפים שלו, jQuery ו-Popper.

הנה התבנית הבסיסית שאנו משתמשים בה לאתר הראשי, לא שונה בכלל ממה שהיינו משתמשים בו באיזה שהוא אתר 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>

לאחר מכן, נשלב את זה במערכת הניהול, ונוסיף שורת ניווט משותפת בשני הצדדים – האתר הראשי ומשרד הבית!

שילוב תבנית הממשק הראשי עם המערכת הניהולית

כפי שציינו, אנו יכולים לדפוס תבניות, כולל זאת של המערכת הניהולית. עם זאת, בגלל התכנון של דג'נגו, ולא במקרה, האתר הראשי ומשרד הבית הם שתי מערכות שונות, כל אחת עם תבניות, גרפיקה וחבילות contrib. אז גם אם הן יהיו כמעט זהות, נצטרך לשמור על שתי תבניות שונות – אחת לממשק הראשי, ואחת למערכת הניהול.

הפעלת ספרייה לתבניות באופן כללי

ראשית, עלינו להודיע לדג'נגו היכן נאחסן את תבנית הניהול המעוותת בספריית הבסיס.

לכן נצטרך לערוך myproject/settings.py. קודם כל, מצא את הקבוע TEMPLATES ומפתח זה DIRS:

'DIRS': [],

שנה את הקוד לזה:

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

איתור התבנית הבסיסית של המנהל (admin/base Hack)

אם רק רצינו לבצע שינויים קיצוניים, כמו העברת גיליון תכשירים מUSTOM למנהל, או הסרה/החלפה של הראשית שלו, יכולנו להתפשר על כך על ידי עריכת התבנית admin/base_site ודילמה זו לחלוטין. אך אם אנו רוצים להמשיך עד הסוף ו"לעטוף" את מעמ המנהל כאילו הוא היה מוכל באתר הראשי שלנו, עם אפשרות לקבל ראש ורגל משותפים, אז המשך הקריאה.

נצטרך להעתיק את 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 כדי שנוכל להזרים את הקוד שייעטף סביב המנהל בשלב הבא.

תכנות תבנית מנהל מUSTOM (admin/base_site Hack)

אז נכתוב את התבנית האמיתית ב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; }

      /* בעיות בוסטרפל עם האדמין */
      * { 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. אנו משאירים את התוכן של בלוקים branding ו-breadcrumbs ריקים, מאחר שאנו לא באמת צריכים אותם.
  4. אנו משתמשים בבלוק bodyclass כדי להגדיר את בוסטרפל של bg-light, כפי שעשינו בתבנית frontend.
  5. אנו משתמשים בבלוק extrastyle כדי לשלב את בוסטרפל וכמה קוד CSS.
    א. טוב, #header, .breadcrumbs { display: none; } הוא סוג של הפכי של מספר 3; אבל זה שימושי לדעת שאפשר לכבות את המסגרות של המותג והרחמנים בשתי הדרכים.
    ב. יכולים להיות כמה בעיות כשמשטחים בוסטרפל עם CSS של דג'נגו באדמין, אז אלו כמה תיקונים.
  6. השתמש בבלוקים bodyheader ו-bodyfooter כדי לעטוף את התוכן של האדמין.

עכשיו שיש לנו גישה לתבנית האדמין, יכולנו להרחיב את גרסת הסגנון שלה, או פשוט להשאיר אותה ככה עם סגנון משותף עם הממשק הראשי.

תיווך

אנו שומרים על שני תבניות שונות (הממשק הראשי והמנהל) כדי לעשות בעצם את אותה המצגת. מובן, זה לא אידאלי, שכן אנו באופן מפורש מפרים את אחת העקרונות המרכזיים בתכנות המחשב: אל תחזור על עצמך (DRY).

כפי שציינו, זה משום שהמנהל של דג'נגו תוכנן להיות נפרד מהממשק הראשי. ואין בכך שום דבר לא בסדר, בדיוק כמו שאין שום דבר לא בסדר בחשיבה מחוץ לקופסא. אבל כן, זה מאלץ אותנו להשתמש בשני תבניות עם תוכן כמעט זהה.

למעשה, בעיקרון נוכל לעצב דגם של תבנית שכולל את הסרגל הניווט ואלמנטים נוספים מהממשק הראשי והמנהל, ולשתף אותם ממקור יחיד; אך בשלב זה, ולמטרת המאמר הזה, גישה זו תהיה קצת יותר מדי. בכל מקרה, אשאיר את הרעיון טופח בראשכם. 😉

יצירת סרגל ניווט משותף

עכשיו שהממשק הראשי ואתר המנהל נראים כמעט אותו דבר, אנו יכולים להמשיך ולשלב יותר וליצור חוויה ניווט משותפת… ואפילו יותר, להציג כמה אפשרויות מנהל ישירות בתפריט הראשי!

הנה הקובץ לסרגל הניווט:

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

שימו לב לאיזור dropdown-menu, שיועסק בהצגת תפריט מנהל (ראה רכיב Navbar של בוסטרפלט לקבלת מידע נוסף).

אנו גם עושים בדיקה תנאית עם {% if user.is_authenticated %} /{% endif %}, כדי להחליט אם להציג את תפריט האדמין או לא.

לבסוף, זכרו שמאחר ואנו עכשיו שומרים על שני תבניות ראשיות שונות, נצטרך להוסיף את קוד ה-HTML של הנאבאר לשתיהן, myapp/templates/myapp/tempalte.html ו templates/admin/base_site.html.

נוסף: מסך ההתחברות לאדמין

האתר האדמין נלקח בחשבון, אך יש עדיין קצה פרופן: מסך ההתחברות.

עכשיו נוכל להפוך משהו כזה:

Source

… למשהו כזה:

אנו יכולים להשיג משהו קרוב יותר לכך על ידי יצירת התבנית הבאה ב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 %}

פירוט

מה אנו עושים כאן:

  1. תג {{ block.super }} קיים כדי לומר למנוע התבניות שאנו לא מפחיתים את התוכן של extrastyle (שהגדרנו בתבנית templates/admin/base_site.html) אלא שאנו פשוט מוסיפים תוכן לזה (ראה הרסדות תבנית לקבלת מידע נוסף).
  2. הבלוק branding מאפשר לנו לשנות את הכותרת "ניהול דג'נגו" למשהו מעניין יותר.
  3. אנו מתיימרים להיפטר מהבלוק head_title על ידי הגדרה ריקה.
  4. אנו משתמשים בבלוק content_title כדי להוסיף מידע נוסף.

שיקולים מסוימים

Source

ממש כמו Bootstrap, גם אתר ה-admin של Django מגיע עם חבילה משלו של jQuery, אך למרבה המזל המפתחים של Django חשבו על כך וכדי להימנע מעימותים עם תוכניות וספריות שמסרגנים המשתמשים, jQuery של Django מוגדר כ-django.jQuery. כך שאפשר לכלול עותק משלך (כפי שעשינו) בבטחה.

היזהר כשאתה משתמש בהגדרות מסוימות של מחלקות בגיליון התבנית העיקרי שלך, כפי שזה ישפיע גם על אתר ה-admin, וישפיע על הפונקציונליות שלו בדרכים לא צפויות. במקרה זה, תמיד תוכל לראות מה קורה בעזרת כלי האיתור של הדפדפן שלך, כגון Chrome DevTools, Firefox Developer Tools (במיוחד Page Inspector), או Safari Developer Tools.

דגם וקוד מלא

היישום שדנו בו כאן יראה כך:

אתה יכול לנavigate כל קוד הפרויקט במאגר ה-GitHub שלי, luzdealba / djangovuejs.

סיכום

בעוד שיש הטוענים – בצדק – שאין הרבה צורך לשנות את המראה של ה-Django's admin, גם נכון ששילוב חלקים שונים של אתר באופן חלק זה טריק מצוין לשיפור חווית המשתמש, שכן זה יכול לספק עברה חלקה בין שני החלקים, ואפילו ניווט מושלם יותר של ה-admin.

וכך לעשות זאת אינו קשה במיוחד. מה שצריך לשים לב הוא איך אתה עוטף את ה-admin, וגם איך אתה משלב ספריות שלישיות עם קוד JavaScript וגיליונות נגישות משלך. למרבה המזל, ניתן לשלב בקלות חלק מתוך ה-admin, חלק מתוך שאר האתר הראשי, וחלק משניהם.

בתקווה שיש לך כמה רעיונות על איך אתה יכול להתארך גירסאות נוספות של Django בדרכים שלא היו ברורות כל כך!

אם אתה זקוק לתירוץ לבנות אפליקציית אינטרנט רק כדי שתוכל לשחק עם ה-Django admin, תראה את הדף האחרון על פרוטופינג אפליקציית אינטרנט עם Django ו-Vue.js – זה המון כיף. ואם אתה רוצה להעמיק את הידע שלך ב-Django, הספרייה SitePoint Premium מציעה המון מידע עבורך.

שאלות שולחן עבודה נפוצות (FAQs) על התאמת Django Admin עם Bootstrap

מהן היתרונות של התאמת Django Admin עם Bootstrap?

שימוש ב-Bootstrap להתאמת Django Admin מספק מספר יתרונות. ראשית, זה משפר את האפקטים החזותיים של ממשק ה-admin שלך, מה שהופך אותו ליותר ידידותי למשתמש ומושכל. Bootstrap הוא פריים קדימה פופולרי המספק מספר תבניות עיצוב לטיפוגרפיה, טופסים, כפתורים ורכיבים אחרים של הממשק. על ידי השילוב שלו עם Django Admin, אפשר לנצל את התבניות הללו כדי ליצור ממשק admin יותר מרהיב ואפקטיבי מבחינה פונקציונלית. שנית, זה מאפשר לך להוסיף פונקציות מותאמות אישית לממשק ה-admin שלך. לדוגמה, אפשר להוסיף פעולות מותאמות אישית, פילטרים וטופסים כדי לשפר את הנוחות השימוש בממשק ה-admin שלך. לבסוף, זה יכול לשפר את הרגישות של ממשק ה-admin שלך, מה שהופך אותו לנגיש יותר במכשירים שונים ובגדלי מסך שונים.

איך אפשר להוסיף פעולות מותאמות אישית ל-Django Admin?

Django Admin מאפשר לך להוסיף פעולות מותאמות אישית שניתנות לביצוע על עצמים נבחרים. כדי להוסיף פעולה מותאמת אישית, עליך להגדיר פונקציה שמבצעת את הפעולה הרצויה על העצמים הנבחרים. פונקציה זו צריכה לקבל שלושה פרמטרים: את מנהל המודל, את הבקשה ואת קבוצת ה-queryset של העצמים הנבחרים. ברגע שהגדרת את הפונקציה הזו, אפשר להוסיף אותה לתכונה 'actions' של מנהל המודל שלך. זה יהפוך את הפעולה לזמינה בתפריט הנפתח בדף שינוי הרשימה של ה-admin.

האם אפשר להתאים את המראה והתחושה של Django Admin באמצעות Bootstrap?

כן, אפשר להתאים את המראה והתחושה של Django Admin באמצעות Bootstrap. Bootstrap הוא ממשק קדמי שמספק מגוון תבניות עיצוב עבור טיפוגרפיה, טפסים, כפתורים ורכיבים ממשק אחרים. על ידי שילובו עם Django Admin, אפשר לנצל את התבניות הללו כדי ליצור ממשק מנהל מרהיב יותר ופונקציונלי. אפשר להתאים את הצבעים, הפונטים, הפריסה ואלמנטים עיצוביים אחרים של ממשק המנהל שלך כדי להתאים אותם לזהות המותג שלך או להעדפות אישיות.

איך אפשר להוסיף פילטרים מותאמים אישית ל-Django Admin?

Django Admin מאפשר לך להוסיף פילטרים מותאמים אישית המשמשים לסנן את האובייקטים המוצגים בדף שינוי הרשימה של המנהל. כדי להוסיף פילטר מותאם אישית, יש להגדיר תת מחלקה של django.contrib.admin.SimpleListFilter. תת המחלקה זו צריכה להגדיר שתי פונקציות: lookups ו-queryset. הפונקציה lookups צריכה להחזיר רשימה של טאופלים, כל אחד מייצג אפשרות פילטר. הפונקציה queryset צריכה להחזיר קבוצת שאילתות מסוננת בהתאם לאפשרות הפילטר הנבחרת. ברגע שהגדרת את תת המחלקה הזו, אפשר להוסיף אותה לתכונה 'list_filter' של מנהל המודל שלך.

האם אפשר להשתמש ב-Bootstrap עם Django Admin בלי חבילות נוספות?

למרות שאפשר להשתמש ב-Bootstrap עם Django Admin בלי חבילות נוספות, בדרך כלל קל יותר ויעיל יותר להשתמש בחבילה כמו django-admin-bootstrap. חבילה זו מספקת טים מבוסס Bootstrap עבור Django Admin, מה שהופך את השילוב של Bootstrap עם Django Admin לקל יותר. היא מספקת גם תכונות נוספות כמו עיצוב תגובני והפקת טפסים מותאמים, שיכולות לשפר עוד יותר את השימושיות והפונקציונליות של ממשק המנהל שלך.

איך אני יכול להתאים את שדות הטופס ב-Django Admin?

Django Admin מאפשר לך להתאים את שדות הטופס המשמשים ליצירה או עריכה של אובייקטים. כדי להתאים שדה טופס, עליך לשנות את השיטה 'formfield_for_dbfield' של ה-model admin שלך. שיטה זו צריכה להחזיר מופע של שדה טופס שיימצא לשימוש עבור השדה המסד הנתונים המסומן. אפשר להתאים את התכונות של שדה הטופס, ה-widgets, וההתנהגות של האימות לפי הצרכים שלך.

האם אפשר להוסיף ממשקים מustom ל-Django Admin?

כן, אפשר להוסיף ממשקים מותאמים אישית ל-Django Admin. כדי להוסיף ממשק מותאם אישית, עליך להגדיר שיטה ב-model admin שלך שמטפלת בהיבטים הרלוונטיים של הממשק. שיטה זו צריכה לקחת בקשה כפרמטר יחיד ולהחזיר תגובה. אפשר לקשר את השיטה זו לכתובת URL על ידי הוספת תבנית URL לשיטת 'get_urls' של model admin שלך. זה יהפוך את הממשק לנגיש מממשק ה-admin.

איך אפשר להתאים את השיצור הרשימה ב-Django Admin?

Django Admin מאפשר לך להתאים את השיצור הרשימה, שהוא טבלת האובייקטים המוצגת בדף שינוי הרשימה של ה-admin. כדי להתאים את השיצור הרשימה, אפשר לקבוע את התכונה 'list_display' של model admin שלך לרשימה של שמות השדות שברצונך להציג. אפשר גם לכלול שמות שיטות ברשימה זו, שתקרא את השיטה המתאימה על כל אובייקט ותציג את התוצאה.

האם אפשר להשתמש ב-Django Admin עבור מודלי מסד נתונים מורכבים?

כן, Django Admin מיועד להתמודד עם מודלים מסובכים של מסדי נתונים. הוא מספק מגוון של תכונות שיכולות לעזור לך לנהל מבנים מידע מורכבים, כמו עריכה פנימית של עצמים קשורים, שדות טופס מUSTOM, ופעולות מUSTOM. עם זאת, עבור מבנים מידע מאוד מורכבים או פעולות מסד נתונים מתקדמות, ייתכן שתצטרך להרחיב את Django Admin עם ממשקים, טפסים או פעולות מUSTOM.

איך אוכל לשפר את הביצועים של Django Admin?

ישנן מספר דרכים לשפר את הביצועים של Django Admin. דרך אחת היא לייעל את שאילתות המסד הנתונים שלך. Django Admin מייצר באופן אוטומטי שאילתות מסד נתונים על פי הגדרות המודל שלך ואפשרויות ה-admin. עם זאת, ייתכן שאלה יהיו לא יעילות, במיוחד עבור מבנים מידע מורכבים או עבור קבצים גדולים של נתונים. על ידי שינוי האפשרויות שלך ב-admin ובאמצעות תכונות שיפור המסד הנתונים של Django, תוכל להפחית משמעותית את מספר השאילתות למסד הנתונים ולשפר את הביצועים של ממשק ה-admin שלך. דרך נוספת היא להשתמש בזכוכית. Django מספק ממשק זכוכית חזק שאפשר להשתמש בו כדי לזכור את התוצאות של פעולות יקרות לביצוע או נתונים שנגישים לעתים קרובות. על ידי שימוש בזכוכית, תוכל להפחית את העומס על המסד הנתונים שלך ולשפר את הרגישות של ממשק ה-admin שלך.

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