0Pricing
Python Academy · บทเรียน

เทมเพลตด้วย Jinja2

เรนเดอร์ HTML แบบไดนามิก

เทมเพลตด้วย Jinja2 เป็นบทเรียน Python Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Python Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทำไมต้องใช้แม่แบบ

การส่งคืน HTML จากสตริง Python จะจัดการได้ยุ่งยากอย่างรวดเร็ว แม่แบบช่วยเก็บ HTML ไว้ในไฟล์แยกต่างหาก และเติมข้อมูลเมื่อเรนเดอร์ Flask ใช้เครื่องมือ Jinja2

from flask import Flask, render_template
app = Flask(__name__)
# render_template loads a file from the templates/ folder
print('Jinja2 powers Flask templates')

โฟลเดอร์ templates

Flask จะค้นหาแม่แบบในโฟลเดอร์ชื่อ templates/ ซึ่งอยู่ถัดจากแอปของคุณ ไฟล์มักลงท้ายด้วย .html

# project/
#   app.py
#   templates/
#     index.html
print('Templates live in templates/')

render_template

render_template('index.html') โหลดแม่แบบและส่งคืน HTML ที่เรนเดอร์แล้วเป็นการตอบกลับ

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')
print('home renders index.html')

การส่งข้อมูล

ส่งตัวแปรเป็นอาร์กิวเมนต์ที่ระบุชื่อ จากนั้นแม่แบบจะสามารถแสดงตัวแปรเหล่านั้นได้

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name='Alice')
print('name=Alice is sent to the template')

การแสดงตัวแปร

ในแม่แบบ {{ name }} จะแสดงตัวแปร วงเล็บปีกกาคู่เป็นไวยากรณ์นิพจน์ของ Jinja2

# index.html
# <h1>Hello, {{ name }}!</h1>
print('Double braces output a value')

คำสั่ง If

คำสั่งควบคุมของ Jinja2 ใช้ {% %} บล็อก if จะแสดงเนื้อหาตามเงื่อนไข

# {% if user %}
#   <p>Welcome back!</p>
# {% else %}
#   <p>Please log in.</p>
# {% endif %}
print('{% if %} branches the markup')

ลูป For

วนซ้ำผ่านรายการด้วย {% for item in items %} เพื่อเรนเดอร์ส่วนแสดงผลที่ซ้ำกัน เช่น รายการสินค้า

# <ul>
# {% for item in items %}
#   <li>{{ item }}</li>
# {% endfor %}
# </ul>
print('{% for %} repeats markup per item')

ตัวกรอง

ตัวกรองจะแปลงค่าด้วยเครื่องหมายไปป์ เช่น {{ name|upper }} จะแปลงค่าเป็นตัวพิมพ์ใหญ่ ตัวกรองที่มีมาให้ ได้แก่ length, default และ title

# {{ name|upper }}        -> ALICE
# {{ items|length }}      -> count
# {{ bio|default('N/A') }}
print('Filters transform values with |')

การสืบทอดแม่แบบ

แม่แบบพื้นฐานกำหนดโครงหน้าด้วยตำแหน่งแทนที่ {% block %} แม่แบบลูกใช้ {% extends %} เพื่อสืบทอดแม่แบบดังกล่าวและเติมเนื้อหาในบล็อก

# base.html
# <body>{% block content %}{% endblock %}</body>
#
# page.html
# {% extends 'base.html' %}
# {% block content %}<p>Hi</p>{% endblock %}
print('extends + block share a layout')

การหลีกอักขระอัตโนมัติ

Jinja2 จะหลีกอักขระ HTML ในตัวแปรโดยอัตโนมัติ เพื่อป้องกันการโจมตีแบบสคริปต์ข้ามเว็บไซต์ ค่าที่เป็น <script> จะแสดงเป็นข้อความและไม่ถูกเรียกใช้

# If name = '<b>x</b>', {{ name }} renders the literal text
# Auto-escaping is on by default for safety
print('Auto-escaping prevents XSS')

การเชื่อมโยงด้วย url_for

ภายในแม่แบบ คุณยังเรียกใช้ url_for ได้ โดยมักใช้กับไฟล์คงที่ เช่น {{ url_for('static', filename='style.css') }}

# <link rel='stylesheet'
#   href="{{ url_for('static', filename='style.css') }}">
print('url_for works inside templates too')

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเรื่อง Jinja2 ของคุณ

สรุปทบทวน

คุณได้เรียนรู้การใช้แม่แบบ Jinja2

  • render_template() ใช้เรนเดอร์ไฟล์จาก templates/
  • {{ }} ใช้แสดงค่า ส่วน {% %} ใช้เรียกใช้ if/for
  • ตัวกรองอย่าง |upper ใช้แปลงค่า
  • extends + block ช่วยให้สืบทอดโครงร่างได้
  • การหลีกอักขระอัตโนมัติช่วยป้องกัน XSS

คำถามที่พบบ่อย

บทเรียน “เทมเพลตด้วย Jinja2” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เทมเพลตด้วย Jinja2” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Python Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เทมเพลตด้วย Jinja2”

เรนเดอร์ HTML แบบไดนามิก คุณปฏิบัติ Python Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Python Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Python Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “เทมเพลตด้วย Jinja2” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Python Academy นี้ได้ไหม

ได้ บทเรียน Python Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เส้นทางและวิว
  2. เทมเพลตด้วย Jinja2
  3. ฟอร์มและข้อมูลคำขอ
  4. การสร้างปลายทาง REST
← กลับไปที่ Python Academy