فهرست سرفصل‌های Django
خانه (Home) مقدمه (Intro) شروع به کار (Get Started) ساخت محیط مجازی (Create Virtual Environment) نصب (Install Django) ساخت پروژه (Create Project) ساخت اپ (Create App) ویوها (Views) آدرس ها (URLs) قالب ها (Templates) مدل ها (Models) افزودن داده (Insert Data) به روزرسانی داده (Update Data) حذف داده (Delete Data) به روزرسانی مدل (Update Model) آماده سازی قالب و ویو (Prep Template and View) افزودن لینک به جزئیات (Add Link to Details) افزودن قالب مادر (Add Master Template) افزودن صفحه ایندکس اصلی (Add Main Index Page) قالب 404 (404 Template) افزودن ویوی تست (Add Test View) پنل مدیریت (Admin) ساخت کاربر (Create User) افزودن مدل ها (Include Models) تنظیم List Display (Set List Display) به روزرسانی اعضا (Update Members) افزودن اعضا (Add Members) حذف اعضا (Delete Members) متغیرها (Variables) تگ ها (Tags) شرط if/else (If Else) حلقه for (For Loop) کامنت (Comment) include (Include) معرفی QuerySet (QuerySet Introduction) متد get (QuerySet Get) فیلتر (QuerySet Filter) مرتب سازی (QuerySet Order By) افزودن فایل های استاتیک (Add Static Files) نصب WhiteNoise (Install WhiteNoise) جمع آوری فایل های استاتیک (Collect Static Files) افزودن فایل های استاتیک سراسری (Add Global Static Files) افزودن استایل به پروژه (Add Styles to the Project) مقدمه (PostgreSQL Intro) ساخت حساب AWS (Create AWS Account) ساخت دیتابیس در RDS (Create Database in RDS) اتصال به دیتابیس (Connect to Database) افزودن اعضا (Add Members) Elastic Beanstalk (EB) ساخت requirements.txt (Create requirements.txt) ساخت django.config (Create django.config) ساخت فایل zip (Create .zip File) استقرار با EB (Deploy with EB) به روزرسانی پروژه (Update Project) افزودن فیلد slug (Add Slug Field) افزودن Bootstrap 5 (Add Bootstrap 5) مرجع تگ های قالب (Template Tag Reference) مرجع فیلترها (Filter Reference) مرجع Field Lookups (Field lookups Reference) کامپایلر (Compiler) تمرین ها (Exercises) آزمون (Quiz) سرفصل (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Django

Django — افزودن فایل های استاتیک (Add Static Files)

آخرین بروزرسانی: 1404/08/20

افزودن فایل های استاتیک (Add Static Files)

فایل استاتیک (Static File) یعنی فایل ثابت مثل CSS و تصویر. این فایل ها محتوا نیستند، اما ظاهر سایت را می سازند. الان گام به گام یک static می سازیم و در قالب وارد می کنیم.

ساخت پوشه static

یک پوشه با نام دقیق static کنار پوشه templates بساز.

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

مشاهده در ادیتور

حالا یک فایل CSS داخل پوشه static اضافه کن. نام مهم نیست.

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.css

مشاهده در ادیتور

محتوای ساده برای فایل CSS بنویس.

body {
  background-color: lightblue;
  font-family: verdana;
}

مشاهده در ادیتور

اتصال CSS در قالب

اول در بالای قالب دستور بارگذاری استاتیک را بگذار.

{% load static %}

مشاهده در ادیتور

سپس لینک stylesheet را با تگ static اضافه کن.

<link rel="stylesheet" href="{% static 'myfirst.css' %}">

مشاهده در ادیتور

نمونه کامل قالب را ببین.

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myfirst.css' %}">
<body>

{% for x in fruits %}
  <h1>{{ x }}</h1>
{% endfor %}

</body>
</html>

مشاهده در ادیتور

سرور را اجرا کن و نتیجه را ببین.

python manage.py runserver

مشاهده در ادیتور

تنظیمات برای توسعه و استقرار

برای بازی با پروژه، می توانی DEBUG = True بگذاری. اما بهتر است شیوه درست را یاد بگیری.

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
.
.

مشاهده در ادیتور

می خواهیم با DEBUG = False هم کار کند. پس ALLOWED_HOSTS را تنظیم کن.

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['*']

.
.

مشاهده در ادیتور

نکته: هنگام انتشار واقعی، به جای '*' دامنه واقعی را بگذار.

هشدار: جنگو به تنهایی فایل استاتیک را در تولید سرو نمی کند. فصل بعد WhiteNoise را می بینیم.

گام های عملی

  1. پوشه static را بساز.
  2. myfirst.css را داخلش بگذار.
  3. در قالب {% raw %}{% load static %}{% endraw %} را بنویس.
  4. لینک CSS را با static اضافه کن.
  5. سرور را اجرا کن و نتیجه را ببین.

جمع بندی سریع

  • نام پوشه باید static باشد.
  • {% raw %}{% load static %}{% endraw %} را فراموش نکن.
  • آدرس CSS را با static بساز.
  • برای تولید، سرویس دهی استاتیک جداست.
  • در فصل بعد WhiteNoise را یاد می گیری.

ادامه مسیر: مرتب سازی QuerySet را مرور کن. سپس برای سرو فایل ها در تولید، صفحه فایل های استاتیک جنگو را بخوان. همچنین برای قطعه های تکراری، از include استفاده کن تا قالب ها مرتب بمانند.