تنظیمات فایل‌های استاتیک

جنگو

سلام

به فایل‌هایی، استاتیک می‌گوییم که که برای ساخت UI یا همان User Interface استفاده می‌شوند. مثلCSS, JavaScripts, Fonts, Images و…

جنگو با این فایل‌ها در زمان توسعۀ نرم افزار کاری ندارد اما برای مدیریت آن‌ها برنامه‌ای به نام contrib.staticfiles را ساخته که در تنظیمات INSTALLED_APPS قابل مشاهده است. ضمناً به راحتی می‌توان ابزارهایی نظیر Bootstrap را روی آن سوار کرد. برای این کار در فولدر لیبوگرام و در کنار فولدرهای بورد و تمپلیت، فولدر جدیدی به نام static و درون آن هم فولدر دیگری با نام‌های css و js می‌سازیم.

به آدرس getbootstrap.com رفته و آخرین نسخۀ آن را دانلود می‌کنیم. از بین نسخه‌های مختلف باید نسخۀ Compiled CSS and JS دانلود شود. فایل‌های CSS را درون فولدر خود و فایل‌های Javascripts را هم درون فولدر خود می ریزیم. در این قسمت از آموزش صرفاً به فایل css/bootstrap.min.css احتیاج است.

در قدم بعدی باید به جنگو این آدرس را اعلام کنیم. به فایل py رفته و در قسمت STATIC_URL تنظیمات زیر را اعمال می کنیم:

حالا باید از آن در فایل مربوط به قالب برنامه استفاده شود. به فایل templates/home.html رفته و تغییرات زیر را انجام می دهیم.

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

از تگ {% static %} برای اعلام محل قرارگیری فایل‌های استاتیک استفاده می‌شود.

در این مثال از تگ {% static ‘css/bootstrap.min.css’ %} استفاده شده و آدرس /static/css/bootstrap.min.css را باز می‌گرداند که از بیرون با آدرس زیر قابل دسترسی است:

 http://127.0.0.1:8000/static/css/bootstrap.min.css

به تعبیر دیگر تگ {% static %} از تنظیمات STATIC_URL  در settings.py برای تولید آدرس نهایی استفاده می‌کند. برای مثال اگر فایل‌های استاتیک در زیردامنۀ https://static.libogram.com/ قرار داشته باشد باید STATIC_URL=https://static.example.com/ باشد و سپس در فایل مربوط به قالب عبارت مقدار آدرس خارجیِ زیر را باز می‌گرداند.

https://static.libogram.com/css/bootstrap.min.css

همانطور که مشاهده می‌شود، صفحه اندکی تفاوت دارد:

حالا برای بهره‌گیری بیشتر از bootstrap فایل مربوط به قالب را به شکل زیر تغییر می‌دهیم:

و خروجی به شکل زیر تغییر می‌یابد:

 

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی: معرفی Django Admin 

مطلب قبلی: تست صفحۀ اصلی

بدون دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
ویوی تکمیل بازیابی پسورد

سلام ساخت فایل قالب: templates/password_reset_complete.html {% extends ‘base_accounts.html’ %} {% block title %}Password changed!{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-6 col-md-8 col-sm-10″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Password changed!</h3> <div class=”alert alert-success” role=”alert”> You have successfully changed your password! You may now proceed to log …

جنگو
ویوی تأیید بازیابی پسورد

سلام نوشتن فایل قالب به شکل زیر: templates/password_reset_confirm.html {% extends ‘base_accounts.html’ %} {% block title %} {% if validlink %} Change password for {{ form.user.username }} {% else %} Reset your password {% endif %} {% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-6 col-md-8 col-sm-10″> <div …

جنگو
ویوی شروع بازیابی پسورد

سلام نوشتن فایل قالب به ترتیب زیر: templates/password_reset_done.html {% extends ‘base_accounts.html’ %} {% block title %}Reset your password{% endblock %} {% block content %} <div class=”row justify-content-center”> <div class=”col-lg-4 col-md-6 col-sm-8″> <div class=”card”> <div class=”card-body”> <h3 class=”card-title”>Reset your password</h3> <p>Check your email for a link to reset your password. If …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.