اگر از فرانت اند به سمت بک اند برید , احتمالا نمیتونید عادت های فرانت رو کنار بزارید و احتمالا چند وقت بعد از شروع بک اند , دنبال این میگردید که چطور فریم ورک های Css رو روی فریم ورک هایی مثل جنگو نصب کنید .
فریم ورک Tailwind ، فریم ورکی هست که در حال حاضر محبوب ترین فریم ورک Css به حساب میاد و تقریبا روی تمام بخش ها میتونید ازش استفاده کنید و این عالیه که شما یک ابزار قدرتمند رو روی هر برنامه ای بتونید نصب کنید .
من یک هفته بعد از شروع جنگو به مشکل استایل دادن به template ها بر خوردم که اذیتم کرد و اصلا دلم نمیخواست که چیزی مثل بوتسترپ رو داشته باشم تا یک استایل خشک بسازم ، دوست داشتم که استایل پروژه آزاد باشه و بتونم اون رو هر جوری که خواستم تغییر بدم و Tailwind بهترین گزینه بود و این سوال برام پیش اومد که چطوری tailwind رو داخل django نصب کنم ؟ نصب کردم چطوری ران کنم ؟ و از اینجور چیز ها ...
مطلب فارسی در این باره وجود نداشت ، پس من اولین مطلب رو مینویسم تا برنامه نویس های تازه کار ایرانی راحت تر پیشرفت کنن .
1 - در مرحله اول ، django-tailwind رو با استفاده از pip نصب کنید :
python -m pip install django-tailwind
یا میتونید با استفاده از این دستور ، آخرین نسخه رو دانلود و نصب کنید :
python -m pip install git+https://github.com/timonweb/django-tailwind.git
2 - برنامه نصب شده رو توی INSTALLED_APP در بخش settings.py وارد کنید تا جنگو اون رو شناسایی کنه :
INSTALLED_APPS = [ # other Django apps 'tailwind', ]
3 - بعد از نصب برنامه ، باید tailwind رو با برنامه سازگار یا اینیشیال کنیم ، دستور زیر رو دنبال کنید :
python manage.py tailwind init
این دستور , app جدیدی توی پروژه ایجاد میکنه که تمام دستورات و بخش های tailwind داخل اون هست و از اون خونده میشه . اسم این بخش رو به صورت پیشفرض theme بزارید تا خوانا تر بشه .
4 - و بعد دوباره اون برنامه theme رو توی تنظیمات جنگو وارد کنید تا اون رو بشناسه :
INSTALLED_APPS = [ # other Django apps 'tailwind', 'theme' ]
5 - بخش theme رو در بخش settings.py رجیستر و فعال کنید ، دستور زیر رو دنبال کنید :
TAILWIND_APP_NAME = 'theme'
6 - در حرکت بعدی باید Ip داخلی برنامه رو با Tailwind یکی کنید تا دریافتی ها درست باشه ، این بخش رو به بخش تنظیمات اضافه کنید :
INTERNAL_IPS = [ "127.0.0.1", ]
7 - وابستگی ها یا dependencies های tailwind رو با کد زیر نصب کنید :
python manage.py tailwind install
8 - حالا میتونید از بخش های مختلف tailwind استفاده کنید . تگ های زیر رو به تمپلیت اصلی پروژتون اضافه کنید :
{% load static tailwind_tags %} ... <head> ... {% tailwind_css %} ... </head>
9 - این بخش دلخواه هست ولی خوبه که این بخش رو داشته باشید . جنگو بخشی رو به صورت پیشفرض در اختیار شما قرار میده که به شما این اجازه رو میده بعد از هر دخیره کردن کد ، صفحه رو رفرش کنه ، دقیقا مثل وب اپلیکیشن های ری اکت یا ویو یا انگولار .
برای فعال کردن این بخش فقط django_browser_reload رو به تنظیماتی که انجام دادیم اضافه کنید :
INSTALLED_APPS = [ # other Django apps 'tailwind', 'theme', 'django_browser_reload' ]
10 - برای تکمیل کردن مرحله قبلی باید یک میدل ویر در بخش settings.py اضافه کنیم . کد زیر رو دنبال کنید:
MIDDLEWARE = [ # ... "django_browser_reload.middleware.BrowserReloadMiddleware", # ... ]
11 - و در نهایت در بخش urls.py باید این بخش ریلود رو اضافه کنیم تا کار تکمیل بشه :
from django.urls import include, path urlpatterns = [ ..., path("__reload__/", include("django_browser_reload.urls")), ]
12 - و در نهایت ما tailwind css رو نصب کردیم و تنظیمات جنگو رو هم تماما انجام دادیم و پروژه آماده اجرا شدنه . دستور زیر رو دنبال کنید و تمام :
python manage.py tailwind start
در نهایت این تمام کاری بود که شما باید دنبال میکردید تا tailwind رو روی جنگو نصب و استفاده کنید . خوشحالم که محتوای مفید و فارسی در اختیار برنامه نویس های فارسی زبان قرار گرفت .
