Django自带的Admin界面提供了非常方便的后台管理功能,然而,为了更好地满足业务需求,我们往往需要对Admin界面进行一些自定义的修改,例如修改表单样式、增加自定义页面等。本文将介绍Django中自定义Admin样式与功能的实现方法,包括两个实例,分别是修改Admin界面的样式、增加自定义页面。
修改Admin界面的样式
方案
Django中自定义Admin界面的样式主要通过重写Admin的template来实现。在Django的template文件中,Admin的template一般都会使用一种名为“blocks”的结构,其中定义了一系列的块,分别对应不同的页面元素。例如,对于表单页面来说,通常会包含三个块:header、content和sidebar。
重写Admin的template的具体步骤如下:
- 在自己的应用中,创建名为“admin”的文件夹,然后在该文件夹中创建一个名为“base_site.html”的文件。注: 执行命令,即可将默认的Django Admin的模板复制到自己的项目中:
python
python manage.py createadminsitexml
-
在“base_site.html”中,可以看到诸如“{% block header %}”之类的代码。这就是“blocks”的结构。通过重写这些块,就可以实现对Admin界面样式的自定义了。
-
例如,如果我们想要修改表单页面的颜色,可以在“admin/base_site.html”中重写content块的样式。具体的代码如下:
```html
{% block content %}
{{ block.super }}
{% endblock %}
```
在上面的代码中,我们定义了当页面类型为“content”时应该如何展示样式。
示例
以修改Admin页面的主题颜色为示例。在Django 3.2及以上版本中,可以使用“createadminsitexml”命令,将默认的Django Admin模板复制到自己的项目中:
python manage.py createadminsitexml
执行完上面的命令后,可以在我的应用程序的根目录中找到“admin”文件夹。这个文件夹中包含了所有的Admin模板,我们可以进行自定义。
为了修改主题颜色,我们需要修改“admin/base_site.html”文件。在该文件中,找到类似于“{% block extrahead %}”的代码段,并在其中加入以下代码:
<style>
body, .group .tabular.inline-related {
background-color: #dcdcdc;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
</style>
在上面的代码中,我们定义了当页面格式为“extrahead”时应如何展示样式。
增加自定义页面
方案
Django中增加自定义页面的实现方式有很多,但最简单的方式是通过自定义Admin界面的url来实现。下面是具体的步骤:
-
在自己的应用中,创建一个名为“views.py”的文件,并定义一个视图函数。这个视图函数可以用来输出我们自己的HTML代码,也可以用来处理前端用户的请求。
-
修改应用的urls.py文件,在urlpatterns的列表中增加一条URLpattern,对应自己的视图函数。例如:
python
urlpatterns = [
path('', admin.site.urls),
path('my_view/', views.my_view),
]
这样,当用户访问“/my_view/”时,就会调用到我们定义的“my_view”视图函数。
- 在Admin界面中增加一个链接,使得用户可以通过单击这个链接访问我们自己的页面。为了增加这个链接,我们需要修改“admin/base_site.html”文件。具体的代码如下:
```html
{% block extrahead %}
{{ block.super }}
{% endblock %}
{% block nav-global %}
{{ block.super }}
{% url 'my_view' as my_view_url %}
My Custom Page
{% endblock %}
```
在上面的代码中,“{% url 'my_view' as my_view_url %}”这行代码会根据我们在urls.py文件中定义的URLpattern生成url。在代码“My Custom Page”中,我们定义了链接的文字(My Custom Page)以及链接的id(custom_link)。通过CSS样式来对链接进行修饰。
示例
以增加一个名为“my_view”的自定义页面为例。在我的应用程序中,创建一个名为“views.py”的文件。该文件中包含以下代码:
from django.shortcuts import render
def my_view(request):
return render(request, 'my_template.html')
在上面的代码中,我们定义了名为“my_view”的视图函数。该函数会返回一个网页。为了生成网页,我们需要在/templates文件夹下创建一个名为“my_template.html”的文件。该文件中包含以下代码:
<h1>My Custom Page</h1>
<p>Welcome to my custom page!</p>
这个HTML文件中定义了一个标题和一段段落。接下来,我们需要在“urls.py”文件中定义一个URLpattern,使得用户可以访问名为“my_view”的自定义页面。在该文件中加入以下代码:
from . import views
urlpatterns = [
path('', admin.site.urls),
path('my_view/', views.my_view),
]
最后,我们需要在“admin/base_site.html”文件中增加一个链接,使得用户可以通过单击这个链接访问我们自己的页面。具体的代码如下:
{% block extrahead %}
{{ block.super }}
<style type="text/css">
#custom_link {
background-color: #008800;
color: #ffffff;
display: block;
padding: 5px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
{% endblock %}
{% block nav-global %}
{{ block.super }}
{% url 'my_view' as my_view_url %}
<a href="{{ my_view_url }}" id="custom_link">My Custom Page</a>
{% endblock %}
在上面的代码中,“{% url 'my_view' as my_view_url %}”这行代码会根据我们在urls.py文件中定义的URLpattern生成url。在代码“My Custom Page”中,我们定义了链接的文字(My Custom Page)以及链接的id(custom_link)。通过CSS样式来对链接进行修饰。
本文链接:https://my.lmcjl.com/post/19218.html
4 评论