> django管理網站很棒- 功能齊全,易於使用,設計,設計,堅固……且有些醜陋,當您想將其與其他外觀整合在一起時,這可能是一個不利之處您的網站。讓我們對此進行排序。
>帶字段名稱作者(鏈接),內容和slug
>的文章作者:帶有字段名稱和slug
>
接下來,我們將將其集成到管理員中,並在兩端添加共享導航欄 - 主站點和後台!
>>幾乎相同的>,我們也需要維護兩個不同的模板 - 一個用於主UI,一個用於管理員。
啟用模板的目錄一般>
首先,我們需要告訴django我們將在基本目錄中存儲被黑客攻擊的管理模板。
>包裝管理模板(Admin/Base Hack) >我們需要將Django的admin/base.html複製到模板/admin/base.html中的模板目錄,以便我們可以放置包裝器。
編碼自定義管理模板(admin/base_site hack) 崩潰 caveats >
實際上
製作共享導航欄
>>仍然有一個鬆散的結尾:登錄屏幕。
…進入這樣的東西: 我們可以通過在templtes/admin/login.html中創建以下模板來實現更接近此操作的事情:
>演示和完整代碼 我們在這裡討論的這個實現將看起來像這樣: >您可以在我的github存儲庫中瀏覽所有項目代碼,luzdealba / djangovuejs。
>順利地整合網站的不同端點是一個很好的hack,可以改進UX 這樣做並不是那麼困難。您需要注意的是如何包裝管理員,以及如何將第三方庫與自己的JavaScript代碼和样式表相混合。幸運的是,您可以很容易地將其中一些集成到管理員中,其中一些在主站點的其餘部分中,而有些則融入了兩者中。 希望您對如何以不明顯的方式來進一步自定義django有一些想法! 如果您需要構建Web應用程序的藉口,以便可以使用Django管理員播放,請查看上週與Django和vue.js的Web應用程序的原型教程,這很有趣。而且,如果您想進一步提高Django技能,那麼SitePoint Premium Library為您提供大量資源。
>
對此更改該代碼:<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>
>如果我們只是想進行化妝品更改,例如將自定義樣式表傳遞給管理員,或刪除/更換其標題,我們可以通過編輯Admin/base_site模板並完全跳過此當前步驟,從而與之相處。但是,如果我們想一路走並“包裹”管理員部分,就好像它包含在我們的主站點中,並且有可能擁有一個通用的標頭和頁腳,請繼續閱讀。
<span>'DIRS': [],
</span>
:
<span>'DIRS': [os.path.join(BASE_DIR, 'templates')],
</span>
>讓我們嘗試解釋我們在這裡做什麼:
>我們維護兩個不同的模板(Main UI和Admin)進行基本相同的表示。誠然,這並不理想,因為我們明確打破了軟件開發的最高版本之一:不要重複自己(乾燥)。
>
正如我們所評論的那樣,這是因為Django管理員的設計被設計為從主UI脫離。這沒什麼錯,就像開箱即用的思考沒有什麼錯一樣。但是,是的,這迫使我們使用兩個具有幾乎相同內容的模板。 這是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>
>
最後,請記住,由於我們現在正在維護兩個不同的主要模板,因此我們需要將NAVBAR的HTML代碼添加到這兩種模板中模板/admin/base_site.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>
崩潰
我們在這裡做什麼:{{{block.super}}標籤在那裡告訴模板引擎,我們沒有覆蓋Extrastyle的內容(我們在模板/admin/admin/base_site.html模板中定義了),但我們只是簡單將內容附加到它(有關更多信息,請參見模板繼承)。
源
>使用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中文網其他相關文章!