Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。我們可以通過bootstrap來快速開發前端頁面。當然,如果通過bootstrap來構建後臺管理界面仍舊需要許多精力,特別對於不精於前端技術的技術人員而言。因此,我們再DRY一下,在網上可以找到許多基於bootstrap的模板,直接將模板運用在前端。
我們可以訪問https://wrapbootstrap.com/,在這個網站上有許多現成的模板和主題,當然都需要付費,因此如果你需要使用ACE模板,也需要付費。
ACE的網址爲http://wrapbootstrap.com/preview/WB0B30DGR,你會發現ACE的模板除了有自己的CSS外,最重要的是網羅了許多開源項目,把他們集中在了一起。我們後期只需要在這個基礎上取捨,把自己需要用的留下,不需要的刪除就可以了。使用的ACE版本爲1.3.3.
將ACE模板中的數據導入Django項目
1) 在echo_site文件夾下建立static目錄,用來存放一些靜態文件,比如網站的css js images等等。
2) 將下載後的ACE文檔解壓,並將ACE模板中的assets目錄放於static目錄下。同時將html文件夾下的blank.html更名爲index.html放於template中
3) 配置settings.py,指定staticfile的目錄:
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
4) 設定url路徑:
urls.py:
url(r'^index/', echo.views.index,name= 'index'),
5) 建立VIEW視圖:
views.py:
#顯示首頁
def index(request):
context = {}
return render(request,'index.html',context)
6)在index.html頁面打上staticfiles標籤,並將所有的css,js的路徑進行相應修改,例如,
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="{%static 'assets/css/bootstrap.min.css'%}"/>
<link rel="stylesheet" href="{%static 'assets/css/font-awesome.min.css'%}" />
在settings.py中,我們定義static標籤的路徑是/static/, 因此,href="{%static'assets/css/bootstrap.min.css'%}",將會被解析爲href="/static/assets/css/bootstrap.min.css'%}"。這樣即使今後靜態文件所在位置發生變動,我們只需要調整settings.py的配置即可,不需要更改原來的頁面。
7)此時,啓動服務,訪問127.0.0.1/index,則可以看到ACE的模板被載入。