كيفية إعادة تصميم إدارة Django باستخدام Bootstrap

الدروس التعليمية
Bootstrap Django Python

الموقع الإداري لـ Django رائع — مزود بكل المميزات، سهل الاستخدام، آمن مبنيًا على التصميم، مستقر للغاية… ولكنه قد يكون قليلًا قبيح المظهر، وهو أمر قد يعتبر سلبيًا عندما ترغب في دمجه مع مظهر وشعور بقية موقعك. دعونا نصلح ذلك.

إذا لم يكن مكسورًا…

The default Django admin. (Source)

لنفترض أنك للتو أنشأت نموذج تطبيق ويب باستخدام Django وVue.js. في العديد من الحالات، استخدام الإدارة الخاصة بـ Django للأغراض الخلفية بالشكل الذي هو عليه، وحتى تسليمه لعميلك بعد تحديد الأذونات بشكل مناسب، هو أمر جيد. إذ أنه يعمل بشكل مثالي ويمكن تخصيصه بشكل كبير باستخدام الأدوات المضمنة لتغطية العديد من المواقف.

إذن ما الضجة في ذلك؟

أسباب لتعديل مظهر وشعور الإدارة

ومع ذلك، هناك عدد من الأسباب الصحيحة لتصوير التكامل خطوة أبعد:

  • العلامة التجارية: لا شك في أن ترغب في استخدام اسم وألوان شركتك بدلاً من “إدارة Django” (وللعلم، هذا يتوافق مع ترخيص BSD لـ Django).
  • تكامل مطلق بين الموقع الرئيسي والإدارة: قد ترغب في الانتقال بين وظائف المكتب الخلفي أثناء تصفح الموقع، والعكس، عن طريق وجود شريط التنقل مشترك.
  • تجميل: بينما يبدو الإدارة مقبولًا، وقد نفذت مبادئ تصميم الويب المتجاوب منذ الإصدار 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>

بعد ذلك، سنقوم بدمج هذا في الإدارة، وإضافة شريط تنقل مشترك عبر كل من النهايتين — الموقع الرئيسي والمكتب الخلفي!

دمج نموذج الواجهة الرئيسية بالإدارة

كما ذكرنا، يمكننا تجاوز القوالب، بما في ذلك تلك الخاصة بالإدارة. ومع ذلك، بسبب تصميم Django، وليس من المستغرب، الموقع الرئيسي والمكتب الخلفي هما نظامان مختلفان، كل منهما يمتلك قوالبه الخاصة، وملفات أنماطه الخاصة، وباكليت الحزم. لذا حتى لو كانت متطابقة تقريبًا، سنحتاج إلى الحفاظ على قوالب مختلفتين — قالب واحد للواجهة الرئيسية، وقالب واحد للإدارة.

تمكين دليل للقوالب بشكل عام

أولاً، نحتاج إلى إخبار Django أين سنقوم بتخزين قالب الإدارة المعدل في الدليل الأساسي.

لذا سنحتاج إلى تعديل myproject/settings.py. أولاً، ابحث عن الثابت TEMPLATES ومفتاح DIRS هذا:

'DIRS': [],

قم بتغيير هذا الكود إلى هذا:

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

للتفاف قالب الإدارة (admin/base Hack)

إذا أردنا فقط القيام بتغييرات جمالية، مثل تمرير واجهة جديدة للإدارة، أو إزالة/استبدال رأسها، يمكننا الاستمرار في ذلك من خلال تعديل قالب admin/base_site وتخطي هذه الخطوة الحالية بالكامل. ومع ذلك، إذا أردنا الذهاب إلى أبعد من ذلك و”التفاف” قسم الإدارة كما لو أنه محاط بموقعنا الرئيسي، مع إمكانية وجود رأس وتذييل مشتركين، فاستمر في القراءة.

سنحتاج إلى نسخ admin/base.html من Django إلى دليلنا القالبي في 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 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; }

      /* مشاكل 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. نفرغ محتوى كتل branding و breadcrumbs ، حيث لا نحتاج إليهما حقًا.
  4. نستخدم كتلة bodyclass لتعيين bg-light من Bootstrap ، كما فعلنا في قالب frontend.
  5. نستخدم كتلة extrastyle لتضمين Bootstrap وبعض رموز CSS.
    a. حسنًا ، #header, .breadcrumbs { display: none; } هو بعض الإعادة صياغة للعدد 3 ؛ لكن من المفيد معرفة أنه يمكنك تعطيل قسم العلامات التجارية وقسم الصلة بطريقتين.
    b. قد يكون هناك بعض المشاكل عند تداخل Bootstrap مع CSS Django في الإدارة ، لذا هذه بعض التصحيحات.
  6. استخدم كتل bodyheader و bodyfooter للتفاف محتوى الإدارة.

الآن بما أننا نمتلك الوصول إلى قالب الإدارة ، يمكننا تطوير واجهة مستخدمه أكثر ، أو نتركها كما هي مع شكل مشترك مع الواجهة الرئيسية.

تحذيرات

نحن نحافظ على نماذج مختلفتين (واجهة المستخدم الرئيسية والإدارية) لتقديم نفس العرض الأساسي. بصراحة، هذا ليس مثاليًا، حيث ننكر صراحةً أحد مبادئ تطوير البرمجيات: لا تكرر نفسك (DRY).

كما عنا نقلنا، هذا لأن إدارة Django صممت لتكون منفصلة عن واجهة المستخدم الرئيسية. ولا حرج من ذلك، تمامًا كما لا حرج من التفكير خارج الصندوق. لكن نعم، هذا يجبرنا على استخدام نماذج مختلفة تحتوي على محتوى متشابه تقريبًا.

في الواقع، من حيث المبدأ، يمكننا تصميم نموذج قالب يشمل الشريط التنقل وعناصر أخرى مشتركة من واجهة المستخدم الرئيسية والإدارية، وإعادة استخدامها من مصدر واحد؛ لكن في هذه المرحلة، ولأغراض هذا المقال، سيكون هذا الأسلوب مبالغة فيه. على أي حال، سأترك الفكرة كنقطة انطلاق لكم. 😉

إنشاء شريط تنقل مشترك

الآن بعد أن تبدو واجهة المستخدم الرئيسية والموقع الإداري متشابهتين تقريبًا، يمكننا المضي قدمًا في تكاملنا وإنشاء تجربة تنقل مشتركة… وحتى أبعد من ذلك، عرض بعض خيارات الإدارة مباشرة على القائمة الرئيسية!

فيما يلي قطعة من الشريط التنقل:

<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 في Bootstrap للحصول على مزيد من المعلومات).

نقوم أيضًا بإجراء الفحص الشرطي باستخدام {% 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 (الذي حددناه في قالب templates/admin/base_site.html) ولكننا ببساطة نضيف محتوى إليه (راجع الوراثة القالبية للمزيد من المعلومات).
  2. كتلة branding تسمح لنا بتغيير عنوان “إدارة Django” إلى شيء أكثر إثارة للاهتمام.
  3. نتخلص من كتلة head_title عن طريق تحديد تعريف فارغ.
  4. نستخدم كتلة content_title لإضافة بعض المعلومات الإضافية.

بعض الاعتبارات

Source

تمامًا مثل Bootstrap، تأتي مواقع الإدارة في Django مع حزمتها الخاصة بـjQuery، ولكن لحسن الحظ فقد فكر مطورو Django في هذا ولتجنب الصراعات مع السكريبتات والمكتبات المقدمة من المستخدم، يتم تسمية jQuery في Django بأسماء مساحة المكتبة django.jQuery. لذا يمكننا تضمين نسختك الخاصة (كما فعلنا) بأمان.

كن حذراً عند التورط بتعريفات الطبقات في واجهة تصميم النمط الرئيسي، حيث ستؤثر ذلك أيضًا على موقع الإدارة، مما يؤثر على وظائفه بطرق غير متوقعة. في هذه الحالة، يمكنك دائمًا مراقبة ما يحدث باستخدام أدوات تصحيح المتصفح الخاصة بك، مثل أدوات تطوير Chrome، أدوات تطوير Firefox (خاصةً Inspector الصفحة)، أو أدوات تطوير Safari.

عرض وكود كامل

سيبدو هذا التنفيذ الذي ناقشناه هنا على هذا النحو:

يمكنك تنقل جميع رموز المشروع في مستودعي على GitHub، luzdealba / djangovuejs.

الخاتمة

قد يزعم البعض بشكل معقول أنه لا يوجد حاجة كبيرة لتغيير مظهر إدارة Django، لكن الأمر يمكن أن يكون دمج نقاط نهاية مختلفة في الموقع بشكل متسلسل هو حيلة جيدة لتحسين تجربة المستخدم، حيث يمكن أن يوفر تحولًا متصلًا بين الاثنين، وحتى تنقل أكثر تحكمًا في الإدارة.

وفعل ذلك ليس بذلك الصعوبة. ما يجب أن تنتبه إليه هو كيفية تضمين الإدارة، وكيفية مزج المكتبات الثالثة مع رمز JavaScript الخاص بك وأوراق الأنماط الخاصة بك. لحسن الحظ، يمكنك بسهولة تكامل بعضها في الإدارة، وبعضها في بقية الموقع الرئيسي، وبعضها في كليهما.

آمل أن يكون لديك بعض الأفكار حول كيف يمكنك تخصيص Django بطرق لم تكن واضحة جدًا!

إذا كنت بحاجة إلى حجة لبناء تطبيق ويب فقط لتتلاعب بإدارة Django، فتحقق من البرنامج التعليمي الأسبوع الماضي حول النمذجة الافتراضية لتطبيق ويب باستخدام Django و Vue.js – إنه ممتع للغاية. وإذا كنت تريد تعزيز مهارات Django الخاصة بك، فإن مكتبة SitePoint Premium تحتوي على موارد كثيرة.

الأسئلة الشائعة (FAQs) حول تخصيص إدارة Django باستخدام Bootstrap

ما هي فوائد تخصيص إدارة Django باستخدام Bootstrap؟

توفر تخصيص واجهة إدارة Django باستخدام Bootstrap العديد من الفوائد. أولاً، يعزز تصميم واجهة الإدارة البصري، مما يجعلها أكثر صديقة للمستخدم وبديهية. Bootstrap هي إطار عمل شعبي للواجهة الأمامية يوفر مجموعة متنوعة من قوالب التصميم للطباعة، والنماذج، والأزرار، ومكونات الواجهة الأخرى. عن طريق دمجها مع Django Admin، يمكنك الاستفادة من هذه القوالب لإنشاء واجهة إدارة أكثر جاذبية ووظيفية. ثانياً، يتيح لك إضافة وظائف مخصصة إلى واجهة إدارتك. على سبيل المثال، يمكنك إضافة إجراءات مخصصة، ومرشحات، ونماذج لتحسين جدوى واجهة إدارتك. أخيراً، يمكن أن تحسن استجابة واجهة إدارتك، مما يجعلها أكثر إمكانية الوصول على أجهزة وأحجام شاشة مختلفة.

كيف يمكنني إضافة إجراءات مخصصة إلى Django Admin؟

يسمح لك Django Admin بإضافة إجراءات مخصصة يمكن القيام بها على الكائنات المحددة. لإضافة إجراء مخصص، تحتاج إلى تعريف دالة تقوم بالإجراء المطلوب على الكائنات المختارة. يجب أن تأخذ هذه الدالة معلمات ثلاثة: مشروع النموذج الإداري، والطلب، ومجموعة الكائنات المختارة. بمجرد تعريف هذه الدالة، يمكنك إضافتها إلى السمة ‘الإجراءات’ من إدارة النموذج. سيجعل هذا الإجراء متاحًا في سهم الإجراءات في صفحة تغيير قائمة الإدارة.

هل يمكنني تخصيص مظهر وشعور Django Admin باستخدام Bootstrap؟

نعم، يمكنك تخصيص مظهر وشعور واجهة الإدارة باستخدام Django مع Bootstrap. Bootstrap هو إطار عمل أمامي يوفر مجموعة متنوعة من قوالب التصميم للطباعة، والنماذج، والأزرار، وعناصر الواجهة الأخرى. من خلال دمجه مع Django Admin، يمكنك الاستفادة من هذه القوالب لإنشاء واجهة إدارة أكثر جاذبية وقابلية للاستخدام. يمكنك تخصيص الألوان، والخطوط، والتخطيط، وعناصر تصميم أخرى من واجهة الإدارة لتتناسب مع هويتك العلامة التجارية أو الأفضليات الشخصية.

كيف يمكنني إضافة أفلاتر مخصصة إلى Django Admin؟

يسمح لك Django Admin بإضافة أفلاتر مخصصة يمكن استخدامها لفلترة الكائنات المعروضة على صفحة تغيير قائمة الإدارة. لإضافة أفلتر مخصص، تحتاج إلى تعريف فئة فرعية من django.contrib.admin.SimpleListFilter. يجب أن تعرف هذه الفئة الفرعية طريقتين: lookups و queryset. يجب أن ترجع الطريقة lookups قائمة من المجموعات، كل منها يمثل خيار فلترة. يجب أن ترجع الطريقة queryset مجموعة مفلترة بناءً على الخيار المختار للفلترة. بمجرد تعريف هذه الفئة الفرعية، يمكنك إضافتها إلى سمة ملف ‘list_filter’ من admin الخاص بك.

هل يمكنني استخدام Bootstrap مع Django Admin بدون أي حزم إضافية؟

في حين أنه من الممكن استخدام Bootstrap مع Django Admin بدون أي حزم إضافية، إلا أنه عمومًا من الأسهل والأكثر فعالية استخدام حزمة مثل django-admin-bootstrap. توفر هذه الحزمة ثيم على أساس Bootstrap لـ Django Admin، مما يجعل أسهل دمج Bootstrap مع Django Admin. توفر أيضًا ميزات إضافية مثل التصميم الرديئي وتقديم النماذج المخصصة، والتي يمكن أن تعزز أكثر من ذلك قابلية الاستخدام ووظائف واجهة الإدارة.

كيف يمكنني تخصيص حقول النموذج في Django Admin؟

تسمح Django Admin لك بتخصيص حقول النموذج المستخدمة لإنشاء أو تعديل الكائنات. لتخصيص حقل نموذج، تحتاج إلى تجاوز طريقة “formfield_for_dbfield” في إدارة النموذج الخاصة بك. يجب أن ترجع هذه الطريقة مثيلًا لحقل النموذج الذي سيتم استخدامه للحقل المُخزن بالقاعدة البيانات المحددة. يمكنك تخصيص سمات حقل النموذج والوِجهات وسلوكيات التحقق من الصحة لتناسب احتياجاتك.

هل يمكنني إضافة عروض مخصصة إلى Django Admin؟

نعم، يمكنك إضافة عروض مخصصة إلى Django Admin. لإضافة عرض مخصص، تحتاج إلى تعريف طريقة في إدارة النموذج الخاصة بك تعالج منطق العرض. يجب أن تأخذ هذه الطريقة مطلبًا فقط وهو الطلب وترجع استجابة. بعد ذلك، يمكنك ربط هذه الطريقة بعنوان URL عن طريق إضافة نمط URL إلى طريقة “get_urls” في إدارة النموذج الخاصة بك. سيجعل هذا العرض قابلاً للوصول من واجهة الإدارة.

كيف يمكنني تخصيص عرض القائمة في Django Admin؟

يسمح Django Admin لك بتخصيص عرض القائمة، وهو جدول الكائنات المعروض على صفحة تغيير قائمة الإدارة. لتخصيص عرض القائمة، يمكنك تعيين سمة “list_display” في إدارة النموذج إلى قائمة بأسماء الحقول التي ترغب في عرضها. يمكنك أيضًا تضمين أسماء الطرق في هذه القائمة، والتي ستُستدعي الطريقة المقابلة على كل كائن وتعرض النتيجة.

هل يمكن استخدام Django Admin لأنماط قواعد بيانات معقدة؟

نعم، Django Admin مصمم للتعامل مع نماذج قواعد بيانات معقدة. يوفر مجموعة متنوعة من الميزات التي يمكن أن تساعدك على إدارة هياكل البيانات المعقدة، مثل التحرير الخلفي للكائنات المترابطة، الحقول النمطية المUSTOM، والإجراءات المUSTOM. ومع ذلك، للهياكل البيانية المعقدة للغاية أو العمليات القاعدة البيانات المتقدمة، قد تحتاج إلى توسيع Django Admin باستخدام عروض مUSTOM، ووثائق، أو إجراءات.

كيف يمكنني تحسين أداء Django Admin؟

هناك عدة طرق لتحسين أداء Django Admin. إحدى الطرق هي تحسين الاستعلامات القواعد البيانات. يولد Django Admin تلقائيًا استعلامات قواعد البيانات بناءً على تعريفات النموذج الخاصة بك وخيارات الإدارة. ومع ذلك، قد تكون هذه الاستعلامات غير فعالة في بعض الأحيان، خاصة للهياكل البيانية المعقدة أو مجموعات البيانات الكبيرة. عن طريق تخصيص خيارات الإدارة الخاصة بك واستخدام ميزات تحسين قواعد البيانات في Django، يمكنك تقليل بشكل كبير عدد استعلامات قواعد البيانات وتحسين أداء واجهة الإدارة الخاصة بك. طريقة أخرى هي استخدام التخزين المؤقت. يوفر Django إطار تخزين مؤقت قوي يمكنك استخدامه لتخزين نتائج العمليات المكلفة أو البيانات التي يتم الوصول إليها بشكل متكرر. من خلال استخدام التخزين المؤقت، يمكنك تقليل الأحمال على قواعد بياناتك وتحسين الردود الفعلية لواجهة الإدارة الخاصة بك.

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