فایل‌های استاتیک (Add Static Files)

25 دقیقه Article

فایل‌های استاتیک: CSS، JavaScript و تصاویر 🎨

فایل‌های استاتیک شامل CSS، JavaScript، تصاویر و فونت‌ها میشن. جنگو یک سیستم قدرتمند برای مدیریت این فایل‌ها داره!

ساختار پوشه‌ها

فایل‌های استاتیک در پوشه static هر اپلیکیشن قرار می‌گیرن:

blog/
    static/
        blog/
            css/
                style.css
            js/
                main.js
            images/
                logo.png

تنظیمات settings.py

# mysite/settings.py
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

استفاده در تمپلیت


{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

تگ load static: قبل از استفاده از {% static %}، باید {% load static %} رو در ابتدای تمپلیت بنویسید. این کار فقط یکبار در هر تمپلیت لازمه!

بهترین روش: فایل‌های استاتیک مشترک رو در پوشه static اصلی پروژه بذارید و فایل‌های مخصوص هر اپلیکیشن رو در پوشه static اون اپلیکیشن.

🎯 تمرین عملی:

یک فایل CSS برای استایل‌دهی به پست‌ها بسازید و در تمپلیت base لود کنید. همچنین یک فایل JavaScript برای تعاملات ساده اضافه کنید.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تمرین: ساخت سیستم استایل Easy

سوال تمرین

🎯 تمرین عملی: CSS و JS

یک فایل CSS و JavaScript بسازید و در تمپلیت base لود کنید.

پاسخ تمرین

PYTHON

# static/css/style.css
:root {
    --primary: #4caf50;
    --secondary: #2196f3;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 0;
}

.post {
    background: #f5f5f5;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

# static/js/main.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('صفحه لود شد!');
});

<!-- base.html -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/main.js' %}"></script>

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo