เชื่อมโยงแอสเซ็ตด้วย url_for static
อ้างอิง CSS และ JS โดยไม่เขียนเส้นทางตายตัว
เชื่อมโยงแอสเซ็ตด้วย url_for static เป็นบทเรียน Flask Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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.cssUse 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.cssWhy 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” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flask Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flask Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เชื่อมโยงแอสเซ็ตด้วย url_for static”
อ้างอิง CSS และ JS โดยไม่เขียนเส้นทางตายตัว คุณปฏิบัติ Flask Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flask Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flask Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “เชื่อมโยงแอสเซ็ตด้วย url_for static” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Flask Academy นี้ได้ไหม
ได้ บทเรียน Flask Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบโฟลเดอร์ static
- เชื่อมโยงแอสเซ็ตด้วย url_for static
- ป้องกันแคชด้วยเวอร์ชันไฟล์
- ความเป็นจริงของไฟล์สแตติกในการใช้งานจริง