进步始于交流
收获源于分享

django笔记(5)整合adminlte作后台

介绍

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 &copy; {% 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 %} &rsaquo; {{ 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国际化与本土化

 

赞(0) 打赏
未经允许不得转载:Coologic » django笔记(5)整合adminlte作后台

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏