如何在应用程序中整合Django-Tailwind风格的设计

每个应用程序都需要良好的样式设计，以获得更多的可读内容。多年来，在框架出现之前，CSS（层叠样式表）一直占主导地位。

在本教程中，我们将讨论一种更好的方法，使用一个名为django-tailwind 的框架对Django应用程序进行样式设计。这就利用了Django项目中的tailwind 样式表类。

前提条件

要继续学习本教程，你应该具备以下条件。

对Python编程语言的理解。
一个预装的 IDE，最好是[Visual Studio Code]。
安装了[Python]编程语言。
安装了[Node.js]。
对[Django]框架的理解。

项目设置

在本教程中，我们将首先按照Django的方式设置一个项目结构。首先，我们要为项目设计一个存储位置。

打开你的git bash，并输入以下命令。

cd
cd Desktop
mkdir project
cd project

检查工作目录，确保你在Desktop 目录上。创建一个名为project 的目录并导航到该目录。

现在，让我们为该项目创建一个虚拟环境，并安装所需的依赖，如下图所示。

python -m venv env
source env/Scripts/activate
pip install django django-tailwind
pip freeze > requirements.txt

我们已经为该项目配置了环境，并安装了所有的依赖项。我们正在通过requirements.txt 文件来跟踪这些依赖项。

让我们启动Django服务器，安装一些应用程序，并将它们添加到项目设置中。我们将通过使用下面的代码段来完成这一工作。

django-admin startproject myprojectapp
python manage.py startapp comment
python manage.py runserver

我们已经启动了myprojectapp 项目，并且还制作了comment 应用程序。我们还用命令python manage.py runserver ，启动了Django服务器。

如果你打开你的浏览器到127.0.0.1:8000 ，你应该可以确认我们在下面显示的图片中的内容。

First page

整合django-tailwind

django-tailwind 框架需要一个专门的应用程序，其中包含所有的依赖性。这个框架允许我们使用模板中的tailwind 类来设计应用程序。

但在这之前，我们必须先初始化它。

python manage.py tailwind init

tailwind应用程序的默认名称是theme ，如果你愿意，可以改变它，但要确保settings.py 文件中的名称也被改变。

现在打开项目设置，导航到INSTALLED_APPS ，并添加下面的片段。

'tailwind'
'theme'
'comment'

此外，必须在settings.py 文件的右下方注册应用程序的名称，同时指定内部IP地址。

TAILWIND_APP_NAME = 'theme'
INTERNAL_IPS = [
    "127.0.0.1",
]

还必须安装tailwind 依赖关系。node 然而，安装这个需要一个名为npm 的软件包管理器，它与node软件包一起。

python manage.py tailwind install

如果安装时在你的系统上找不到npm 包，根据你的操作系统，在你的settings.py 文件中添加下面的片段。

如果你的操作系统是Linux 或MacOs ，请添加下面的代码段。

NPM_BIN_PATH = '/usr/local/bin/npm'

否则，这适用于Windows 操作系统。

NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"

除此之外，我们还必须添加一个库，负责自动刷新页面，以便在开发阶段使造型生效。在settings.py 文件内的INSTALLED_APPS ，添加下面这一行。

'django_browser_reload'

将下面的代码添加到同一设置文件的中间件中。它将在DEBUG 转为True 的情况下，在每个HTML响应上插入脚本标签。

"django_browser_reload.middleware.BrowserReloadMiddleware",

为项目制作路由

接下来，我们必须为添加在根urls.py 的中间件制作一个路由。这个路由将自动重新加载浏览器以使造型生效。

现在复制下面的片段并将其添加到根URL文件内的urlpatterns 列表中。

在django.urls import path 命令中添加include 参数。

path("__reload__/", include("django_browser_reload.urls")),

让我们来配置索引页的路由。

我们之前做了一个名为comment 的应用程序。打开文件夹，创建urls.py 文件，然后将以下代码粘贴到其中。

from django.urls import path
from.  import views

urlpatterns = [
    path('', views.homepage, name="index")
]

接下来，导航到根文件夹中的urls.py ，将上面制作的文件添加到URL patterns 列表中。这将使根部能够跟踪与应用程序相匹配的URL。

path('', include('comment.urls')),

项目的视图

让我们为comment 应用程序制作第一个视图。我们将通过使用一个简单的功能视图来实现这一点，该视图名为index ，基于我们在路由中使用的内容。

在comment 应用程序中打开views.py 文件，并输入以下内容。

from django.shortcuts import render

# Create your views here.

def homepage(request):
    return render(request, 'base.html')

base.html 文件可以在theme/templates/base.html 目录下找到。

最后，在一个单独的终端中使用下面的命令启动开发服务器。

python manage.py tailwind start
python manage.py runserver

打开127.0.0.1:8000 地址，确认下面的图片为django-tailwind 框架的第一页。

Django Tailwind

总结

在本教程中，我们整合了框架django-tailwind ，目的是为了给我们的Django应用程序设计风格。按照本教程，你可以通过在HTML语法中编写tailwind 类来设计任何Django应用程序。

如何在应用程序中整合Django-Tailwind的风格设计