如何使用Bootstrap重新設計和自定義Django管理員

> django管理網站很棒- 功能齊全，易於使用，設計，設計，堅固……且有些醜陋，當您想將其與其他外觀整合在一起時，這可能是一個不利之處您的網站。讓我們對此進行排序。

鑰匙要點

通過集成Bootstrap的設計模板和響應功能，利用Bootstrap來增強DJANGO管理員的視覺吸引力和用戶體驗。
• 覆蓋Django的默認管理模板允許與主站點進行無縫集成，保持一致的品牌和導航。
自定義過程涉及修改`myproject/settings.py'中的設置，並在模板目錄中創建新的模板文件以結合Bootstrap樣式和腳本。
• > 可以將共享導航欄和其他共同元素添加到主站點和管理模板上，從而促進跨平台的統一用戶界面。
>通過仔細管理類定義並使用瀏覽器調試工具來解決重疊CSS的潛在問題。
如果沒有破產……
• >
>默認Django管理員。 （源）

說您剛剛與Django和vue.js進行了製作的Web應用程序。對於各種各樣的情況，將Django的管理員按原樣用於後台目的，甚至在適當設置權限後將其處理給您的客戶都很好。畢竟，它的運作良好，可以通過內置工具進行大量定制以涵蓋許多情況。

> >再次，為什麼要打擾

攻擊管理的外觀和感覺 但是，有許多有效的理由將集成進一步：>

• >品牌：想要公司的名稱和顏色而不是“ Django Administration”沒有錯（為了記錄，這符合Django的BSD許可）。 主站點和管理員之間的無縫集成：您可能希望能夠通過擁有一個公共導航欄在導航站點時在後台功能之間過渡。
>漂亮：雖然管理員看起來還不錯，並且自從V2（在移動和台式機上都很好地運作良好）以來，它甚至已經實現了響應式的Web設計原則，但是有很多精心設計的樣式表可以使它看起來更好。
旁路功能：您可能還只想為管理員創建自定義下拉菜單，顯示您實際使用的選項並隱藏在用戶界面中，您實際上不需要的內容，這可能會帶來更好的用戶體驗。
• 一個實踐示例
在此示例中，
• >不重複自己，我們將恢復使用django and vue.js文章的Web應用程序啟動的簡單發布Web應用程序。 簡而言之：

>帶有兩個模型的Django應用：

>帶字段名稱作者（鏈接），內容和slug

>的文章

作者：帶有字段名稱和slug

>

>一個稱為前端的單個視圖，該視圖查詢這兩個模型中的所有註冊表。 >
• 一個稱為模板的單個模板。
用Vue Router和Vuex實現Vue.js，用於反應性可伸縮接口。
>我們不會特別關心此期間的vue.js集成，我們不會在這裡修改它。
• 基本模板
• 源
django模板非常廣泛且功能強大，可以在應用程序級別（Django站點的一個組件）或站點級別上創建，甚至可以覆蓋Django隨附的模板（這就是我們的'' LL在這裡做）。

源

我們創建了一個基本模板，該模板鏈接到Bootstrap的JavaScript和样式表，以及其伴隨工具，JQuery和Popper。

>這是我們用於主站點的基本模板，與我們通常用於任何其他Django網站使用的基本模板完全不同：

>

接下來，我們將將其集成到管理員中，並在兩端添加共享導航欄 - 主站點和後台！

>

將主UI模板與Admin

集成 如前所述，我們可以覆蓋模板，包括管理模板。但是，由於Django的設計，而且毫不奇怪，主站點和後台是兩個不同的系統，每個系統都有自己的模板，樣式表和貢獻包。因此，即使它們將是

>幾乎相同的>，我們也需要維護兩個不同的模板 - 一個用於主UI，一個用於管理員。 啟用模板的目錄一般> 首先，我們需要告訴django我們將在基本目錄中存儲被黑客攻擊的管理模板。 > SE

對此更改該代碼：

>包裝管理模板（Admin/Base Hack）

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span>

>如果我們只是想進行化妝品更改，例如將自定義樣式表傳遞給管理員，或刪除/更換其標題，我們可以通過編輯Admin/base_site模板並完全跳過此當前步驟，從而與之相處。但是，如果我們想一路走並“包裹”管理員部分，就好像它包含在我們的主站點中，並且有可能擁有一個通用的標頭和頁腳，請繼續閱讀。

>我們需要將Django的admin/base.html複製到模板/admin/base.html中的模板目錄，以便我們可以放置包裝器。

我們將編輯容器部分周圍的代碼，以便從此範圍內：>

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

：

>僅此而已！我們只是創建了Bodyheader和Bodyfooter Block標籤，因此我們可以注入將在下一步中包裝管理員的代碼。

編碼自定義管理模板（admin/base_site hack） 然後，我們將在模板/admin/base_site.html中對實際模板進行編碼（我們需要在項目的根部創建目錄）：>

崩潰

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

>讓我們嘗試解釋我們在這裡做什麼：

1. 我們告訴模板引擎我們正在“擴展” admin/base_site.html模板，以有效地覆蓋其某些定義。
>
2. 我們利用標題塊自定義了瀏覽的管理頁面標題。
>
3. 我們清空了品牌和麵包屑塊的內容，因為我們真的不需要它們。
>
4. 我們使用BodyClass塊來設置Bootstrap的BG-Light，就​​像我們在前端模板中所做的那樣。
5. 我們使用Extrastyle塊嵌入引導程序和一些CSS代碼。 一個。好的，#header，.breadcrumbs {display：none; }是數字3的重述；但是知道您可以雙向禁用品牌和麵包屑部分，這很有用。 b。當與Django的CSS重疊時，可能會有一些問題，因此這些是一些修復程序。
>使用Bovyheader和Bodyfooter塊來包裝管理員內容。
>現在我們可以訪問管理模板，我們可以進一步進一步的樣式表，或者只需使用主UI的共享樣式。

caveats

>我們維護兩個不同的模板（Main UI和Admin）進行基本相同的表示。誠然，這並不理想，因為我們明確打破了軟件開發的最高版本之一：不要重複自己（乾燥）。

> 正如我們所評論的那樣，這是因為Django管理員的設計被設計為從主UI脫離。這沒什麼錯，就像開箱即用的思考沒有什麼錯一樣。但是，是的，這迫使我們使用兩個具有幾乎相同內容的模板。

>

實際上

，原則上，我們可以設計一個模板模式，其中包括Navbar和Main UI和Admin的其他常見元素，並從該單個源重複使用它們；但是在這一點上，出於本文的目的，這種方法將有點過分殺傷。無論如何，我會為您提供這個想法。 ？

製作共享導航欄

>現在，主UI和管理站點看起來幾乎相同，我們可以進一步集成並進行常見的導航體驗……甚至在主菜單上呈現一些Admin選項！

這是Navbar的片段：

請注意下拉菜單部分，該部分將負責介紹管理菜單（有關更多信息，請參見Bootstrap的Navbar組件）。

>我們還對{％user.is_authenticated％} /{％endif％}進行有條件的檢查，以決定是否顯示管理員菜單。

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span>

> 最後，請記住，由於我們現在正在維護兩個不同的主要模板，因此我們需要將NAVBAR的HTML代碼添加到這兩種模板中模板/admin/base_site.html。

額外：管理員登錄屏幕

管理站點已經得到了照顧，

>>仍然有一個鬆散的結尾：登錄屏幕。

現在我們可以轉動這樣的東西：

源

…進入這樣的東西：

>

我們可以通過在templtes/admin/login.html中創建以下模板來實現更接近此操作的事情：

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Required meta tags -->
</span>    <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>    <span><span><span><meta> 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> 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>></title></span>Django and Vue.js<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span> class<span>="bg-light"</span>></span>
</span>    <span><span><span><div> class<span>="bg-white container"</span>>
      <span><span><span><h1 id="gt">></h1></span>Prototyping a Web App with Django and Vue.js<span><span></span>></span>
</span>
      <span><!-- Content -->
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><!-- Vue.js -->
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://unpkg.com/vue-router"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- jQuery first, then Popper.js, then Bootstrap JS -->
</span>    <span><span><span><script> src<span >="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script></span> integrity<span>="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"</script></span> integrity<span>="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span>

崩潰

我們在這裡做什麼：

{{{block.super}}標籤在那裡告訴模板引擎，我們沒有覆蓋Extrastyle的內容（我們在模板/admin/admin/base_site.html模板中定義了），但我們只是簡單將內容附加到它（有關更多信息，請參見模板繼承）。
>品牌塊使我們能夠將“ Django Administration”標頭更改為更有趣的東西。
2. 我們通過設置一個空的定義來擺脫head_title塊。
我們使用content_title塊添加一些額外的信息。
3. >
4. 一些考慮因素

源

>就像Bootstrap一樣，Django Admin站點也寄出了自己的jQuery捆綁包，但幸運的是，Django開發人員認為這是通過並避免與用戶提供的腳本和庫發生衝突的，Django的JQuery被稱為Django.jquery。因此，我們可以安全地包含您自己的副本（如我們所做的那樣）。

>

在主要樣式表中的班級定義瘋狂時要小心，因為這也會影響管理站點，以意外的方式影響其功能。在此事件中，您始終可以查看瀏覽器調試工具的情況，例如Chrome DevTools，Firefox開發人員工具（尤其是頁面檢查員）或Safari開發人員工具。

>演示和完整代碼

我們在這裡討論的這個實現將看起來像這樣：

>

>您可以在我的github存儲庫中瀏覽所有項目代碼，luzdealba / djangovuejs。

總結有些人可能會聲稱- 相當合理地說，不需要更改Django的管理員外觀，但同樣，

>順利地整合網站的不同端點是一個很好的hack，可以改進UX

，因為它可以在兩者之間提供無縫的過渡，甚至可以提供管理員的更具控制的導航。

這樣做並不是那麼困難。您需要注意的是如何包裝管理員，以及如何將第三方庫與自己的JavaScript代碼和样式表相混合。幸運的是，您可以很容易地將其中一些集成到管理員中，其中一些在主站點的其餘部分中，而有些則融入了兩者中。

>。

希望您對如何以不明顯的方式來進一步自定義django有一些想法！

>

如果您需要構建Web應用程序的藉口，以便可以使用Django管理員播放，請查看上週與Django和vue.js的Web應用程序的原型教程，這很有趣。而且，如果您想進一步提高Django技能，那麼SitePoint Premium Library為您提供大量資源。

>與Bootstrap自定義Django管理員的常見問題（常見問題解答）

>使用Bootstrap自定義Django管理員的好處是什麼？首先，它增強了管理界面的視覺吸引力，使其更加友好和直觀。 Bootstrap是一個流行的前端框架，為排版，表單，按鈕和其他接口組件提供各種設計模板。通過將其與Django管理員集成在一起，您可以利用這些模板創建更具視覺吸引力和功能性的管理界面。其次，它允許您在管理接口中添加自定義功能。例如，您可以添加自定義操作，過濾器和表格，以提高管理員界面的可用性。最後，它可以提高管理員界面的響應能力，使其在不同的設備和屏幕尺寸上更容易訪問。

如何將自定義操作添加到Django Admin？

django Admin允許您允許您允許您添加可以在選定對像上執行的自定義操作。要添加自定義操作，您需要定義一個在所選對像上執行所需操作的函數。此功能應採用三個參數：模型管理員，請求和選定對象的QuerySet。定義此功能後，您可以將其添加到模型管理員的“操作”屬性中。這將使操作在“管理員更改列表”頁面上的操作下拉列表中可用。

>我可以使用bootstrap自定義django admin的外觀和感覺嗎？使用Bootstrap的Django管理員感覺。 Bootstrap是一個前端框架，可為排版，表單，按鈕和其他接口組件提供各種設計模板。通過將其與Django管理員集成在一起，您可以利用這些模板創建更具視覺吸引力和功能性的管理界面。您可以自定義管理界面的顏色，字體，佈局和其他設計元素，以匹配您的品牌標識或個人喜好。

>

>如何將自定義過濾器添加到django admin？

django admin允許您添加可用於過濾“管理員更改列表”頁面上顯示的對象的自定義過濾器。要添加自定義過濾器，您需要定義django.contrib.admin.simplelistfilter的子類。該子類應定義兩種方法：查找和QuerySet。查找方法應返回一個元組列表，每個列表代表過濾器選項。 QuerySet方法應基於所選過濾器選項返回過濾後的QuerySet。定義此子類後，您可以將其添加到模型管理的“ List_filter”屬性中。要將Bootstrap與Django Admin一起使用，沒有任何其他軟件包，使用Django-Admin-bootstrap之類的軟件包通常更容易，更有效。該軟件包為Django管理員提供了一個基於引導程序的主題，從而更容易將Bootstrap與Django Admin集成在一起。它還提供了其他功能，例如響應式設計和自定義表單渲染，它可以進一步增強管理界面的可用性和功能。

>

>如何自定義Django Admin中的表單字段？管理員允許您自定義用於創建或編輯對象的表單字段。要自定義表單字段，您需要覆蓋模型管理員的“ FormField_For_DBField”方法。此方法應返回將用於指定數據庫字段的表單字段實例。您可以自定義表單字段的屬性，小部件和驗證行為以適合您的需求。

我可以將自定義視圖添加到django admin嗎？要添加自定義視圖，您需要在模型管理中定義一個處理視圖邏輯的方法。此方法應將請求作為其唯一參數並返迴響應。然後，您可以通過在模型管理員的“ get_urls”方法中添加URL模式來將此方法映射到URL。這將使您可以從管理界面訪問視圖。

>

如何自定義django admin中的列表顯示？

django admin允許您自定義列表顯示，哪個是對象表顯示在管理變更列表頁面上。要自定義列表顯示，您可以將模型管理員的“ list_display”屬性設置為要顯示的字段名稱列表。您還可以在此列表中包含方法名稱，該名稱將在每個對像上調用相應的方法並顯示結果。

>我可以將Django Admin用於復雜的數據庫模型嗎？它提供了各種功能，可以幫助您管理複雜的數據結構，例如相關對象，自定義表單字段和自定義操作的內聯編輯。但是，對於非常複雜的數據結構或高級數據庫操作，您可能需要使用自定義視圖，表單或操作擴展Django Admin。有幾種方法可以提高Django管理員的性能。一種方法是優化數據庫查詢。 Django Admin會根據您的模型定義和管理選項自動生成數據庫查詢。但是，這些查詢有時可能會降低，尤其是對於復雜的數據結構或大型數據集而言。通過自定義管理選項並使用Django的數據庫優化功能，您可以顯著減少數據庫查詢的數量並提高管理員接口的性能。另一種方法是使用緩存。 Django提供了一個強大的緩存框架，您可以使用該框架來緩存昂貴的操作或經常訪問的數據的結果。通過使用緩存，您可以減少數據庫上的負載並提高管理員界面的響應能力。

以上是如何使用Bootstrap重新設計和自定義Django管理員的詳細內容。更多資訊請關注PHP中文網其他相關文章！