介绍
adminlte是一个成熟的基于bootstrap的后台模板:网址
django是python的web框架,其帮助文档:django-docs,当前2.X版本,给的就是这个网址了。
admin:django自带一套admin后台模板,反正我感觉界面很不好看,帮助文档:admin帮助文档,当然这是以app方式存在的,这也是一个app。
django-adminlte2:这也是一个app,是将adminlte的显示风格替换掉admin默认的风格。django-adminlte2帮助文档
下面说一下django-adminlte2的具体使用方式。
django-adminlte2使用方法
安装
pip install django-adminlte2,只需一行搞定安装,安装完成后实际上是安装了两个python包,这两个包分别是两个django的app:django-adminlte2、django-adminlte-theme(详细说明请见最后)
然后再settings.py中设置
INSTALLED_APPS = [ # #####################自定义内容 # 自定义 adminlte 的 app 用于重写adminlte 第三方库 'zadminlte', # #####################第三方插件/库 # adminlte 第三方库 需要pip install django-adminlte 'django_adminlte', # adminlte-theme 第三方风格库 pip install django-adminlte 时自动安装 'django_adminlte_theme', # #####################django内容 …… ]
新加的内容后面别忘了“,”
只需要输入名字即可,前面不用include
django_adminlte,而不是django-adminlte
最前面的是一个针对django-adminlte二次开发app,这个就是自己建立的app了,可以python manage.py startapp zadminlte建立
通过输入“python manage.py”可以查看到 django-admin的所有指令
然后python manage.py runserver就可以看到改变后的界面效果了,一定要注意 app中第三方app如果要覆盖django的内容一定要在django的前面,也就是谁是最终的效果就在最前面
进阶
通过模板代码块自定义页面
部分人只想实现效果,所以这里只给出具体例子,而原因请见下面的“其他”
上面已经建立了zadminlte app了,在这个app里面建立templates模板目录,在目录下建立adminlte目录,让这个目录与adminlte2 app一致,如果想要自定义那个页面内容,就在下面建立对应的文件即可。要保证目录和文件名完全一致。下面是一个例子的目录结构和文件内容:
--zadminlte ----templates ------adminlte --------lib ----------_main_header.html --------components --------pages --------base.html --------index.html --------login.html
只是app名字不一样,下面的目录结构应该完全一样,我对_main_header.html进行自定义,这个文件是头部内容,自定义内容如下:
{% extends 'adminlte/lib/_main_header.html' %} {% block logo_text_small %} <b>Tlcms</b> {% endblock logo_text_small %} {% block logo_text %} <b>Techie亮CMS</b> {% endblock logo_text %}
这样实现了头部显示内容从原始文件Adminlte变为了Techie亮CMS,而缩小后原始显示的是Alte改为了Tlcms
利用sites框架自动填充site类型变量
adminlte2 app中有一些{{site.name}}一类的变量名,这些是直接调用的的django sites站点框架,文档。可以通过设置sites,实现这些变量内容对站点的自适应。如copyright等。
- settings.py的app中添加’django.contrib.sites’
- python manage.py migrate执行以后数据库中会新增一个django_site表,只有三个字段id、domain、name
- settings.py添加SITE_ID = 1 这个id填写具体的id,在最外层添加
- 后面就可以在四处使用了,上面文档给了各种地方使用的方法
问题-使用sites框架后adminlte框架仍为完全引用
这样配置完成以后,自己写的代码调用的sites框架都没有问题,adminlte2 2.0.4版本中,登陆进去以后首页下面的一直显示“Copyright ? 2018. All rights reserved. ”而按照adminlte的代码(_main_footer.html):
<footer class="main-footer"> <div class="pull-right hidden-xs"> {% block footer_right %} <b>Version</b> {% block version %}0.1{% endblock %} {% endblock %} </div> {% block footer_left %} {% block legal %} <strong>Copyright © {% now "Y" %}{% if not site %}.{% endif %} {% if site %} <a href="http://{{ site.domain }}">{{ site.name }}</a> {% endif %} </strong> All rights reserved. {% endblock %} {% endblock %} </footer>
按照正常来说,应该是会自动变的。而后来发现在注销后(注销后还在adminlte主页面,只不过提示重新登录,点击以后才会到登录页面)底部就显示出了正确的内容。
此问题未解决,直接重写了legal块
sites框架其他应用
可以做为一个django多个站点的搭建,实现多站点共用一个数据库,部分数据共用且各个站点也有自己独有的数据。
登陆界面修改
登录界面显示的是“django管理”,想要修改成自己的内容,这时候在adminlte2中就找不到对应的代码块了。实际上这个在theme应用中。在theme/templates/admin/lib/login.html和base_login.html
实际上是在base_login.html
相应代码:
<div class="login-logo"> <a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a> </div>
这里使用了一个变量:site_header,而这个变量实际上是由admin应用传入的(后面描述了原因),所以只需要修改admin即可,肯定不能改官方的模块,应该改自建的zadminlte应用的admin.py这个文件,只需要在这里增加上一行admin.site.site_header = “XXXX”就完成了更改。
其他
下面的内容是我个人的理解,可能不正确
关于adminlte2和adminlte-theme两个app
其中django-adminlte2是通过django模板将adminlte封装了,也就是html随处可见的{{}}、{%%}这样的标记符,这就是模板的直观体现吧,反正我是这么认为的。
而theme是利用django模板的继承特性将admin这个app模板中的各种代码块继承以后重写了,而重写的代码引用的就是django-adminlte2的了。
首先adminlte2这个app的目录结构:
--django_adminlte ----templates ------adminlte --------lib --------components --------pages --------base.html --------index.html --------login.html
而admin这个官方app的目录结构
--admin ----templates ------admin --------base.html --------index.html --------login.html
再看theme这个app的目录
--django-adminlte-theme ----templates ------admin --------base.html --------index.html --------login.html
通过上面可以发现,theme与admin具有相同的目录结构,这样在文件上是重复的,而根据django模板文件加载的顺序(见后面一节),因为在app设置中把theme放在了admin前面,所以theme的模板文件优先被找到,进而实现了对原有admin文件的替换
而theme中文件是这么写的,比如base.html
{% extends 'adminlte/base.html' %} {% load static i18n %} {% block extra_head %} {{ block.super }} {% if LANGUAGE_BIDI %} <link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}"/> {% endif %} <link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}"/> {% block extrastyle %}{% endblock %} {% block extrahead %}{% endblock %} {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %} {% endblock %} {% block nav_header %} {% include 'admin/lib/_main_header.html' %} {% endblock %} {% block nav_sidebar %} {% include 'admin/lib/_main_sidebar.html' %} {% endblock %} {% block content_header %} {% block breadcrumbs %} <ol class="breadcrumb"> <li><a href="{% url 'admin:index' %}"><i class="fa fa-dashboard"></i> {% trans 'Home' %}</a></li> {% if title %} › {{ title }}{% endif %} </ol> {% endblock %} <!-- Content Header (Page header) --> <section class="content-header"> <h1> {% block pretitle %}{% endblock %} {% block content_title %}{% if title %}{{ title }}{% endif %}{% endblock %} <small>Control panel</small> </h1> </section> {% endblock %} {% block content_block_wrap %} {% block content %} {% block object-tools %}{% endblock %} {{ content }} {% endblock %} {% block sidebar %}{% endblock %} {% endblock %}
最开头就是extends ,这样默认会用后面指定的文件,而后面指定的文件的代码块的内容会在这里做一些修改,指定的问件是adminlte/base.html。
上面提到了adminlte2这个app只是把adminlte这个框架通过django的模板进行了修改,让adminlte支持了django的模板,但并没有和admin做链接。
而这个theme使用了adminlte/base.html,并把adminlte2的模板中的一些代码块做了替换,而替换的内容中有引用{% include ‘admin/lib/_main_sidebar.html’ %},进而实现了下面的访问过程:
访问admin→实际调用theme/XXX.html→显示内容继承自adminlte/AAA.html→修改AAA的代码块调用admin/BBB.html
django中模板文件的加载
django模板文件加载是有顺序的,模板的官方文档:templates loader
按照默认顺序是:全局templates、在settings中app的填写顺序,django会按照上面的顺序对应的目录去查找模板文件,若找到了则停止查找。所以app中考前的同路径同文件名的模板文件会优先找到并起效,实现对下面的模板文件的替换。
不要在每个app下面的templates目录下直接建立自己需要的模板文件,最好再建立一个以app为命名的文件夹里面建立html,上面的目录例子也都是这样写的
关于模板文件{% trans %}的使用
模板文件开头包含{% load static i18n %}
后面使用{% trans ‘word’%}就可以实现多语言模式,word会在不同语言设置下被翻译成不同的语言
而语言设置在settings.py中,可以设置成LANGUAGE_CODE = ‘zh-hans’实现汉语显示,1.9版本以前输入’zh-cn’
相关介绍请见:language_code、国际化与本土化
最新评论