在 DjangoStarter 中整合 TailwindCSS

程序设计实验室發表於2024-07-15
DjangoAICSS

前言

好久沒有更新技術文章了

這個月開箱和隨筆倒是寫了不少，又忙又懶的

基礎的文章不太想寫，稍微深入一點的又需要花很多時間來寫

雖然但是，最終還是想水一篇

最近做了一個基於 wagtail 的專案，有不少東西可以記錄。本文先記錄一下把 tailwindcss 支援新增到 DjangoStarter 框架裡

使用原生 Django 的話也能參考，都是大同小異的

之前看到有個叫 django-tailwind 的 python包，不過可能配套的 tailwind 版本不方便更新，再加上 DjangoStarter 很早就使用 NPM 和 gulp 來管理前端靜態資源了，所以還是手動來新增 tailwind 比較好。

安裝 tailwindcss

安裝

在 DjangoStarter 的專案根目錄執行命令

pnpm install -D tailwindcss

初始化

在根目錄執行命令

npx tailwindcss init

這個命令會在根目錄新增 tailwind.config.js 檔案，修改一下

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/templates/**/*.html',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

建立css檔案

建立 src/static/css/tailwind.src.css 檔案

內容

@tailwind base;
@tailwind components;
@tailwind utilities;

啟動 tailwind

在根目錄執行命令

npx tailwindcss -i .\src\static\css\tailwind.src.css -o .\src\static\css\tailwind.css --watch

這樣就搞定了

在開發過程中，tailwindcss會根據專案裡用到的class動態生成css檔案

tailwind元件庫

tailwind生態還是很豐富的，元件庫有很多選擇，就算不要元件庫也行，網上搜一下有很多 samples ，裡面不乏一些讓人眼前一亮的設計，現在有了 GPT 還能讓 GPT 來寫介面。

我目前在專案裡用的是 Flowbite 和 Daisy

實際使用下來，還是 Flowbite 比較舒服，元件樣式定義比較自由，不過就要寫好多 class

而 Daisy 就遮蔽了很多元件定義的細節，相對來說不太好修改樣式

舉個例子

同樣是按鈕

flowbite 是這樣定義的

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

daisy 是這樣，有點 bootstrap 的感覺

<button class="btn btn-primary">Primary</button>

雖然 daisy 的程式碼很簡潔，不過要自己調整有點麻煩

所以我還是傾向於使用 flowbite 這種風格，然後需要重複使用就自己封裝成元件

使用 django-compressor 壓縮靜態資源

django-compressor 能夠壓縮和合並靜態檔案，提高網站的載入速度和效能。

之前我們是使用 gulp 這個 node 的工具來處理靜態資源，也包括壓縮靜態資源這個功能，現在把壓縮這一步交給 django-compressor ，更方便。

安裝

pdm add django-compressor>=4.5

註冊服務與配置

修改 src/config/settings/components/common.py

新增到 INSTALLED_APPS 裡面

INSTALLED_APPS = [
  # ...
  'compressor',
  # ...
]

然後再配置一下 STATICFILES_FINDERS

使用腳手架建立的 settings.py 裡是沒有這個配置的，前兩個 finder 是 Django 預設有的

STATICFILES_FINDERS = [
  'django.contrib.staticfiles.finders.FileSystemFinder',
  'django.contrib.staticfiles.finders.AppDirectoriesFinder',
  'compressor.finders.CompressorFinder',
]

新增 src/config/settings/components/compressor.py 檔案，把 compressor 的配置單獨出來。

這個庫有很多配置，具體可以看官方文件，這裡我就只是把壓縮的開關開啟

COMPRESS_ENABLED = True

使用

OK，使用很簡單。在引入 css/js 的地方使用 compressor template tag 就好

先引入 template tag

{% load compress %}

壓縮CSS

{% compress css %}
  <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
  <link rel="stylesheet" href="{% static 'lib/font-awesome/css/all.min.css' %}">

  {% block extra_css %}
	  {# Override this in templates to add extra stylesheets #}
  {% endblock %}
{% endcompress %}

壓縮JS

{% compress js %}
  <script src="{% static 'lib/vue/dist/vue.min.js' %}"></script>
  <script src="{% static 'lib/flowbite/dist/flowbite.min.js' %}"></script>

  {% block extra_js %}
	  {# Override this in templates to add extra javascript #}
  {% endblock %}
{% endcompress %}

參考資料

  • https://django-compressor.readthedocs.io/en/stable/
  • https://flowbite.com/docs/getting-started/django/

相關文章