在 DjangoStarter 中集成 TailwindCSS

前言

好久没有更新技术文章了

这个月开箱和随笔倒是写了不少,又忙又懒的

基础的文章不太想写,稍微深入一点的又需要花很多时间来写

虽然但是,最终还是想水一篇

最近做了一个基于 wagtail 的项目,有不少东西可以记录。本文先记录一下把 tailwindcss 支持添加到 DjangoStarter 框架里

使用原生 Django 的话也能参考,都是大同小异的

之前看到有个叫 django-tailwind 的 python包,不过可能配套的 tailwind 版本不方便更新,再加上 DjangoStarter 很早就使用 NPM 和 gulp 来管理前端静态资源了,所以还是手动来添加 tailwind 比较好。

安装 tailwindcss

安装

在 DjangoStarter 的项目根目录执行命令

bash 复制代码
pnpm install -D tailwindcss

初始化

在根目录执行命令

bash 复制代码
npx tailwindcss init

这个命令会在根目录添加 tailwind.config.js 文件,修改一下

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

创建css文件

创建 src/static/css/tailwind.src.css 文件

内容

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

启动 tailwind

在根目录执行命令

bash 复制代码
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 是这样定义的

html 复制代码
<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 的感觉

html 复制代码
<button class="btn btn-primary">Primary</button>

虽然 daisy 的代码很简洁,不过要自己调整有点麻烦

所以我还是倾向于使用 flowbite 这种风格,然后需要重复使用就自己封装成组件

使用 django-compressor 压缩静态资源

django-compressor 能够压缩和合并静态文件,提高网站的加载速度和性能。

之前我们是使用 gulp 这个 node 的工具来处理静态资源,也包括压缩静态资源这个功能,现在把压缩这一步交给 django-compressor ,更方便。

安装

bash 复制代码
pdm add django-compressor>=4.5

注册服务与配置

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

添加到 INSTALLED_APPS 里面

python 复制代码
INSTALLED_APPS = [
  # ...
  'compressor',
  # ...
]

然后再配置一下 STATICFILES_FINDERS

使用脚手架创建的 settings.py 里是没有这个配置的,前两个 finder 是 Django 默认有的

python 复制代码
STATICFILES_FINDERS = [
  'django.contrib.staticfiles.finders.FileSystemFinder',
  'django.contrib.staticfiles.finders.AppDirectoriesFinder',
  'compressor.finders.CompressorFinder',
]

添加 src/config/settings/components/compressor.py 文件,把 compressor 的配置单独出来。

这个库有很多配置,具体可以看官方文档,这里我就只是把压缩的开关打开

python 复制代码
COMPRESS_ENABLED = True

使用

OK,使用很简单。在引入 css/js 的地方使用 compressor template tag 就好

先引入 template tag

django 复制代码
{% load compress %}

压缩CSS

django 复制代码
{% 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

django 复制代码
{% 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 %}

参考资料

相关推荐
unicrom_深圳市由你创科技16 小时前
使用Django框架构建Python Web应用
前端·python·django
ku_code_ku16 小时前
Django由于数据库版本原因导致数据库迁移失败解决办法
后端·python·django
LuckyLay18 小时前
1.2.2 高级特性详解——AI教你学Django
python·django·sqlite
【本人】19 小时前
Django基础(三)———模板
后端·python·django
言之。20 小时前
Django中get()与filter()对比
数据库·django·sqlite
小王子102420 小时前
Django 实战:I18N 国际化与本地化配置、翻译与切换一步到位
django·国际化·i18n·web开发
Mr数据杨21 小时前
【Dv3Admin】菜单管理集成阿里巴巴自定义矢量图标库
python·django
Q_Q19632884751 天前
python的抗洪救灾管理系统
开发语言·spring boot·python·django·flask·node.js·php
言之。1 天前
Django `transaction.atomic()` 完整使用指南
数据库·python·django