Django+boostrap 美化admin后台的操作

yizhihongxing

针对这个主题,我可以提供以下的完整攻略。

步骤一:安装和配置Django

首先,你需要安装 Django 并配置基本设置,这里提供一个示例:

  1. 在终端中通过 pip 安装 Django:pip install django
  2. 创建一个新的 Django 项目:django-admin startproject myproject,其中 myproject 是你的项目名称,可以替换为任何你想要的名称。
  3. 配置 myproject 项目文件夹下的 settings.py 文件:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

步骤二:创建一个超级用户

创建一个超级用户,以便你可以登录到后台管理系统。使用以下命令在终端中创建:

python manage.py createsuperuser

按提示输入你的用户名、电子邮件地址和密码。

步骤三:启动后台管理系统

现在你可以启动 Django 后台管理系统,使用以下命令在终端中启动:

python manage.py runserver

然后打开浏览器,在地址栏中输入 http://127.0.0.1:8000/admin/,你就可以看到 Django 后台管理系统登录界面了。使用刚才创建的超级用户登录。

步骤四:安装 Bootstrap

以下是安装 Bootstrap 的步骤:

  1. 在终端中将 cd 到你的项目目录下,然后创建一个名为 static 的新文件夹:mkdir static
  2. 进入到 static 文件夹,并使用以下命令安装 Bootstrap:npm install bootstrap
  3. myproject 项目文件夹下的 settings.py 文件中添加以下行:
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
  1. 在你的 Django 项目文件夹下创建一个名为 staticfiles 的新文件夹,使用以下命令:
mkdir staticfiles
  1. 在终端中使用以下命令收集所有的静态文件到 staticfiles 文件夹下:
python manage.py collectstatic

步骤五:美化 Django 后台管理系统

接下来,我们将使用 Bootstrap 来美化 Django 后台管理系统。以下是两个示例说明。

示例一:美化登录页面

  1. 创建一个新文件夹,例如 templates,在 myproject 目录下。
  2. templates 文件夹中创建一个名为 admin 的新文件夹。
  3. admin 文件夹中创建一个名为 login.html 的新文件,用来替换 Django 后台管理系统的默认登录页面。
  4. 安装 django-widget-tweaks,该软件包允许你对 Django 表单进行优化。
pip install django-widget-tweaks
  1. myproject 项目文件夹下的 settings.py 文件中添加以下行:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widget_tweaks',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
  1. login.html 文件中使用以下代码来美化登录页面:
{% extends "admin/login.html" %}

{% load widget_tweaks %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
{% endblock %}

{% block form_top %}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">

{% endblock form_top %}

{% block form_bottom %}
        </div>
    </div>
</div>
{% endblock form_bottom %}

示例二:美化后台管理页面

使用以下步骤来美化后台管理页面:

  1. 创建一个新文件夹,例如 static,在 myproject 目录下。在 static 文件夹中创建以下文件夹结构:
.
|__ css/
|   |__ custom-admin.css
|   |__ bootstrap.min.css
|
|__ js/
|   |__ bootstrap.js
|   |__ jquery.min.js
  1. bootstrap.min.cssjquery.min.js 复制到 static/css/static/js/ 文件夹中。
  2. custom-admin.css 中添加你自己的样式。
  3. myproject 项目文件夹下的 settings.py 文件中添加以下行:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  1. myproject 项目文件夹下的 urls.py 文件中添加以下行:
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    # ... your existing URLs ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  1. myproject 项目文件夹下的 admin.py 文件中使用以下代码导入你的自定义样式和 JavaScript 文件:
from django.contrib import admin
from django.urls import reverse
from django.utils.html import format_html
from django.conf import settings
from django.templatetags.static import static

class MyAdminSite(admin.site.AdminSite):

    def each_context(self, request):
        context = super().each_context(request)
        context['bootstrap_css_url'] = static('css/bootstrap.min.css')
        context['my_styles_url'] = static('css/custom-admin.css')
        context['jquery_url'] = static('js/jquery.min.js')
        context['bootstrap_js_url'] = static('js/bootstrap.js')
        return context

admin_site = MyAdminSite()
  1. 在你的每一个 Django App 的 admin.py 文件中使用 MyAdminSite,而不是 admin.site

结束语

这就是对如何使用 Django 和 Bootstrap 来美化 Django 后台管理系统的完整攻略。希望这些步骤和示例可以对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Django+boostrap 美化admin后台的操作 - Python技术站

(0)
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • 第四篇Django之模板语言

    一 模板的执行 模板的创建过程,对于模板,其实就是读取模板(其中嵌套着模板的标签),然后将Model中获取的数据插入到模板中,最后将信息返回给用户 def current_datetime(request): now = datetime.datetime.now() html = “<html><body>It is now %s.…

    Django 2023年4月16日
    00
  • django高级应用(分页功能)

    django高级应用(分页功能) 1、原生分页应用 前端html代码 1 <!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta charset=”UTF-8″> 5 <title>Title</title> 6 </head>…

    Django 2023年4月13日
    00
  • Django模板标签完整攻略(详解版)

    Django模板标签是用于在模板中动态地展示或操作数据的一种方式。Django自带了许多标签,如 {% if %}、{% for %}、{% url %}等,同时也支持自定义标签。下面详细介绍Django模板标签的语法和用法。 模板标签语法 Django模板标签以“{%”开头,“%}”结尾,如下所示: {% tag %} 其中,tag是标签的名称,具体使用方…

    Django 2023年3月13日
    00
  • 搭建python django虚拟环境完整步骤详解

    下面我将详细讲解“搭建python django虚拟环境完整步骤详解”的完整攻略,包含两条示例说明。 搭建Python Django虚拟环境完整步骤详解 什么是Python Django虚拟环境 Python是一门非常流行的编程语言,而Django则是Python下的一种Web开发框架。在开发Django项目时,我们需要保证环境的稳定性,避免不同项目之间互相…

    Django 2023年5月16日
    00
  • Django组件总结

    分页器的使用 分页器在页面中非常常见,当数据库条数数据过多时,页面一次性显示不好看时,我们可以使用分页器,将数据分几次显示。 1.1 数据库内插入大量数据 Booklist=[] for i in range(100): Booklist.append(Book(title=”book”+str(i),price=30+i*i)) Book.objects.…

    Django 2023年4月11日
    00
  • Django Admin后台添加数据库视图过程解析

    下面我将为你详细讲解“Django Admin后台添加数据库视图过程解析”以及两条示例说明。 什么是Django Admin? Django Admin 是 Django 的一个开箱即用的功能,它提供了一个快速而简单的方式来创建管理后台。通过 Django Admin,我们可以灵活地配置、管理和增加我们的数据。 如何添加数据库视图? 添加数据库视图有两个步骤…

    Django 2023年5月16日
    00
  • Python的Django框架中的表单处理示例

    下面是Python的Django框架中的表单处理示例的完整攻略。 1. 示例一:表单的基本创建和处理 1.1 创建表单 首先,在Django框架中创建表单是比较简单的,只需要通过继承Django中的forms.Form类来创建表单类即可。 例如,我们创建一个表单类LoginForm来处理用户的登录操作,示例代码如下: from django import f…

    Django 2023年5月16日
    00
  • Python后台开发Django的教程详解(启动)

    一、标题 Python后台开发Django的教程详解(启动) 二、正文 简介 Django是一款基于Python的Web开发框架,被广泛应用于网站和应用的开发。本篇文章将介绍如何启动Django项目并进行基本配置。 环境准备 在开始Django项目之前,我们需要进行一些环境准备:- 确保你已经安装了Python。建议使用Python3以上的版本。- 使用pi…

    Django 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部