یادگیری فلاسک؛ بارگذاری فایل‌های استاتیک - بخش چهارم

در بخش قبلی یاد گرفتیم که چطور با تابع render_template صفحات HTML را نمایش دهیم. در این سری از آموزش فلاسک فایل‌های استاتیک مثل سی‌اس‌اس، جاوا اسکریپت و تصاویر را به صفحات HTML اضافه میکنیم. Flask برای این کار راه حلی اندیشیده است.


شروع

همانند بخش قبل که دایرکتوری templates شامل صفحات HTML ما بود، برای بارگذاری فایل‌های استاتیک نیز احتیاج است که دایرکتوری به نام static در ریشه برنامه فلاسک خود ایجاد کنیم.


بارگذاری فایل‌های سی‌اس‌اس

ابتدا دایرکتوری css را داخلی ریشه دایرکتوری static ایجاد و داخل آن فایل styles.css را قرار میدهیم (در اینجا فرض شده است که دولوپر آشنایی کافی با برای نوشتن سی‌اس‌اس را دارد و نوشتن سی‌اس‌اس برای فایل styles.css بر عهده دولوپر است).

body {
  background-color: #ffffff;
}


در فلاسک بهترین راه برای اینکه فایل‌های استاتیک را به فایل اچ‌تی‌ام‌ال خود پیوند دهیم؛ استفاده از تابع url_for است که آدرس فایل‌های استاتیک را به ما تحویل میدهد.

به فایل index.html از فایل دایرکتوری dashboard رفته و تَگ اچ‌تی‌ام‌ال زیر را در داخل تَگ <head> قرار دهید (این کار را همچنین برای todo نیز میشود تکرار کرد).

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

در خط فوق {{ }} بخشی از Jinja است که فلاسک از آن برای نمایش الگوهای HTML استفاده میکند. اگر با سینتکس Jinja آشنایی ندارید نگران نباشید، چون بسیار قابل درک و آسان است و به مرور زمان از آن استفاده خواهید کرد. بطور خلاصه؛ قبل از اینکه فایل‌های HTML در مرورگر نمایش داده شوند، فلاسک فایل‌های HTML را از طریق Jinja هر آنچه را که بین {{ }} مورد پردازش قرار میدهد. 

تابع url_for فوق به دو آرگومان نیاز دارد. اولین مقدار نام ریشه‌ای است که قبلا آن را static نامیدیم که فایلها / دایرکتوریهای استاتیک در آن قرار میگیرد و دومین مقدار آدرس و نام فایل مورد نظر را مشخص میکنیم که در اینجا styles/styles.css است.

حاصل پردازش Jinja بر روی خط فوق خروجی زیر است:

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


بارگذاری فایل‌های جاوا اسکریپت

همانند مرحله قبل ابتدا دایرکتوری scripts را در ریشه دایرکتوری static ساخته و فایلی با نام دلخواه با نام scripts.js داخل آن ایجاد میکنیم.

console.log("Hello, World!");

به فایل index.html رفته و تَگ زیر را درست قبل از بسته شدن تَگ </body> قرار دهید.

<script src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>


حاصل پردازش Jinja بر روی خط فوق خروجی زیر است:

<script src="/static/scripts/scripts.js"></script>

تا اینجا فایل index.html شما همانند زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles/styles.css') }}">
  </head>
  <body>

    <section class="hero">
      <div class="hero-body">
        <p class="title">
          Welcome to Dashboard
        </p>
      </div>
    </section>

    <script src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>

  </body>
</html>


بارگذاری تصاویر

همانطور که حدس زده‌اید بارگذاری فایل‌های چند رسانه‌ای نیز همانند مراحل قبل است؛ تنها کافیست دایرکتوری images را در ریشه static ساخته و تصاویر مورد نیاز را داخل آن قرار دهید.

قبل از هر چیزی ساختار برنامه فلاسک شما باید تا اینجا همانند زیر شده باشد:

.
├── app
│   ├── __init__.py
│   ├── static
│   │   ├── images
│   │   │   └── logo.jpg
│   │   ├── scripts
│   │   │   └── scripts.js
│   │   └── styles
│   │       └── styles.css
│   ├── templates
│   │   ├── dashboard
│   │   │   └── index.html
│   │   └── todo
│   │       └── index.html
│   └── views.py
├── app.py
└── requirements.txt

به فایل index.html رفته و تگ <img> را بصورت زیر داخل تِگ <body> قرار دهید:

<img src="{{ url_for('static', filename='images/logo.jpg') }}">

در آخر نیز فایل index.html همانند زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles/styles.css') }}">
  </head>
  <body>

    <section class="hero">
      <div class="hero-body">
        <p class="title">
          Welcome to Dashboard
        </p>
      </div>
    </section>

    <img src="{{ url_for('static', filename='images/logo.jpg') }}">

    <script src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>

  </body>
</html>

همانطور که یاد گرفتیم با استفاده از تابع url_for توانستیم آدرس فایلهای استاتیک خود را بدست آوریم تا آنها را در صفحه چاپ کنیم.