Cara Reka Bentuk & Sesuaikan Admin Django dengan Bootstrap
Takeaways Key
- Gunakan bootstrap untuk meningkatkan daya tarikan visual dan pengalaman pengguna admin Django dengan mengintegrasikan templat reka bentuk Bootstrap dan ciri -ciri responsif.
- Mengatasi templat admin lalai Django membolehkan integrasi lancar dengan tapak utama, mengekalkan penjenamaan dan navigasi yang konsisten.
- Proses penyesuaian melibatkan pengubahsuaian tetapan dalam `myproject/settings.py` dan membuat fail templat baru dalam direktori templat untuk menggabungkan gaya bootstrap dan skrip.
- Bar navigasi yang dikongsi dan elemen biasa lain boleh ditambah ke kedua -dua tapak utama dan templat pentadbir, mempromosikan antara muka pengguna bersatu di seluruh platform.
- Menangani isu -isu yang berpotensi dengan CSS bertindih dengan mengurus definisi kelas dengan teliti dan menggunakan alat penyahpepijat penyemak imbas untuk memastikan fungsi tidak dikompromikan.
admin django lalai. (Sumber) 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:
- Aplikasi Django dengan dua model:
- Artikel dengan pengarang nama medan (dikaitkan), kandungan dan slug
- pengarang: dengan nama medan dan slug
- satu pandangan yang dipanggil frontend yang menanyakan semua pendaftaran dalam kedua -dua model.
- templat tunggal yang dipanggil template.
- pelaksanaan VUE.js dengan Vue Router dan VUEX untuk antara muka berskala reaktif.
Templat Asas
sumber
sumber 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>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>membungkus template admin (admin/hack asas)
<span>'DIRS': [], </span>
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>
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>
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 %}
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>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:
<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>apa yang kita lakukan di sini:
- tag {{block.super}} ada untuk memberitahu enjin templat bahawa kita tidak mengatasi kandungan extrastyle (yang kita tentukan dalam template templat/admin/base_site.html) tetapi kita hanya Menambah kandungan kepadanya (lihat warisan templat untuk maklumat lanjut).
- Blok penjenamaan membolehkan kita menukar tajuk "Pentadbiran Django" kepada sesuatu yang lebih menarik.
- kami menyingkirkan blok kepala_title dengan menetapkan definisi kosong.
- kami menggunakan blok content_title untuk menambah beberapa maklumat tambahan.
sumber 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.
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Top 10 alat pemeriksa backlink terbaik terbaik pada tahun 2025
Mar 21, 2025 am 08:28 AM
Pembinaan laman web hanyalah langkah pertama: kepentingan SEO dan backlinks Membina laman web hanyalah langkah pertama untuk mengubahnya menjadi aset pemasaran yang berharga. Anda perlu melakukan pengoptimuman SEO untuk meningkatkan keterlihatan laman web anda di enjin carian dan menarik pelanggan yang berpotensi. Backlinks adalah kunci untuk meningkatkan kedudukan laman web anda, dan ia menunjukkan Google dan enjin carian lain kuasa dan kredibiliti laman web anda. Tidak semua pautan balik bermanfaat: mengenal pasti dan mengelakkan pautan yang berbahaya Tidak semua pautan balik bermanfaat. Pautan yang berbahaya boleh membahayakan kedudukan anda. Pemeriksaan backlink percuma yang sangat baik memantau sumber pautan ke laman web anda dan mengingatkan anda tentang pautan yang berbahaya. Di samping itu, anda juga boleh menganalisis strategi pautan pesaing anda dan belajar dari mereka. Alat Pemeriksaan Backlink Percuma: Pegawai Perisikan SEO anda
Membina pengimbas kelemahan rangkaian dengan pergi
Apr 01, 2025 am 08:27 AM
Pengimbas kelemahan rangkaian berasaskan GO ini dengan cekap mengenal pasti kelemahan keselamatan yang berpotensi. Ia memanfaatkan ciri konkurensi Go untuk kelajuan dan termasuk pengesanan perkhidmatan dan pemadanan kelemahan. Mari kita meneroka keupayaan dan etika
CNCF Arm64 Pilot: Impak dan Wawasan
Apr 15, 2025 am 08:27 AM
Program perintis ini, kerjasama antara CNCF (Yayasan Pengkomputeran Native Cloud), pengkomputeran ampere, equinix metal, dan digerakkan, menyelaraskan ARM64 CI/CD untuk projek GitHub CNCF. Inisiatif ini menangani kebimbangan keselamatan dan prestasi lim
