Py学习  »  Django

修改 Django Admin 的颜色

Python程序员 • 3 年前 • 802 次点击  

我们通常看到的 Django Admin 都是蓝色的(也许掺了一点点绿),但是这个颜色是可以定制的。任何部分都可以定制,这也是为什么 Django 这么酷的原因。


这里有一个问题,为什么我们要定制颜色呢?除了有些人特别喜欢某种颜色外,还有其他的理由吗?


场景


假设你的项目对应了不同的几种环境:

  • 开发环境

  • 灰度环境

  • 生产环境


对于在各个环境下都有权限的人,他其实很难从浏览器标签中区分出不同的环境。为了开发测试,需要同时在不同环境中操作 Admin,这种情况实际上非常常见。


在这种情况下,不同环境的 Admin 拥有不同的颜色,会更加容易辨认,也就提高了操作的安全性,减少了误操作。

接下来让我们演示一下如何定制颜色:实际上有多种方法可以实现颜色的定制。


使用第三方软件包


有一个第三方软件包可以定制 Admin 的颜色,它叫 django-admin-interface:


对于普通用户来说,这些选项就足够了。


这种方法的优缺点


1、这种方法让我们很轻松地就能够动态调整颜色,而且不用修改代码。

2、这种方法可以使用固定的颜色,渐变色或者更灵活的定制是做不到的。

3、颜色配置是保存到数据库的,所以对于一个新的数据库,这些颜色就会重置为默认色。


实际使用步骤


运行


在 settings.INSTALLED_APPS 中添加 admin_interface, flat_responsive, flat 和 colorfield,它们需要写在 django.contrib.admin 之前。

然后重启你的应用服务器。


手动定制


另一种方法是在 admin 中添加我们手动定制的 css 代码,我们可以自由决定定制 admin 的哪些部分。


这种方法的优缺点


1、虽然代码并不难,但是需要修改代码就意味着会涉及到部署上的一些麻烦。比如如果前端有缓存,代码修改后可能需要一段时间后才能看到修改的效果。

2、对于展示效果,想怎么改都是可以的,渐变色也可以使用。

3、一旦修改进入代码,这个效果就是永久的。就算你换了一个新的数据库,效果依然有效。


接下来我们看看具体如何操作。


修改 Admin 颜色主题


在你的根 templates 文件夹中创建一个名为 admin 的文件夹,在这个文件夹中再添加一个名为 base_site.html 的文件。


使用这个工具生成一个定制颜色的css文件。

https://dothedev.com/django-admin-custom-color

  • 选择你需要的颜色

  • 生成css文件“django_color.css”

  • 把文件放在你的static文件夹中


在你的 base_site.html 中添加下面代码

{% extends "admin/base.html" %}

{% load i18n static %}


{% block title %}{{ title }} | {% trans "Custom Admin Title" %}{% endblock %}
{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static "path/to/generated/django_color.css" %}"/>
{% endblock %}

{% block nav-global %}{% endblock %}


现在刷新 admin 页面,你就可以看到新的颜色主题了。


替换 Admin 顶部的 “Django Administration” 字样


更新上面 base_site.html 的代码,像下面这样:

{% extends "admin/base.html" %}
{% load i18n eatn_tags static %}

{% block title %}{{ title }} | {% trans "Custom Admin Title" %}{% endblock %}
{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static "assets/css/admin-prod.css" %}"/>
{% endblock %}

{% block branding %}
<h1 id="site-name">{% trans "Custom Admin Title" %}</h1>
{% endblock %}

{% block nav-global %}{% endblock %}


这时 Admin 顶部的标题应该变成了“Custom Admin Title”。


译者:诗书塞外

原文地址:https://www.dothedev.com/blog/django-admin-change-color/


Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/57207
 
802 次点击