美化 django admin 后台

Twitter Bootstrap 实在是太方便太齐全了,如果想美化一个么有任何样式的系统,真的只需要引入一个 bootstrap.css ,你的页面看起来都会不一样,当然在 ie6 下效果会比较差,所以看到 django 的后台功能这么强大,但是界面却如此朴素就有点看不下去了,然后就有了这个改造 django admin 后台的想法,直接拿 bootstrap 的样式来做,覆盖了 django 后台所需的全部样式,改造过程还是挺纠结的,因为 django admin 的模板代码还是有点让人头疼,只能说冗余太多,风格也比较凌乱,所以在美化样式的同时也修改了一下 html 结构,不过也再次感受到 django 写模板的逻辑是如此优雅。

先来个登录界面截图:

具体做的过程比较简单,参考了别人写的教程,比较不同的是我把 django 后台用到的静态资源(主要是图片和 css)直接放到 template 目录下了,所以需要多做点配置:


(r'^admins/(?P.*)$', 'django.views.static.serve', {'document_root': '/your_project_directory/project_name/project_folder/templates/admin/static', 'show_indexes': True}),

这样让后台页面能够直接访问 static 目录下的文件。

这是修改后的修改密码页面截图:

这个改版操作起来还是挺简单的,我整理了代码放在 https://github.com/aobo711/bootstrap-django-admin 上,感兴趣的可以去看看,详细的使用也在那上面。

Published by

Z.J.T

Product Designer from Wandou Labs

  • lemon chen

    博主,你的是哪个版本的django,我在1.4上按你的使用方法是不行的。不知能否提供帮助?

  • lemon chen

    解决了楼主,原来是url 里的被markdown 给解释掉了。看了README.md 才明白是怎么回事。

  • lemon chen

    还是有个问题 缺图片

  • lemon chen

    不是缺图片。。。而是默认的日期控件的问题。

  • http://www.heyphp.com heyphp

    感觉很好,简洁,第一次用django 从0 开始配置django 只为了体验一下博主的后台,呵呵

    • http://orzpoint.com Z.J.T

      从 0 开始还真不容易,恭喜

  • http://www.everpcpc.com everpcpc

    这个真心不错……
    比django自带的那个grappelli好多了……
    前台就是用bootstrap做的,这样子前台后台就统一了~~~

    • http://orzpoint.com Z.J.T

      看到你提的代码了,其实之前的代码是比较粗的,多谢