七.將bootstrap模板ACE引入django

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的模板被載入。



由於ACE模板需要付費,因此作爲商業用途請通過正規渠道購買,若僅作爲學習之用而需要,請在評論處留下您的郵箱


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章