首頁 > web前端 > css教學 > 主體

薑戈順風

PHPz
發布: 2024-08-29 06:30:31
原創
1136 人瀏覽過

本教學示範如何在新專案中從頭開始設定 Django 和 TailwindCSS。

Django 設定

建立一個名為 .venv 的新虛擬環境。

# Windows
$ python -m venv .venv
$ .venv\Scripts\Activate.ps1
(.venv) $

# macOS/Linux
$ python3 -m venv .venv
$ source .venv/bin/activate
(.venv) $
登入後複製

然後安裝 Django 並建立一個名為 django_project 的新專案。

(.venv) $ python -m pip install django
(.venv) $ django-admin startproject django_project .
登入後複製

使用 mkdir 指令從命令列建立專案級範本目錄。

(.venv) $ mkdir templates
登入後複製

我們將在這裡儲存我們的模板,而不是在每個應用程式中。但是,我們需要透過更新 settings.py 中的 TEMPLATES 配置來告訴 Django 在哪裡可以找到它們。

# django_project/settings.py
TEMPLATES = [
    {
        ...
        "DIRS": [BASE_DIR/"templates"],  # new
        ...
    }
]
登入後複製

建立 templates/base.html 檔案。

<!-- templates/base.html -->
<h1>Hello, World</h1>
登入後複製

如果我們巧妙地使用“django_project/urls.py”,我們可以將視圖和 URL 包含在一個檔案中。在頂部導入TemplateView,然後設定一個指向模板的路徑,base.html。

# django_project/urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView  # new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", TemplateView.as_view(template_name="base.html"),),  # new
]
登入後複製

使用 runserver 指令確認首頁正常運作。

(.venv) $ python manage.py runserver
登入後複製

Django Tailwind

順風配置

Tailwind 文件有一個安裝指南,我們只需進行一些更改即可遵循。從專案目錄中開啟一個新的終端會話:我們最終需要執行兩個終端會話,一個使用我們的 Django 伺服器,另一個使用 Node。

在新的終端機視窗中,請確保您的電腦上安裝了 Node。你可以用node-v來檢查。

$ node -v
v20.17.0
登入後複製

建立 package.json 檔案以一起使用 Node 和 Tailwind。新增 -y 標誌以對所有預設值表示“是”。

$ npm init -y
登入後複製

這是產生的 package.json 檔案。

{
  "name": "django-tailwind",
  "version": "1.0.0",
  "description": "How to configure Django and Tailwind from scratch in a new project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
登入後複製

透過 npm 安裝 Tailwind。

$ npm install -D tailwindcss
登入後複製

這將建立一個 node_modules 目錄。接下來建立一個 tailwind.config.js 檔案。

$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js
登入後複製

現在我們有了一個 tailwind.config.js 檔案。為我們的模板目錄新增路徑。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/"],  // updated line here!
  theme: {
    extend: {},
  },
  plugins: [],
}
登入後複製

在 Django 專案中,建立一個靜態目錄和一個名為 src 的子目錄。

$ mkdir static
$ mkdir static/src
登入後複製

我們需要透過更新 STATICFILES_DIRS 配置告訴 Django 在這裡查找檔案。

# settings.py
STATICFILES_DIRS = [BASE_DIR / "static",]  # new
登入後複製

然後建立一個名為 static/src/styles.css 的新 CSS 檔案並在其中加入 @tailwind 指令。

/* static/src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
登入後複製

下一步是啟動 Tailwind CLI 建置流程。它將掃描我們的模板文件中的類別並建立必要的 CSS。我們在這裡稍微更改了 Tailwind 網站的路徑,以便它在 src/styles.css 檔案中尋找並輸出到 dist/styles.css。

$ npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch
登入後複製

要嘗試一下,請使用一些 Tailwind 類別更新 base.html 範本檔案。在頂部新增載入靜態標記並連結到新樣式表非常重要。然後,我們添加基本類,使標題變為紅色,下面的文字變為藍色。

<!-- templates/base.html -->
{% load static %}
<link href="{% static 'dist/styles.css' %}" rel="stylesheet">
<h1 class="text-red-600">Hello, World</h1>
<p class="text-blue-600">More text</p>
登入後複製

硬刷新主頁。

Django Tailwind

您可以看到文字更新,表示 Tailwind 已正確安裝。

觀看:css 腳本

我們已經啟動並運行了基本安裝,但您很快就會發現一些額外的功能可以顯著改善情況。

首先,我們不想記住讓 Node 執行的又大又長的指令。我們可以將其作為以「watch:css」開頭的腳本放在 package.json 檔案中。

// package.json
{
  "name": "django-tailwind",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch:css": "npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}
登入後複製

在 Node 運行的終端機中,使用 Ctrl+c 停止它。輸入 npm run watch:css 它應該像以前一樣啟動。

$ npm run watch:css
登入後複製

刷新網頁以確保一切仍然有效。

結論

如我們所見,Tailwind 與 Django 配合得很好。如需額外的好處,請查看 django-browser-reload 以在開發中自動重新載入瀏覽器,這樣您就不必一直進行硬刷新。還有一個維護良好的第三方套件 django-tailwind,它提供了另一種將 Tailwind 與 Django 整合的方法。

以上是薑戈順風的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!