مرکز آموزش میهن وب هاست

فایل‌های Static از دسته مواردی هستند که در پروژه تغییر نمی‌کنند؛ به‌عنوان‌ مثال، مواردی چون کدهای CSS ،JavaScript، تصاویر و فونت‌ها از نوع static هستند این در حالی است که فایل‌های Media معمولاً توسط کاربران آپلود می شوند و این موارد می‌توانند شامل تصاویر پروفایل یا اسناد و … باشند. بنابراین، باتوجه‌ به ماهیت این فایل‌ها، نوع مدیریت و محل نگهداری آنها در پروژه‌ها متفاوت خواهد بود.

فایل‌های Static عموما در دایرکتوری static/ قرار می‌گیرند. دایرکتوری static به‌ صورت پیش‌فرض در پروژه‌های فلسک وجود ندارد و باید آن را با ساختن یک دایرکتوری به همین نام در مسیر اصلی پروژه ایجاد نمائید.

توجه داشته باشید اگرچه این دایرکتوری وجود ندارد اما نام آن باید دقیقاً static باشد و اگر قصد تغییر نام این دایرکتوری (مثلاً به assets) را دارید باید در کد کانفیگ پروژه از دستور زیر استفاده کنید:

app = Flask(__name__, static_folder='assets')

به دلیل اینکه استفاده از فایل‌های استاتیک عموماً در فایل‌های HTML انجام می‌شود؛ باید در مسیر اصلی پروژه، دایرکتوری به نام templates نیز ایجاد نمائید. این دایرکتوری به طور پیش‌فرض توسط Flask شناسایی می‌ شود و برای نگهداری فایل‌های HTML (قالب‌ها) مورد استفاده قرار می‌ گیرد.

همان‌طور که در ابتدا گفته شد، فایل‌های Media معمولاً در زمان آپلود توسط کاربران ایجاد و مدیریت می‌شوند؛ بنابراین برای محتوای media نیز لازم است یک دایرکتوری به همین نام در مسیر اصلی پروژه ایجاد نمائید. در دایرکتوری media نیز مانند دایرکتوری static می‌توانید دسته‌بندی‌های مختلف از دایرکتوری‎‌ها را مدیریت کنید.

برای پیشگیری از مشکلات آینده در مسیر دهی، توصیه می‌ شود static و media را به‌ صورت زیر در فایل کانفیگ پروژه تعریف نمائید:

BASE_DIR = os.path.dirname(os.path.abspath(__file__))

STATIC_DIR = os.path.join(BASE_DIR, 'static')

MEDIA_DIR = os.path.join(BASE_DIR, 'media')

 این کار به طور خاص برای زمانی که می‌خواهید نام دایرکتوری را از نام‌ های پیش‌ فرض به نام دیگری تغییر دهید؛ بسیار کاربردی و مفید است. در فلسک برای فراخوانی فایل‌های استاتیک در فایل‌های HTML کافی است یکی از دو روش زیر را بکار گیرید.

1- فراخوانی مستقیم

<link rel="stylesheet" href="/static/css/style.css" />

توجه داشته باشید که حتماً باید قبل از نام فولدر static از / استفاده شود.

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

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />

این روش مزایای زیادی دارد و عمدتاً در پروژه‌های بزرگ مورد استفاده قرار می‌گیرد. تولید داینامیک URL، امنیت بیشتر و یکپارچگی با سایر قابلیت‌های Flask مانند blueprints از مزایای این روش است.

در ادامه با یک مثال، آموزش ارائه شده به‌ صورت عملی پیاده‌سازی شده است.

برای این کار templates ،static و media در مسیر اصلی پروژه ایجاد شده‌اند و ساختار پروژه به‌ صورت تصویر1 می باشد.

تصویر(1)

در فایل app.py نمونه کد به‌ صورت تصویر2 نوشته شده است:

تصویر(2)

برای styles.css نیز کد استایل موجود در تصویر3 انتخاب شده است:

تصویر(3)

در این پروژه از روش url_for استفاده شده و کد index.html طبق تصویر زیر درج گردیده است:

تصویر(4)

پس از فراخوانی نام دامنه در مرورگر، همان‌طور که انتظار می رفت خروجی شامل متن “Hello World” و یک تصویر example.jpg مطابق با تصویر زیر نمایش داده خواهد شد.

تصویر(5)