七.将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 %}


   
      
      
      

      
      
      
      
      

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