در Flask، فایلهای استاتیک (CSS, JS, تصاویر و غیره) معمولاً در پوشهای به نام static قرار میگیرند. Flask بهصورت پیشفرض پوشه static/ را به عنوان مسیر فایلهای استاتیک میشناسد و این فایلها از طریق URL /static/filename در دسترس هستند.
تنظیم پوشه static
اگر بخواهید نام یا مسیر پوشه استاتیک را تغییر دهید، میتوانید هنگام ایجاد اپلیکیشن Flask، آن را مشخص کنید:
from flask import Flask
# default: static_folder="static"
app = Flask(__name__, static_folder="assets") # پوشه دلخواه برای استاتیک
در این مثال، همه فایلهای استاتیک داخل پوشه assets/ قرار میگیرند و از طریق /static/filename قابل دسترسی هستند مگر اینکه مسیر URL را هم تغییر دهید:
app = Flask(__name__, static_folder="assets", static_url_path="/assets")
استفاده از فایلهای استاتیک در قالبها
برای دسترسی به فایلهای CSS، JS یا تصویر در قالب Jinja2، از تابع url_for('static', filename='path/to/file') استفاده میکنیم:
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>نمونه استاتیک</title>
<!-- لینک به فایل CSS داخل پوشه static -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>سلام Flask!</h1>
<!-- استفاده از فایل JS -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
استفاده از CDN
میتوانید به جای فایل محلی، از لینکهای CDN برای CSS و JS استفاده کنید:
<!-- استفاده از Bootstrap از CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
استایل داخل کد HTML
همچنین میتوانید استایلها را به صورت داخلی داخل قالب تعریف کنید:
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
جمعبندی:
- فایلهای استاتیک معمولاً داخل پوشه
static/قرار میگیرند. - برای تغییر مسیر پیشفرض میتوان
static_folderوstatic_url_pathرا هنگام ایجاد اپلیکیشن مشخص کرد. - در قالبها از
url_for('static', filename='...')برای دسترسی به فایلها استفاده میکنیم. - میتوان از CDN یا استایل داخلی داخل قالب هم استفاده کرد.