django admin自定义HTML模板界面替换logo和header

来源:互联网 发布:上海发型设计 知乎 编辑:程序博客网 时间:2024/05/21 05:01

原文地址: http://blog.csdn.net/yangbingbinga/article/details/77742815

前端时间使用 django做了一套后台管理系统, 主要使用 django的 MTV模式,日志,认证权限, 自定义登录,  admin,等功能; 

但是作为一个小前端, 实在是不能忍受django自带的模板样式,于是想法自定义了一套模板

由于django的模板是通用的,所以我们只需要自定义少量的HTML模板就可了, 自定义模板之后的样式是这样的,颜色系采用了django默认的header颜色




如何自定义django模板呢?

1. 找到django框架自带的模板的位置

mac路径: /Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/django/contrib/admin/templates/admin/base_site.html  

如果你的不是这个路径可以 通过    find / -name django 命令 查找django所在的位置...windows用户请采用其他办法...

你看到路径的可能是这样的


从 html文件的名字很容易看出他的作用是什么,是在哪里使用

其中 index.html  ,base.html , base_site.html 是比较重要的


2. 在 urls.py中修改 admin的 模板, header,和网页title


admin.site.site_header = ' "我的" 管理平台'admin.site.site_title = ' "我的"管理平台'admin.site.index_title = '模型管理'admin.site.index_template = 'admin/index.html'

修改之后 header上的文字就不再是  django默认的文字了


3. 拷贝django自带的这三个模板到 项目目录下的 templates目录的admin目录下

根据 网页上的内容来, 修改 这三个模板即可实现

你可以用优先级别更高的css覆盖默认的丑样子,也可以使用 django的collectstatic 命令,产生django admin的css到 static目录中,去修改 css文件;

你可以用HTML代码添加新的元素,你也可以使用js动态注入元素, 这一切只源于你的需求


ps: footer, header 等内容都是通用的,django通过include/extend引入的,所以你修改  base.html 是最省事的做法

ps: 阿里云logo是网上找的图片, 只是为了演示效果,无其他任何用途

ps: 其他的admin的样式也可以自定义的,参考官方文档

每个应用或模型中可以被重写的模板¶不是contrib/admin/templates/admin 中的每个模板都可以在每个应用或每个模型中覆盖。以下可以 ︰app_index.htmlchange_form.htmlchange_list.htmldelete_confirmation.htmlobject_history.html对于那些不能以这种方式重写的模板,你可能仍然为您的整个项目重写它们。只需要将新版本放在你的templates/admin 目录下。这对于要创建自定义的404 和500 页面特别有用。注意一些Admin的模板,例如change_list_results.html 用于呈现自定义包含标签。这些可能会被覆盖,但在这种情况下你可能最好是创建您自己的版本Tag,并给它一个不同的名称。这样你可以有选择地使用它。Root and login 模板¶如果你想要更改主页、 登录或登出页面的模板,你最后创建你自己的AdminSite 实例(见下文),并更改AdminSite.index_template、AdminSite.login_template 和AdminSite.logout_template 属性。

人生苦短,我用python    ^ _ ^ !!! django有多强大,python有多强大, 请自己亲身去体会一把大笑


原创粉丝点击