Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap-industri IT-php.cn

Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap

Tapak Pentadbiran Django adalah hebat-disatukan sepenuhnya, mudah digunakan, selamat dengan reka bentuk, batuan pepejal ... dan agak hodoh, yang boleh menjadi sesuatu yang kelemahan apabila anda ingin mengintegrasikannya dengan rupa dan nuansa selebihnya laman web anda. Mari kita menyusunnya.

Takeaways Key

jika tidak rosak ...

Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap

Katakanlah anda hanya prototaip aplikasi web dengan django dan vue.js. Untuk pelbagai kes, menggunakan admin Django untuk tujuan pejabat belakang seperti itu, dan juga mengendalikannya kepada pelanggan anda selepas menetapkan kebenaran dengan sewajarnya, adalah baik -baik saja. Lagipun, ia berfungsi dengan baik dan ia boleh disesuaikan dengan alat terbina dalam untuk merangkumi banyak situasi.

sekali lagi, mengapa mengganggu?

alasan untuk menggodam rupa dan nuansa admin

Walau bagaimanapun, terdapat beberapa sebab yang sah untuk mengambil integrasi satu langkah lagi:

Penjenamaan: Tidak ada yang salah dalam menginginkan nama dan warna syarikat anda dan bukannya "pentadbiran Django" (dan untuk rekod, ini mematuhi lesen BSD Django).
Integrasi lancar antara tapak utama dan admin: Anda mungkin mahu dapat beralih antara fungsi pejabat belakang semasa menavigasi tapak, dan sebaliknya, dengan mempunyai bar navigasi biasa.
Prettifikasi: Walaupun pentadbir kelihatan baik-baik saja, dan bahkan telah melaksanakan prinsip reka bentuk web responsif sejak v2 (ia berfungsi dengan baik pada kedua-dua, mudah alih dan desktop), ada banyak lembaran gaya yang baik boleh lakukan untuk menjadikannya kelihatan lebih baik.
Fungsi Bypass: Anda mungkin juga ingin membuat menu dropdown tersuai untuk pentadbir, memaparkan pilihan yang sebenarnya anda gunakan dan bersembunyi dari antara muka pengguna yang anda tidak perlukan, yang boleh membuat pengalaman pengguna yang lebih baik.

Contoh praktikal

Untuk contoh ini, dan tidak mengulangi diri kita sendiri, kami akan meneruskan aplikasi web penerbitan mudah yang kami mulakan untuk prototaip aplikasi web dengan artikel Django dan Vue.js.

secara ringkas:

Artikel

Kami tidak akan terlalu menjaga integrasi Vue.js dalam ansuran ini, dan kami tidak akan mengubahnya di sini.

Templat Asas

Templat Django sangat serba boleh dan berkuasa, dan sama ada boleh dibuat di peringkat aplikasi (komponen tapak Django) atau di peringkat tapak, dan juga boleh mengatasi templat yang datang dengan Django (yang mana kita ' ll lakukan di sini).

Kami mencipta templat asas yang menghubungkan ke lembaran javascript dan gaya Bootstrap, dan juga alat temannya, jQuery dan popper.

Berikut adalah template asas yang kami gunakan untuk tapak utama, sama sekali tidak berbeza dari apa yang biasanya kami gunakan untuk mana -mana laman web Django yang lain:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Salin selepas log masuk

Seterusnya, kami akan mengintegrasikannya ke dalam pentadbir, dan menambah bar navigasi bersama di kedua -dua hujung - tapak utama dan pejabat belakang!

Mengintegrasikan templat UI utama dengan admin

Seperti yang disebutkan, kita boleh menimpa templat, termasuk admin. Walau bagaimanapun, kerana reka bentuk Django, dan tidak mengejutkan, tapak utama dan pejabat belakang adalah dua sistem yang berbeza, masing -masing dengan templat sendiri, lembaran gaya, dan pakej sumbangan. Jadi, walaupun mereka akan menjadi hampir identik, kita perlu mengekalkan dua templat yang berbeza - satu untuk UI utama, dan satu untuk pentadbir. Membolehkan direktori untuk templat secara umum

Pertama, kita perlu memberitahu Django di mana kita akan menyimpan template pentadbir yang digodam dalam direktori asas.

se kita perlu mengedit myproject/settings.py. Pertama, cari templat yang berterusan dan kunci dir ini:

Tukar kod itu ke ini:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Salin selepas log masuk

membungkus template admin (admin/hack asas)

<span>'DIRS': [],
</span>

Salin selepas log masuk

Jika kita hanya mahu melakukan perubahan kosmetik, seperti melepasi lembaran gaya tersuai ke pentadbir, atau mengeluarkan/menggantikan headernya, kita boleh bergaul dengan hanya mengedit template admin/base_site dan melangkau langkah semasa ini sama sekali. Walau bagaimanapun, jika kita mahu pergi sepanjang jalan dan "membungkus" bahagian admin seolah -olah ia terkandung di dalam tapak utama kita, dengan kemungkinan untuk mempunyai header dan footer yang sama, maka terus membaca.

kita perlu menyalin admin/base.html Django ke direktori templat kami dalam templat/admin/base.html, supaya kami dapat meletakkan pembungkus kami.

kami akan mengedit kod di sekitar bahagian kontena, supaya ia pergi dari ini:

untuk ini:

<span>'DIRS': [os.path.join(BASE_DIR, 'templates')],
</span>

Salin selepas log masuk

Dan itu sahaja! Kami hanya mencipta tag blok bodyheader dan bodyfooter, supaya kami dapat menyuntik kod yang akan membungkus pentadbir pada langkah seterusnya.

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

Salin selepas log masuk

pengekodan templat admin adat (admin/base_site hack)

Kemudian, kami akan mengodkan templat sebenar dalam templat/admin/base_site.html (kami perlu membuat direktori pada akar projek kami):

pecahan

{% block bodyheader %}{% endblock %}

<span><!-- Container -->
</span><span><span><span><div</span> id<span>="container"</span>></span>
</span>(...)
<span><span><span></div</span>></span>
</span><span><!-- END Container -->
</span>
{% block bodyfooter %}{% endblock %}

Salin selepas log masuk

Mari cuba jelaskan apa yang kita lakukan di sini:

kami memberitahu enjin templat bahawa kami "memperluaskan" template admin/base_site.html, untuk mengatasi beberapa definisi dengan berkesan.
Kami menggunakan blok tajuk untuk menyesuaikan tajuk untuk halaman admin yang dilayari.
Kami mengosongkan kandungan blok penjenamaan dan serbuk roti, kerana kami tidak memerlukannya.
Kami menggunakan blok bodyclass untuk menetapkan BG-Light Bootstrap, seperti yang kita lakukan dalam template frontend.
Kami menggunakan blok extrastyle untuk membenamkan bootstrap, dan beberapa kod CSS. a. Okay, #header, .breadcrumbs {paparan: tiada; } adalah sesuatu penyataan nombor 3; Tetapi ia berguna untuk mengetahui bahawa anda boleh melumpuhkan bahagian penjenamaan dan serbuk roti kedua -dua cara. b. Terdapat beberapa masalah apabila bertindih bootstrap dengan CSS Django di Admin, jadi ini adalah beberapa perbaikan.
Gunakan blok bodyheader dan bodyfooter untuk membungkus kandungan admin.

Sekarang kita mempunyai akses ke template admin, kita dapat meneruskan lembaran gaya, atau hanya meninggalkannya dengan gaya bersama dengan UI utama.

Caveats

Kami mengekalkan dua templat yang berbeza (UI dan Admin Utama) untuk melakukan persembahan yang sama. Diakui, ini tidak sesuai, kerana kami secara jelas memecahkan salah satu maksim pembangunan perisian: jangan ulangi diri anda (kering).

seperti yang kita komen, ini kerana pentadbir Django telah direka untuk terlepas dari UI utama. Dan tidak ada yang salah dengan itu, sama seperti tidak ada yang salah dengan berfikir dari kotak. Tetapi ya, itu memaksa kita untuk menggunakan dua templat dengan kandungan hampir sama.

sebenarnya , pada dasarnya kita dapat merancang corak templat yang termasuk navbar dan unsur -unsur umum lain dari UI utama dan pentadbir, dan menggunakannya semula dari sumber tunggal itu; Tetapi pada ketika ini, dan untuk tujuan artikel ini, pendekatan itu akan menjadi sedikit berlebihan. Bagaimanapun, saya akan meninggalkan idea yang ditanam untuk anda. ?

Membuat bar navigasi bersama

Sekarang bahawa UI utama dan tapak admin kelihatan hampir sama, kita boleh pergi lebih jauh dalam integrasi kami dan membuat pengalaman navigasi yang sama ... dan lebih jauh lagi, mempersembahkan beberapa pilihan admin tepat pada menu utama!

inilah coretan untuk navbar:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Salin selepas log masuk

Perhatikan bahagian menu jatuh turun, yang akan menjaga menu admin (lihat komponen Navbar Bootstrap untuk maklumat lanjut).

kami juga melakukan pemeriksaan bersyarat dengan { % if user.is_authenticated %} /{ % endif %}, untuk memutuskan sama ada kami menunjukkan menu admin atau tidak.

Akhir sekali, ingatlah bahawa, kerana kita kini mengekalkan dua templat utama yang berbeza, kita perlu menambah kod HTML navbar kepada kedua -duanya, myApp/templates/myApp/tempalte.html dan templat/admin/base_site.html.

tambahan: skrin log masuk admin

Laman pentadbir telah dijaga, tetapi masih ada akhir yang longgar: skrin log masuk.

sekarang kita boleh mengubah sesuatu seperti ini:

... menjadi sesuatu seperti ini:

Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap

kita dapat mencapai sesuatu yang lebih dekat dengan itu dengan membuat template berikut dalam templtes/admin/login.html:

<span><span><!doctype html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
</span>
    <span><!-- Bootstrap CSS -->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"</span> integrity<span>="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"</span> crossorigin<span>="anonymous"</span>></span>
</span>
    <span><span><span><title</span>></span>Django and Vue.js<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div</span> class<span>="bg-white container"</span>></span>
</span>      <span><span><span><h1</span>></span>Prototyping a Web App with Django and Vue.js<span><span></h1</span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></div</span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://unpkg.com/vue-router"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.4.1.slim.min.js"</span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Salin selepas log masuk

pecahan

apa yang kita lakukan di sini:

Beberapa pertimbangan

Sama seperti Bootstrap, tapak admin Django juga mengangkut jQuery sendiri, tetapi mujurlah pemaju Django menganggap ini melalui dan untuk mengelakkan konflik dengan skrip dan perpustakaan yang dibekalkan pengguna, jQuery Django adalah nama-nama sebagai django.jqery. Oleh itu, kami boleh memasukkan salinan anda sendiri (seperti yang telah kami lakukan) dengan selamat.

Berhati -hati apabila gila dengan definisi kelas dalam lembaran gaya utama anda, kerana itu juga akan memberi kesan kepada tapak admin, yang mempengaruhi fungsinya dengan cara yang tidak dijangka. Dalam acara itu, anda sentiasa dapat melihat apa yang sedang berlaku dengan alat debugging penyemak imbas anda, seperti Chrome Devtools, Alat Pemaju Firefox (terutamanya Inspektor Halaman), atau Alat Pemaju Safari. Demo dan Kod Penuh

Pelaksanaan ini yang kita bincangkan di sini akan kelihatan seperti ini:

anda boleh menavigasi semua kod projek dalam repositori github saya, luzdealba / djangovuejs. Bungkus

Walaupun ada yang mungkin menuntut - agak munasabah - bahawa tidak banyak keperluan untuk mengubah penampilan pentadbir Django, itu juga benar bahawa

dengan lancar mengintegrasikan titik akhir yang berbeza dari tapak adalah hack yang baik untuk ux

yang lebih baik,, kerana ia dapat memberikan peralihan lancar antara kedua -dua, dan bahkan navigasi yang lebih terkawal dari admin.

Dan berbuat demikian tidak begitu sukar. Apa yang anda perlukan untuk memberi perhatian ialah bagaimana anda membungkus pentadbir, dan juga bagaimana anda mencampurkan perpustakaan pihak ketiga dengan kod JavaScript dan helaian gaya anda sendiri. Mujurlah, anda boleh dengan mudah mengintegrasikan beberapa ke dalam pentadbir, beberapa ke seluruh tapak utama, dan beberapa ke dalam kedua -duanya.

Mudah -mudahan anda mempunyai beberapa idea tentang bagaimana anda dapat menyesuaikan Django dengan cara yang tidak jelas!

Jika anda memerlukan alasan untuk membina aplikasi web hanya supaya anda boleh bermain dengan pentadbir Django, lihat tutorial minggu lalu mengenai prototaip aplikasi web dengan Django dan Vue.js - ia adalah satu keseronokan. Dan jika anda ingin mengambil kemahiran Django anda lebih jauh, Perpustakaan Premium SitePoint mempunyai timbunan sumber untuk anda.

Soalan Lazim (Soalan Lazim) untuk Menyesuaikan Admin Django dengan Bootstrap

Apakah faedah menyesuaikan admin Django dengan bootstrap? Pertama, ia meningkatkan daya tarikan visual antara muka pentadbir anda, menjadikannya lebih mesra pengguna dan intuitif. Bootstrap adalah kerangka depan yang popular yang menyediakan pelbagai templat reka bentuk untuk tipografi, bentuk, butang, dan komponen antara muka yang lain. Dengan mengintegrasikannya dengan admin Django, anda boleh memanfaatkan templat ini untuk mewujudkan antara muka admin yang lebih menarik dan berfungsi. Kedua, ia membolehkan anda menambah fungsi tersuai ke antara muka pentadbir anda. Sebagai contoh, anda boleh menambah tindakan, penapis, dan bentuk tersuai untuk meningkatkan kebolehgunaan antara muka pentadbir anda. Akhir sekali, ia dapat meningkatkan responsif antara muka pentadbir anda, menjadikannya lebih mudah diakses pada peranti dan saiz skrin yang berbeza. Tambah tindakan tersuai yang boleh dilakukan pada objek yang dipilih. Untuk menambah tindakan tersuai, anda perlu menentukan fungsi yang melakukan tindakan yang dikehendaki pada objek yang dipilih. Fungsi ini harus mengambil tiga parameter: pentadbir model, permintaan, dan pertanyaan objek yang dipilih. Sebaik sahaja anda telah menentukan fungsi ini, anda boleh menambahkannya ke atribut 'Tindakan' dari Admin Model anda. Ini akan membuat tindakan yang terdapat dalam dropdown tindakan pada halaman senarai perubahan admin.

Bolehkah saya menyesuaikan rupa dan rasa admin django menggunakan bootstrap? Rasa pentadbir Django menggunakan bootstrap. Bootstrap adalah kerangka depan yang menyediakan pelbagai templat reka bentuk untuk tipografi, bentuk, butang, dan komponen antara muka yang lain. Dengan mengintegrasikannya dengan admin Django, anda boleh memanfaatkan templat ini untuk mewujudkan antara muka admin yang lebih menarik dan berfungsi. Anda boleh menyesuaikan warna, fon, susun atur, dan elemen reka bentuk lain antara muka pentadbir anda untuk memadankan identiti jenama atau keutamaan peribadi anda.

Bagaimana saya boleh menambah penapis tersuai kepada admin django? Untuk menambah penapis tersuai, anda perlu menentukan subclass django.contrib.admin.simpleListFilter. Subkelas ini harus menentukan dua kaedah: carian dan pertanyaan. Kaedah carian harus mengembalikan senarai tupel, masing -masing mewakili pilihan penapis. Kaedah QuerySet hendaklah mengembalikan pertanyaan yang ditapis berdasarkan pilihan penapis yang dipilih. Sebaik sahaja anda telah menentukan subclass ini, anda boleh menambahkannya ke atribut 'list_filter' dari admin model anda. Untuk menggunakan bootstrap dengan admin Django tanpa sebarang pakej tambahan, ia secara umumnya lebih mudah dan lebih cekap untuk menggunakan pakej seperti Django-Admin-Bootstrap. Pakej ini menyediakan tema berasaskan bootstrap untuk admin Django, menjadikannya lebih mudah untuk mengintegrasikan bootstrap dengan admin Django. Ia juga menyediakan ciri -ciri tambahan seperti reka bentuk responsif dan rendering bentuk tersuai, yang dapat meningkatkan kebolehgunaan dan fungsi antara muka pentadbir anda. Admin membolehkan anda menyesuaikan bidang borang yang digunakan untuk membuat atau mengedit objek. Untuk menyesuaikan medan borang, anda perlu mengatasi kaedah 'formfield_for_dbfield' model admin anda. Kaedah ini harus mengembalikan contoh medan borang yang akan digunakan untuk medan pangkalan data yang ditentukan. Anda boleh menyesuaikan atribut bidang, widget, dan tingkah laku pengesahan yang sesuai dengan keperluan anda. Untuk menambah paparan tersuai, anda perlu menentukan kaedah dalam pentadbir model anda yang mengendalikan logik paparan. Kaedah ini harus mengambil permintaan sebagai satu -satunya parameter dan mengembalikan respons. Anda kemudian boleh memetakan kaedah ini ke URL dengan menambahkan corak URL ke kaedah 'get_urls' model admin anda. Ini akan menjadikan pandangan boleh diakses dari antara muka admin.

Bagaimana saya boleh menyesuaikan paparan senarai dalam admin django? dipaparkan pada halaman Senarai Perubahan Admin. Untuk menyesuaikan paparan senarai, anda boleh menetapkan atribut 'LIST_DISPLAY' dari Admin Model anda ke senarai nama medan yang anda ingin paparkan. Anda juga boleh memasukkan nama kaedah dalam senarai ini, yang akan memanggil kaedah yang sepadan pada setiap objek dan memaparkan hasilnya.

Bolehkah saya menggunakan Admin Django untuk model pangkalan data yang kompleks? Ia menyediakan pelbagai ciri yang dapat membantu anda menguruskan struktur data yang kompleks, seperti penyuntingan selaras objek yang berkaitan, medan borang tersuai, dan tindakan tersuai. Walau bagaimanapun, untuk struktur data yang sangat kompleks atau operasi pangkalan data canggih, anda mungkin perlu melanjutkan pentadbir Django dengan pandangan, bentuk, atau tindakan tersuai. Terdapat beberapa cara untuk meningkatkan prestasi pentadbir Django. Salah satu cara adalah untuk mengoptimumkan pertanyaan pangkalan data anda. Django Admin secara automatik menjana pertanyaan pangkalan data berdasarkan definisi model dan pilihan pentadbir anda. Walau bagaimanapun, pertanyaan ini kadang -kadang tidak cekap, terutamanya untuk struktur data yang kompleks atau dataset besar. Dengan menyesuaikan pilihan pentadbir anda dan menggunakan ciri pengoptimuman pangkalan data Django, anda dapat mengurangkan jumlah pertanyaan pangkalan data dan meningkatkan prestasi antara muka pentadbir anda. Cara lain ialah menggunakan caching. Django menyediakan rangka kerja caching yang kuat yang boleh anda gunakan untuk cache hasil operasi mahal atau data yang sering diakses. Dengan menggunakan caching, anda boleh mengurangkan beban pada pangkalan data anda dan meningkatkan respons antara muka pentadbir anda.

Atas ialah kandungan terperinci Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!