css文件修改后没变化 static_修改 Django Admin 的颜色

最新推荐文章于 2024-08-13 08:22:21 发布

赵三野

最新推荐文章于 2024-08-13 08:22:21 发布

阅读量767

点赞数

CC 4.0 BY-SA版权

文章标签： css文件修改后没变化 static

本文链接：https://blog.csdn.net/weixin_33465310/article/details/112437219

本文介绍了如何通过定制Django Admin的颜色来区分不同开发环境，以增强操作安全性。方法包括使用第三方包django-admin-interface和直接修改CSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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