چگونه یک برنامه وب Django Tailwind ایجاد کنیم
Tailwind CSS در حال حاضر مستنداتی در مورد نحوه ادغام دانلود Tailwind CSS با پروژه جنگو ندارد.
خوشبختانه بسته ای برای این ادغام دقیق طراحی شده است.
توجه: من نام محیط، پروژه و برنامه خود را env، project و app j تغییر می دهم تا همه چیز ساده باشد.
Node.js و npm را نصب کنید
ابتدا Node.js و npm را نصب کنید اگر قبلاً آنها را ندارید.
هر دو با هم با استفاده از نصب کننده Node نصب می شوند.
نصب کننده مناسب برای سیستم عامل خود را انتخاب کنید سپس فایل را دانلود کنید.
Node.js روی ویندوز نصب می شود
صبر کنید تا دانلود تمام شود، سپس «Node.js Setup Wizard» را برای ویندوز اجرا کنید.
Node.js روی macOS نصب می شود
اگر از macOS استفاده می کنید، منتظر دانلود باشید و مراحل نصب «Install Node.js» را تکمیل کنید.
محیط مجازی پایتون
یک محیط مجازی برای پروژه Tailwind Django خود ایجاد کنید
خط فرمان (ویندوز)
C:\Users\Owner> cd desktop C:\Users\Owner\desktop> py -m venv env
مثل همیشه، یک محیط مجازی پایتون ایجاد کنید .
محیط را فعال کنید
خط فرمان (ویندوز)
C:\Users\Owner\desktop\> cd env C:\Users\Owner\desktop\env> Scripts\activate (env)C:\Users\Owner\desktop\env>
وارد محیط مجازی شوید.
قبل از ادامه، محیط را فعال کنید.
این دستور Scripts\activate
برای ویندوز و source
bin/activate
macOS است.
نصب جنگو
چارچوب وب جنگو را نصب کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env>pip install django
django
از طریق خط فرمان نصب کنید . فرمان است pip install django
.
یک پروژه جنگو ایجاد کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env> django-admin startproject project
اکنون پروژه جنگو را ایجاد کنید. من اسم پروژه ام را project
گذاشتم
فرمان استdjango-admin startproject project.
از طریق خط فرمان وارد پروژه جنگو شوید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env> cd project (env)C:\Users\Owner\desktop\env\project>
وارد دایرکتوری پروژه جدید شوید.
نصب Django-Tailwind
django-tailwind را نصب کنید
خط فرمان
(env)C:\Users\Owner\desktop\env\project>pip install django-tailwind
django-tailwind بسته ای است که چارچوب Tailwind CSS را با جنگو ادغام می کند. این بسته که توسط تیم کامنین ایجاد شده است، فرآیند یکپارچه سازی را ساده می کند.
بسته را با دستور pip install django-tailwind نصب کنید.
Tailwind را به برنامه های نصب شده اضافه کنید
(env) > project > project > settings.py
... # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tailwind', ] ...
tailwind
به لیست موجود در فایل settings.pyINSTALLED_APPS
جنگو اضافه کنید.
یک برنامه Tailwind + Django ایجاد کنید
یک برنامه Tailwind CSS Django ایجاد کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py tailwind init app
زمان ایجاد یک برنامه جنگو سازگار با Tailwind است!
دستور py manage.py tailwind init app
ایجاد اپلیکیشنی به نام app را در پروژه جنگو خود اجرا کنید.
Tailwind را به برنامه های نصب شده اضافه کنید
(env) > project > project > settings.py
... # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'main.apps.MainConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tailwind', 'app', ] ...
به settings.py برگردید و app
به لیست فهرست برگردید INSTALLED_APPS
.
برنامه Tailwind-Django را ثبت کنید
(env) > project > project > settings.py
... # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'main.apps.MainConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tailwind', 'app', ] TAILWIND_APP_NAME = 'app' ...
برنامه Tailwind-Django خود را در فایل settings.py با رشته ثبت کنید TAILWIND_APP_NAME ='app'
.
وابستگی های Tailwind CSS را نصب کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py tailwind install
وابستگی های Tailwind CSS را با دستور نصب کنید .
py manage.py tailwind install
خطا هنگام نصب وابستگی های Tailwind CSS؟
فایل اجرایی پایتون ممکن است در یافتن npm در سیستم های ویندوز مشکل داشته باشد. با تنظیم مسیر اجرایی در فایل settings.py این مشکل را حل کنید.
ابتدا دستور which npm
را برای دریافت مسیر اجرا کنید.
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>which npm /c/Program Files/nodejs/npm
(env) > project > project > settings.py
... # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'main.apps.MainConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tailwind', 'app', ] TAILWIND_APP_NAME = 'app' NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd" ...
سپس مسیر را به settings.py اضافه کنید.
مسیر ممکن است برای هر سیستم متفاوت باشد، بنابراین به جای حدس زدن، دستور بالا را اجرا کنید.
مسیر بالا برای ویندوز کار می کند.
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py tailwind install
اکنون می توانید وابستگی های Tailwind CSS را نصب کنید.
برنامه اصلی جنگو را ایجاد کنید
یک برنامه جنگو با نام main ایجاد کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py startapp main
با دستور یک برنامه اصلی ایجاد کنید py manage.py startapp main
.
مهاجرت های اولیه جنگو را انجام دهید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py migrate
دستور py manage.py migrate
اجرای migrate از پیش تعیین شده توسط چارچوب جنگو را اجرا کنید.
برنامه اصلی را به تنظیمات اضافه کنید
(env) > پروژه > پروژه > settings.py
... # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'main.apps.MainConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'tailwind', 'app', 'main', ] TAILWIND_APP_NAME = 'app' NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd" ...
main
به INSTALLED_APPS
لیست در settings.py اضافه کنید.
URL های اصلی برنامه را ایجاد کنید
(env) > پروژه > اصلی > (فایل جدید) urls.py
from django.urls import path from . import views app_name = "main" urlpatterns = [ path("", views.homepage, name="homepage"), ]
یک فایل جدید به نام urls.py در پروژه > پوشه اصلی ایجاد کنید. نام برنامه و یک مسیر URL را به صفحه اصلی که در عرض یک دقیقه میسازم اضافه کنید.
نمای صفحه اصلی را ایجاد کنید
(env) > پروژه > اصلی > views.py
from django.shortcuts import render # Create your views here. def homepage(request): return render(request = request, template_name="main/home.html")
یک نمای صفحه اصلی اضافه کنید که الگوی main/home.html را برمی گرداند .
قالب صفحه اصلی را اضافه کنید
(env) > project >main > (New Folder) templates > (New Folder) main > (New File) home.html
<!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> </head> <body> <h1>Django + Tailwind</h1> </body> </html>
یک پوشه templates در پوشه اصلی ایجاد کنید . سپس یک فایل home.html در پوشه templates جدید ایجاد کنید.
URL های اصلی را به آدرس های پروژه متصل کنید
(env) > پروژه > پروژه > urls.py
"""mysite URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/2.1/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path, include #add include urlpatterns = [ path('admin/', admin.site.urls), path('', include ('main.urls')), #add this ]
URL های اصلی را به عنوان مسیر در پروژه urls.py اضافه کنید. بدین ترتیب پروژه ها به مسیرهای URL اصلی دسترسی خواهند داشت.
سرور جنگو را اجرا کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py runserver
سرور توسعه را اجرا کنید و عبارت “Django + Tailwind” را در home.html خواهید دید .
استایل شیت جنگو-تیل ویند را به برنامه اصلی جنگو وصل کنید
Tailwind Stylesheet را به قالب HTML اضافه کنید
(env) > project >main > templates > main > home.html
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tailwind CSS Skeleton</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <link rel="stylesheet" href="{% static 'css/styles.css' %}"> </head> <body class="bg-grey-lightest font-serif leading-normal tracking-normal"> <div class="container mx-auto"> <section class="flex items-center justify-center h-screen"> <h1 class="text-5xl">Django + Tailwind = ❤️</h1> </section> </div> </body> </html>
به دایرکتوری app > templates نگاه کنید و base.html را پیدا کنید . این کد HTML را در قالب Django home.html خود کپی و جایگذاری کنید .
Tailwind را در حالت توسعه دهنده راه اندازی کنید
خط فرمان (ویندوز)
(env)C:\Users\Owner\desktop\env\project>py manage.py tailwind start
برنامه وب را با اجرای دستور راه اندازی کنید py manage.py tailwind start
.
منتظر بمانید تا برنامه رندر شود و صفحه سبک Tailwind ایجاد شود.
هر بار که فایل SCSS را ویرایش می کنید، صفحه سبک باید با استفاده از این دستور دوباره تولید شود.
مشاهده الگوی Django Tailwind
صفحه مرورگر را دوباره بارگیری کنید و Tailwind SCSS روی الگو اعمال می شود.
Tailwind Stylesheet را پیکربندی کنید
فایل SCSS را به روز کنید
(env) > project > app > static_src > src > styles.scss
@tailwind base; @tailwind components; @tailwind utilities;
فایل SCSS را در فهرست برنامه > static_src > src پیدا کنید. این فایلی است که باید بهروزرسانی شود تا Tailwind CSS سفارشی شود.
این فایل فقط در صورتی باید تغییر کند که اجزا و مقادیر ویژگی کلاس را سفارشی کنید.