使用Django suit或Bootstrap美化admin模板

jeanron100發表於2017-12-26

Django的功能很強大,總體來說應該是支援的很全面,如果有些同學壓根不會html,web前端的東西,Django Admin模板也能滿足你的需求,只是做做後設資料的管理來說是足夠了。

比如我之前快速迭代的一個個人知識庫,至少目前來說先解放了自己,能實現一些基本的功能,然後逐步深入,自己一邊做產品經理,一邊做開發人員,對於需求如何實現和規劃,腦子裡就有了一個基本的思路。想想也確實,做到了一定程度之後,才會發現一些潛在的問題,或者說有一些新的需求,而如果一直邁不過那個坎,一直停留在之前的需求層次上,我希望把這個階段壓縮,儘快能夠完成一些基本的功能。

之前簡單配置的知識庫的截圖如下,還算湊合吧,不算太醜。

使用Django suit或Bootstrap美化admin模板

當然如果想實現一些看起來略好一些的介面,有兩個捷徑。一個是使用Django Suit,另外一個是配置Bootstrap.

配置Django Suit後的截圖如下,可以看到介面好像有些一些特色,色調和佈局有了較大的調整,左側有了真正以上的選單,而之前的過濾器則放在了紅色框裡面。

使用Django suit或Bootstrap美化admin模板

要實現這個功能,操作快一些,10分鐘輕輕鬆鬆搞定。連結可以參考:

http://django-suit.readthedocs.io/en/develop/getting_started.html#installation

1)安裝django-suit庫

pipinstalldjango-suit==0.2.25

2)配置settings.py檔案,把suit放到應用列表的前面,要優先於admin的部分,大體內容如下:

INSTALLED_APPS=('suit','django.contrib.admin',)

3)如果Django的版本較低,需要調整settings.py的TEMPLATE_CONTEXT_PROCESSORS設定

TEMPLATE_CONTEXT_PROCESSORS=TCP+('django.core.context_processors.request',)

如果版本較新,可以重點檢查下紅色的部分。

TEMPLATES = [

{

。。。。

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

],

},

},

]

然後就是啟動服務,檢視效果了。非常簡單的步驟。效果還不錯。

而如果啟動Bootstrap,則效果會更炫。我非常看好這個方向,因為現在的大前端優勢已經很明顯了。昨天在ACOUG的分享中我簡單提了一個概念,那就是把現在的技術方向分為上中下三層,最下層是資料庫,系統,網路等基礎設施部分,類似saas層,中間的層面是一些業務系統的邏輯實現,算是程式中的後端,伺服器端。而上層則是前端部分,有多中表現形式,比如視覺化技術方向。我的理解,以前的技術方向,更重視後端,更關注底層和應用的架構扥伺服器端技術。就好比下面的鼓一樣,對於前端來說是不夠重視的,或者關注度還是有限,因為很多的人印象中,美化的部分都是美工做的事情。

而現在發生了大的變化。可以叫做大前端技術,因為現在的前端技術已經發展很成熟,前端希望能夠做一些服務端的事情,所以現在的JS非常火。而底層技術,目前大家還是有危機意識的,都會學習一些開發技能,這就無形中會對已有的伺服器端角色有一定的衝擊,就有點類似下面的鼓。

使用Django suit或Bootstrap美化admin模板

觀點就是這個,我們來看看bootstrap的一個基本的改進,如果要細化的改進,那應該會有很多的工作需要確認或者細化。我們可以簡單體驗一下,在settings.py檔案裡新增bootstrap的庫進去,就可以分分鐘看到一個好一些的介面,當然這是我挑出來能看過眼的截圖。

在settings.py檔案裡修改應用列表,新增bootstrap的介面即可,比如這個配置。

INSTALLED_APPS = (

'bootstrap_admin',

。。。

得到的介面如下,如果要做細化和定製,需要做進一步的分析。

使用Django suit或Bootstrap美化admin模板

最近也調研了不少的前端實現,爭取在本週能給大家分享出一篇結果出來。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/23718752/viewspace-2149265/,如需轉載,請註明出處,否則將追究法律責任。

相關文章