0Pricing
Flask Academy · درس

ربط الأصول باستخدام url_for static

أشر إلى CSS وJS دون كتابة مسارات مباشرة.

ربط الأصول باستخدام url_for static درس مجاني في Flask Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flask Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flask Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Stop Hardcoding Paths

Writing /static/style.css by hand in every template feels easy, but it is fragile. Flask gives you url_for to build asset links for you. 🔧

The static Endpoint

Flask registers a built-in endpoint named static for your assets. You ask url_for for it instead of typing the raw path yourself.

Pass the Filename

Call url_for with the endpoint and a filename argument. Flask returns the correct URL pointing into your static folder.

url_for("static", filename="style.css")
# -> /static/style.css

Use It in a Template

Inside a Jinja2 template you wrap the call in double braces. The link tag then receives a generated, always-correct href.

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

Subfolders Work Too

Put the subpath right inside filename. Slashes in the value map straight onto folders within static.

url_for("static", filename="css/style.css")
# -> /static/css/style.css

Why Bother

If you ever change static_url_path, every url_for link updates itself. Hardcoded paths would all silently break instead.

Correct Prefixes for Free

When your app runs under a sub-path on a server, url_for adds the right prefix automatically, so links keep working everywhere.

Link Your JavaScript

The same call wires up scripts. Point the script tag at url_for and your JS loads from static without a hardcoded path.

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

Images the Same Way

Pictures follow the identical pattern. Feed the filename to url_for and drop the result into the img tag source.

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

Call It in Python Too

url_for is not template-only. Inside a view you can call url_for to compute an asset URL and return or log it.

from flask import url_for
link = url_for("static", filename="style.css")

One Habit to Keep

Make it a rule: every asset link goes through url_for. Future renames, prefixes, and cache busting then just work for you. ✅

Quick Check

You want a clean link to css/style.css inside static. Which call is right?

Recap: Linking Assets

You now use url_for with the static endpoint to build every asset link, so paths stay correct no matter how config changes. 🎯

الأسئلة الشائعة

هل درس «ربط الأصول باستخدام url_for static» مجاني؟

نعم — نص درس «ربط الأصول باستخدام url_for static» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flask Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Flask Academy 4 دروس في المجموع.

ماذا ستتعلم في «ربط الأصول باستخدام url_for static»؟

أشر إلى CSS وJS دون كتابة مسارات مباشرة. تتمرن على Flask Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flask Academy؟

لا تُشترط خبرة سابقة. Flask Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «ربط الأصول باستخدام url_for static»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flask Academy هذا؟

نعم. كل درس في Flask Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. اصطلاح مجلد static
  2. ربط الأصول باستخدام url_for static
  3. منع التخزين المؤقت بإصدارات الملفات
  4. الملفات الثابتة في بيئة الإنتاج
← العودة إلى Flask Academy