使用suit-v2美化Django Admin(兼容Django新版本!)

使用suit-v2美化Django Admin(兼容Django新版本!)

Django Suit是一款非常漂亮的Django Admin美化插件(github官网

可能很多人已经使用过Suit-v1(demo)、Xadmin(浏览网站可能需要FQ)、grappellidjango-admin-bootstrapped等美化插件,但是由于Django版本更新较快,文章写的时候Django已经是1.11版(以下是Django版本迭代图)

这些美化插件有些跟不上Django版本更新的速度,并且不能兼容Django的新版本,使用新版Django的朋友就很难找到合适的美化插件了。

即使新版的Django Admin的界面已经比以前的版本好看多了,但是还是满足不了一些审美达人的要求,如果你也觉得Django Admin需要变得更美,不妨试试suit-v2demo

重要的是:suit-v2漂亮的同时还支持新的Django版本哦!!!

如何安装suit-v2美化Django可以查看文档github地址


以下是我使用的安装过程,可以参考一下

Demo使用的环境是Django Suit==2.0a1、Django==1.10.5、Django-Select2==5.8.10)

我使用的环境是:Django Suit==2.0a1、Django==1.11.1、Django-Select2==5.8.10

温馨提示:测试时记得备份自己的环境和项目哦,可能不成功的,请备份好,方便回退,项目中Django原生的Admin是需要开启的,再进行下面的操作


1、在你的环境中通过pip安装(注意要安装到项目的环境中)

pip install https://github.com/darklow/django-suit/tarball/v2

可以通过pip freeze或者pip list查看结果

2、在apps.py文件中添加:(my_project_app是指你的项目名称,注意更改)

# my_project_app/apps.py
from suit.apps import DjangoSuitConfig

class SuitConfig(DjangoSuitConfig):
    layout = 'horizontal'

layout这个参数决定你的网页是初始样式是垂直样式还是水平样式,可选参数为‘horizontal’或‘vertical’

3、在settings文件里面,在INSTALLED_APPS中添加以下内容:(my_project_app是指你的项目名称,注意更改)

INSTALLED_APPS = (
    ...
    'my_project_app.apps.SuitConfig',  # 需要添加的内容,要放在'django.contrib.admin'之前
    'django.contrib.admin',
)

保存以上修改,开启项目,按照url进入admin后台,就可以看到后台已经美化了。

补充:

使用suit默认的admin模版文件,footer的效果:

使用base_site.html覆盖{% block footer %}后的效果:


如果你想覆盖页面中的信息,比如页脚、标题信息等等,你可以在项目templates文件夹中创建admin文件夹,然后添加一个base_site.html,编辑base_site.html(第一行是继承suit的模版文件{% extends 'admin/base_site.html' %})

{% extends 'admin/base_site.html' %}
{% load suit_tags admin_static %}

{% block footer %}
    {% if not is_popup %}
        <div id="footer">
        <footer class="footer">
            <div class="container-fluid">
                {% block footer_content %}
                    <div class="row">

                        <div class="col-xs-12 col-sm-6 text-sm-center footer-copyright">
                            {% block copyright %}
                                Copyright &copy;
                                <span class="hidden-md-down">2013-</span>{% now "Y" %}
                                <br>个人博客后台 by FreezeJ
                            {% endblock %}
                        </div>

                    </div>
                {% endblock %}
            </div>
        </footer>
    {% endif %}

    <script src="{% static "suit/js/suit.js" %}"></script>
    {% if cl.formset or action_form and 'toggle_changelist_top_actions'|suit_conf:request %}
        <script type="text/javascript">
            Suit.ListActionsToggle.init();
        </script>
    {% elif adminform %}
        <script type="text/javascript">

            Suit.$("#{{ opts.model_name }}_form").suitFormDebounce();

            {% if 'form_submit_on_right'|suit_conf:request %}
                Suit.FixedBar.init();
            {% endif %}

            {% if adminform.model_admin.suit_form_tabs %}
                Suit.$(function () {
                    Suit.$('#suit_form_tabs').suitFormTabs();
                });
            {% endif %}
        </script>
    {% endif %}
{% endblock %}


在base_site.html中继承或者是重写suit对应的template文件中的block

suit对应的admin template base文件路径:(Python_Env是我的Python环境目录)

我的做法是把这个base.html中的

{% block footer %}
·······
{% endblock %}

这段代码直接拷贝到前面创建的base_site.html,然后直接修改那个块中的信息



文件结构:

ps:如有侵权行为,请私信联系我,使用以上插件时,请务必阅读对应的授权信息,切勿随意用于商业用途,谢谢!

编辑于 2017-05-12 23:57