سایت مدیریت جنگو عالی است – کاملاً دارای ویژگی ، استفاده آسان ، از نظر طراحی ایمن ، محکم… و تا حدی زشت ، که وقتی می خواهید آن را با ظاهر و احساس سایر وب سایت خود تلفیق کنید ، می تواند یک نقطه ضعف باشد. بیایید آن را مرتب کنیم

اگر شکسته نشود …

مدیر پیش فرض جنگو
مدیر پیش فرض جنگو. (منبع)

بگویید شما به تازگی یک برنامه وب را با Django و Vue.js نمونه سازی کرده اید. برای موارد مختلفی ، استفاده از مدیر جنگو برای کارهای دفتری همانطور که هست و حتی پس از آن به مشتری خود تحویل دهید تنظیم مناسب مجوزها، خوب است به هر حال ، این کاملا خوب کار می کند و می توان آن را به شدت با ابزارهای داخلی سفارشی کرد برای پوشش بسیاری از موقعیت ها

دوباره ، چرا زحمت می کشم؟

دلایل هک کردن ظاهر و احساس مدیر

با این حال ، تعدادی از دلایل معتبر وجود دارد که ادغام را یک قدم جلوتر می برد:

  • نام تجاری: بخواهید نام و رنگ شرکت خود را به جای “دولت جنگو” بخواهید اشکالی ندارد (و برای نمونه ، این مطابق با نظرات جنگو است مجوز BSD)
  • ادغام یکپارچه بین سایت اصلی و مدیر: ممکن است بخواهید هنگام مرور سایت ، بین عملکرد دفتر پشتی و همچنین بالعکس ، انتقال داشته باشید. نوار پیمایش.
  • زیبا سازی: در حالی که مدیر به نظر خوب است ، و حتی آن را پیاده سازی کرده است طراحی وب پاسخگو اصول از زمان v2 (هم در موبایل و هم در دسک تاپ به خوبی کار می کند) وجود دارد زیاد یک ورق سبک خوش ساخت می تواند بهتر جلوه کند.
  • قابلیت بای پس: ممکن است فقط بخواهید منوهای کشویی سفارشی برای مدیر ایجاد کنید ، گزینه هایی را که واقعاً استفاده می کنید نمایش داده و از سیستم مخفی کنید رابط کاربر آنچه شما واقعاً نیازی ندارید ، که می تواند باعث بهتر شدن شود تجربه ی کاربر.

یک مثال عملی

برای این مثال ، و برای تکرار نکردن خود ، ما برنامه وب انتشار ساده ای را که برای مقاله نمونه سازی یک برنامه وب با مقاله جنگو و Vue.js شروع کرده ایم ، از سر می گیریم.

به طور خلاصه:

  • یک برنامه جنگو با دو مدل ها:
  • Article با مزارع name author (مرتبط)، content و slug
  • Author: با زمینه name و slug
  • یک تک چشم انداز نامیده می شود frontend که همه ثبت ها را در هر دو مدل پرس و جو می کند.
  • یک الگوی واحد به نام template.
  • اجرای Vue.js با نمای روتر و ووکس برای یک رابط مقیاس پذیر واکنش پذیر.

ما به طور خاص برای ادغام Vue.js در این قسمت مراقبت نخواهیم کرد و آن را در اینجا اصلاح نمی کنیم.

الگوی اساسی

منبع

الگوهای جنگو بسیار متنوع و قدرتمند هستند و می توانند در کشور ایجاد شوند سطح برنامه (جز component سایت 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">

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

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

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

بعد ، ما این را در مدیر ادغام می کنیم ، و یک نوار ناوبری مشترک را از هر دو طرف اضافه می کنیم – سایت اصلی و دفتر پشتیبان!

ادغام الگوی اصلی رابط کاربری با مدیر

همانطور که گفته شد ، ما می توانیم الگوها را نادیده بگیرید، از جمله موارد مدیر. با این حال ، به دلیل طراحی جنگو ، و جای تعجب نیست که سایت اصلی و دفتر کار دو سیستم متفاوت هستند ، هرکدام با الگوهای خاص خود ، ورق های سبک و contrib بسته ها. بنابراین حتی اگر هم باشند تقریبا همسان، ما باید دو الگوی مختلف را حفظ کنیم – یکی برای رابط کاربری اصلی و دیگری برای سرپرست.

فعال کردن فهرست برای الگوها به طور کلی

ابتدا باید به جنگو بگوییم که کجای الگوی مدیر هک شده را در دایرکتوری پایه ذخیره می کنیم.

سه ما باید ویرایش کنیم myproject/settings.py. اولا ، پیدا کردن TEMPLATES ثابت و این DIRS کلید:

'DIRS': [],

کد را به این تغییر دهید:

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

بسته بندی الگوی مدیر (admin/base هک)

اگر ما فقط می خواستیم تغییرات آرایشی و بهداشتی انجام دهیم ، مانند ارسال یک سبک سبک سفارشی به مدیر ، یا حذف / جایگزینی هدر آن ، می توانیم فقط با ویرایش admin/base_site الگو و به طور کلی از این مرحله فعلی صرف نظر کنید. با این حال ، اگر می خواهیم همه راه را برویم و “بسته بندی کردن“بخش مدیر به گونه ای که اگر در سایت اصلی ما باشد ، با داشتن یک سرصفحه و زیر صفحه مشترک ، سپس به مطالعه ادامه دهید.

ما باید از جنگو کپی کنیم admin/base.html به فهرست الگوهای ما در templates/admin/base.html، تا بتوانیم لفافهای خود را قرار دهیم.

ما کد را در اطراف ویرایش خواهیم کرد container بخش ، به طوری که از این می رود:


<div id="container">
(...)
</div>

به این:

{% block bodyheader %}{% endblock %}


<div id="container">
(...)
</div>


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

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

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

درهم شکستن

بیایید سعی کنیم آنچه را که در اینجا انجام می دهیم توضیح دهیم:

  1. ما به موتور الگو می گوییم که در حال “گسترش” هستیم admin/base_site.html الگو ، به طور م effectivelyثر برخی از تعاریف آن را نادیده می گیرد.
  2. ما از title مسدود کردن برای سفارشی کردن عنوان برای صفحه مدیر در حال مرور.
  3. ما محتوای آن را خالی می کنیم branding و breadcrumbs بلوک ، زیرا ما واقعاً به آنها نیازی نداریم.
  4. ما از bodyclass بلوک برای تنظیم Bootstrap bg-light، همانطور که در frontend قالب.
  5. ما از extrastyle مسدود کردن برای جاسازی بوت استرپ ، و برخی از کد های CSS.
    آ. باشه، #header, .breadcrumbs { display: none; } چیزی شبیه به تکرار شماره 3 است. اما مفید است که بدانید شما می توانید بخش مارک و آرد سوخاری را از هر دو طریق غیرفعال کنید.
    ب هنگام همپوشانی بودن بوت استرپ با CSS Django در مدیر ، ممکن است برخی از مشکلات وجود داشته باشد ، بنابراین اینها برخی از راه حل ها هستند.
  6. استفاده از bodyheader و bodyfooter بلوک ها برای بسته بندی محتوای مدیر.

اکنون که به الگوی سرپرست دسترسی پیدا کردیم ، می توانیم شیوه نامه آن را بیشتر کنیم ، یا فقط آن را با یک سبک مشترک با UI اصلی بگذاریم.

هشدارها

ما در حال حفظ دو الگوی متفاوت (رابط کاربری اصلی و مدیر) هستیم تا اساساً همان ارائه را انجام دهیم. مسلماً ، این ایده آل نیست ، زیرا ما صریحاً یکی از حداکثر توسعه نرم افزار را نقض می کنیم: خودت را تکرار نکن (خشک).

همانطور که توضیح دادیم ، این به این دلیل است که مدیر Django طوری طراحی شده است که از UI اصلی جدا شود. و این هیچ مشکلی ندارد ، همانطور که فکر کردن در خارج از جعبه هیچ مشکلی ندارد. اما بله ، این ما را مجبور می کند تا از دو الگوی تقریباً یکسان استفاده کنیم.

در حقیقت، در اصل ما می توانیم الگوی الگویی را طراحی کنیم که شامل آن navbar و سایر عناصر مشترک از UI اصلی و مدیر باشد و آنها را از همان منبع واحد استفاده مجدد کنیم. اما در این مرحله و برای هدف این مقاله ، این رویكرد كمی بیش از حد خواهد بود. به هر حال ، من ایده کاشته شده را برای شما می گذارم. 😉

ساخت نوار پیمایش مشترک

اکنون که UI اصلی و سایت سرپرست تقریباً یکسان به نظر می رسند ، ما می توانیم در ادغام خود پیشرفت بیشتری داشته باشیم و یک تجربه ناوبری مشترک ایجاد کنیم … و حتی بیشتر ، برخی از گزینه های مدیر را در منوی اصلی ارائه دهیم!

در اینجا قطعه ای برای Navbar آورده شده است:

<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 بخش ، که از ارائه یک منوی مدیر مراقبت می کند (به Bootstrap مراجعه کنید) نوار م componentلفه برای اطلاعات بیشتر).

ما همچنین انجام می دهیم بررسی مشروط با {% 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 %}

درهم شکستن

آنچه در اینجا انجام می دهیم:

  1. {{ block.super }} برچسب وجود دارد تا به موتور الگو بگویید که ما محتوای آن را کنترل نمی کنیم extrastyle (که ما در templates/admin/base_site.html الگو) اما اینکه ما به سادگی محتوای آن را اضافه می کنیم (نگاه کنید به ارث الگو برای اطلاعات بیشتر).
  2. branding بلوک به ما اجازه می دهد تا عنوان “مدیریت جنگو” را به نکته جالب تری تغییر دهیم.
  3. ما خلاص می شویم head_title با تنظیم یک تعریف خالی مسدود کنید.
  4. ما از content_title برای افزودن اطلاعات اضافی مسدود کنید.

برخی ملاحظات

آرم jquery
منبع

درست مثل Bootstrap ، سایت مدیریت Django نیز بسته خود را از آن ارسال می کند جی کوئری، اما خوشبختانه توسعه دهندگان جنگو این را فکر کرده اند و برای جلوگیری از درگیری با اسکریپت ها و کتابخانه های ارائه شده توسط کاربر ، jQuery جنگو به عنوان نام django.jQuery. بنابراین می توانیم نسخه شخصی شما را (همانطور که قبلاً انجام داده ایم) با خیال راحت وارد کنیم.

هنگام دیوانه شدن با تعاریف کلاس در صفحه اصلی خود مراقب باشید ، زیرا این امر بر سایت مدیر نیز تأثیر می گذارد و از طریق روشهای غیرمنتظره بر عملکرد آن تأثیر می گذارد. در آن رویداد ، همیشه می توانید ببینید که با ابزارهای اشکال زدایی مرورگر خود ، مانند موارد دیگر ، چه می گذرد Chrome DevTools، Firefox Developer Tools (به ویژه بازرس صفحه)، یا ابزارهای توسعه دهنده Safari.

نسخه ی نمایشی و کد کامل

این پیاده سازی که ما در اینجا بحث کردیم به صورت زیر خواهد بود:

https://www.youtube.com/watch؟v=O9UGjQgxITQ

می توانید تمام کد پروژه را در مخزن GitHub من مرور کنید ، luzdealba / djangovuejs.

بسته شدن

اگرچه برخی ممکن است ادعا کنند – کاملا منطقی – که نیازی به تغییر ظاهر مدیر جنگو نیست ، اما همچنین درست است که یکپارچه سازی نقاط انتهایی مختلف یک سایت یک هک خوب برای بهبود UX است، زیرا می تواند انتقال بی نقصی بین این دو ، و حتی یک کنترل ناوبری بیشتر از مدیر ایجاد کند.

و انجام این کار چندان دشوار نیست. آنچه باید به آن توجه کنید نحوه بسته بندی مدیر و همچنین نحوه مخلوط کردن کتابخانه های شخص ثالث با کد جاوا اسکریپت و شیوه نامه های شما است. خوشبختانه ، شما به راحتی می توانید برخی را با مدیر ادغام کنید ، برخی را با بقیه سایت اصلی و برخی دیگر را در هر دو ادغام کنید.

امیدوارم ایده هایی در مورد چگونگی شخصی سازی بیشتر جنگو به روش هایی که چندان مشهود نیستند داشته باشید!

اگر برای ساختن یک برنامه وب بهانه ای نیاز دارید تا بتوانید با سرپرست Django بازی کنید ، هفته گذشته به آموزش نمونه سازی اولیه یک برنامه وب با Django و Vue.js بپردازید – این یک نوع لذت است. و اگر می خواهید مهارت های جنگو خود را بیشتر کنید ، کتابخانه SitePoint Premium انبوهی از منابع برای شما دارد.