七.将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模板需要付费,因此作为商业用途请通过正规渠道购买,若仅作为学习之用而需要,请在评论处留下您的邮箱


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