使用Django处理AdminLTE3

首先

在使用Django创建Web应用程序时,可以使用名为AdminLTE3的基于Bootstrap4的模板来创建仪表板。Bootstrap是一个著名的Web框架,由HTML / CSS / JavaScript组成,在AdminLTE3中,仅使用提供的类,无需使用自定义的CSS或JS即可创建高度完成的仪表板。
执行环境为Windows 10 Pro,WSL2(Ubuntu-20.04)。正在创建并在虚拟环境内运行。虚拟环境的构建方法,请参阅Django教程①的后半部分(安装和项目创建)。

Django管理界面模板-3

使用django-adminlte-3软件包。django-adminlte-3的PyPI上有软件包的描述。

Django AdminLTE3以标准基础模板的形式向开发人员提供AdminLTE3主题的功能。还提供了对Django内置管理界面的可选样式设置。

准备

按照 django-adminlte-3 的指示进行操作。首先安装 django-adminlte-3。

$ pip install django-adminlte-3

在设置文件的 INSTALLED_APPS 中添加 adminlte3 和 adminlte3_theme。由于加载顺序会受到影响,因此最好将 adminlte3 和 adminlte3_theme 放在 INSTALLED_APPS 的开头。

INSTALLED_APPS = [
     # General use templates & template tags (should appear first)
    'adminlte3',
     # Optional: Django admin theme (must be before django.contrib.admin)
    'adminlte3_theme',

    ...
]

执行collectstatic命令。在执行之前,请确保进行STATIC_ROOT的设置。有关设置的详细信息,请参考Django教程第7部分(静态文件)。

执行以下命令时出现了权限错误。

$ python3 manage.py collectstatic

...
PermissionError: [Errno 13] Permission denied: '/var/www'

加上 sudo 重新运行,但这次却出现了 Django 未安装的错误。

$ sudo python3 manage.py collectstatic

Traceback (most recent call last):
  File "manage.py", line 11, in main
    from django.core.management import execute_from_command_line
ModuleNotFoundError: No module named 'django'
...

在调查原因时,我发现了一篇关于当我使用virtualenv并在运行sudo python时无法正常工作而感到困惑的文章。根据参考文章,似乎在处理sudo时,它会超出虚拟环境的辖域,即使Django已在虚拟环境中安装,sudo视角下也会认为它未安装。通过指定虚拟环境中的Python,问题得到了解决。

$ sudo ~/[virtual_env]/bin/python manage.py collectstatic

...
2202 static files copied to '/var/www/apps/static'.

以上、我已经准备好了Django-AdminLTE3。

使用方法

由于已经准备好了基本模板,将其保存到templates目录中并命名为base.html。不要编辑这个模板本身,而是使用{% extends “base.html” %},并修改部分模板以便使用继承自base.html的样式。

具体的例子

以下是一个展示这个模板的示例。这里假设我们有一个叫做”dashboard”的应用程序。

首先创建一个名为dashboard/urls.py的文件,然后写入以下代码。

from django.urls import path

from . import views

app_name = 'dashboard'
urlpatterns = [
    path('', views.MainView.as_view(), name='main'),
]

然后,将上述的URLconf加载到config/urls.py中。

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('dashboard/', include('dashboard.urls')),
    path('admin/', admin.site.urls),
]

此外,将以下代码编写到dashboard/views.py中。

from django.shortcuts import render
from django.views.generic import TemplateView

class MainView(TemplateView):
    template_name = 'dashboard/main.html'

最后,创建 templates/dashboard/main.html。

{% extends "base.html" %}

运行 $ python manage.py runserver,并访问 http://127.0.0.1:8000/dashboard/,会显示如下界面。

dashboard.png

要更改模板的一部分,只需在 templates/dashboard/main.html中修改模板标签的内容如下。要使用的模板标签请参考base.html。

{% extends "base.html" %}

{% block title %}タイトル{% endblock %}

{% block content %}
your awesome content
{% endblock %}

在base.html中,通过{% include %}标签引入了6个html文件,如果想查看详细内容,可以直接查看这些文件的内容。这些文件位于$ pip show django-adminlte-3中查找到的adminlte3/templates/adminlte目录下。如果只想稍微改变基本外观,最快的方法是复制这些文件并进行编辑。(如果复制了文件,请不要忘记重新引用{% include %}中的引用。)

广告
将在 10 秒后关闭
bannerAds