چگونه یک برنامه وب 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/activatemacOS است.

 

نصب جنگو

چارچوب وب جنگو را نصب کنید

خط فرمان (ویندوز)

(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 سفارشی شود.

این فایل فقط در صورتی باید تغییر کند که اجزا و مقادیر ویژگی کلاس را سفارشی کنید.

Favorite