我们通常看到的 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文件。
在你的 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/