社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Django

修改 Django Admin 的颜色

Python程序员 • 6 年前 • 1209 次点击  

我们通常看到的 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