15- ساخت اولین اپلیکیشن در جنگو(6) (صفحه ادمین):

۰۹ تیر ۱۴۰۴
0 دیدگاه

آموزش افزودن فایل‌های استاتیک در Django: بخش 6 از سری آموزش ساخت اولین اپلیکیشن Django

 

در این بخش از آموزش، فرض بر این است که شما اپلیکیشن وب‌پول (web-poll) خود را تا بخش پنجم کامل کرده‌اید و اکنون قصد دارید برای بهبود ظاهر سایت، فایل‌های CSS و تصویر پس‌زمینه را به پروژه خود اضافه کنید.

 

 

مقدمه: فایل‌های استاتیک در Django چیست؟

 

در اکثر وب‌اپلیکیشن‌ها، علاوه بر محتوای HTML که سرور تولید می‌کند، نیاز به ارائه فایل‌های جانبی مانند تصاویر، فایل‌های CSS و جاوااسکریپت داریم که به آن‌ها فایل‌های استاتیک گفته می‌شود.

 

در پروژه‌های کوچک، می‌توان این فایل‌ها را در مسیر مشخصی قرار داد تا وب‌سرور آن‌ها را سرو کند. اما در پروژه‌های بزرگ‌تر که شامل چند اپلیکیشن مختلف هستند، مدیریت این فایل‌ها چالش‌برانگیز می‌شود.

 

برای حل این مشکل، Django ماژولی به نام django.contrib.staticfiles دارد که وظیفه جمع‌آوری فایل‌های استاتیک از اپلیکیشن‌های مختلف را بر عهده دارد و آن‌ها را در یک مسیر مشخص برای سرو آماده می‌کند.

 

 

ایجاد ساختار پوشه فایل‌های استاتیک

  1. در دایرکتوری اپلیکیشن خود (مثلاً polls)، یک پوشه به نام static بسازید.

  2. داخل پوشه static، یک پوشه با نام اپلیکیشن (در اینجا polls) ایجاد کنید.

  3. فایل CSS خود را در مسیر polls/static/polls/style.css قرار دهید.

 

 

چرا باید از نام‌گذاری به صورت namespace استفاده کنیم؟

اگر همه فایل‌های استاتیک را مستقیماً در polls/static/ قرار دهیم، ممکن است اگر اپلیکیشن‌های دیگری نیز فایل‌هایی با نام مشابه داشته باشند، Django نتواند تمایز قائل شود.

 

به همین دلیل، ساختار پوشه به صورت static/<app_name>/ به Django کمک می‌کند که فایل‌ها را درست پیدا کند و از تداخل جلوگیری کند.

 

 

اضافه کردن استایل به اپلیکیشن

محتوای فایل style.css به صورت زیر باشد:

				
					li a {
    color: green;
}

برای بارگذاری این فایل CSS در قالب HTML خود (مثلاً در polls/templates/polls/index.html)، مراحل زیر را انجام دهید:

  1. در بالای فایل قالب، تگ {% load static %} را اضافه کنید.

  2. لینک فایل CSS را به شکل زیر در <head> یا بالای فایل وارد کنید:

django

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

تگ {% static %} مسیر کامل URL فایل استاتیک را تولید می‌کند.

 

 

اجرای پروژه و مشاهده تغییرات

اگر سرور Django شما در حال اجراست، آن را مجدداً راه‌اندازی کنید:

				
					python manage.py runserver

سپس به آدرس http://localhost:8000/polls/ بروید. اگر همه چیز درست انجام شده باشد، لینک‌های سوالات به رنگ سبز نمایش داده می‌شوند که نشان‌دهنده بارگذاری موفق CSS است.

 

 

افزودن تصویر پس‌زمینه

 

برای اضافه کردن تصویر پس‌زمینه:

  1. در مسیر polls/static/polls/، پوشه‌ای به نام images ایجاد کنید.

  2. تصویر خود (مثلاً background.png) را در این پوشه قرار دهید:
    polls/static/polls/images/background.png

  3. در فایل CSS، کد زیر را اضافه کنید تا تصویر پس‌زمینه لود شود:

				
					body {
    background: white url("images/background.png") no-repeat;
}

صفحه را مجدداً بارگذاری کنید، تصویر پس‌زمینه در گوشه بالا سمت چپ نمایش داده خواهد شد.

 

 

نکات مهم درباره مسیرها در فایل‌های استاتیک

 

  • تگ {% static %} در فایل‌های CSS و JS قابل استفاده نیست، چون این فایل‌ها به صورت استاتیک بارگذاری می‌شوند و توسط Django پردازش نمی‌شوند.

  • بنابراین برای ارجاع دادن به تصاویر و فایل‌های دیگر در CSS، باید از مسیرهای نسبی استفاده کنید. این موضوع باعث می‌شود در صورت تغییر مقدار STATIC_URL، نیازی به تغییر مسیرها در فایل‌های استاتیک نباشد.

 

منابع بیشتر

 
برای اطلاعات بیشتر درباره تنظیمات و نحوه کار با فایل‌های استاتیک در Django، می‌توانید به مستندات زیر مراجعه کنید:

0 دیدگاه

مقالات مرتبط