איך להשתמש בתבניות ביישום של Flask

Flask Python

המחבר בחר את קרן המקור פתוח וחופשי לקבלת תרומה כחלק מתוכנית כתיבה למען תרומות.

מבוא

Flask הוא מסגרת אינטרנט קלת משקל בפייתון המספקת כלים ותכונות שימושיים ליצירת יישומי אינטרנט בשפת הפייתון.

בפיתוח יישום אינטרנט, חשוב להפריד בין לוגיקת העסק לבין לוגיקת הייצוג. לוגיקת העסק היא מה שמטפל בבקשות מהמשתמש ומדבר עם בסיס הנתונים כדי לבנות תגובה מתאימה. לוגיקת הייצוג היא איך הנתונים מוצגים למשתמש, בדרך כלל באמצעות קבצי HTML כדי לבנות את המבנה הבסיסי של דף התגובה באינטרנט, וסגנונות CSS לעיצוב רכיבי HTML. לדוגמה, ביישום מדיה חברתית, ייתכן שיהיה לך שדה שם משתמש ושדה סיסמה שניתן להציג רק כאשר המשתמש לא מחובר. אם המשתמש מחובר, אתה מציג כפתור התנתקות במקום. זו לוגיקת הייצוג. אם משתמש מקליד את שמו והסיסמה שלו, אתה יכול להשתמש ב-Flask לביצוע לוגיקת עסק: אתה מחלץ את הנתונים (שם המשתמש והסיסמה) מהבקשה, מחבר את המשתמש אם האישורים נכונים או מגיב עם הודעת שגיאה. איך הודעת השגיאה מוצגת תטופל על ידי לוגיקת הייצוג.

ב-Flask, ניתן להשתמש בשפת התבניות Jinja כדי לרנדר תבניות HTML. תבנית template היא קובץ שיכול להכיל גם תוכן קבוע וגם דינמי. כאשר משתמש מבקש משהו מהיישום שלך (כמו דף הבית, או דף כניסה), Jinja מאפשרת לך להגיב עם תבנית HTML שבה תוכל להשתמש בתכונות רבות שאינן זמינות ב-HTML הסטנדרטי, כמו משתנים, פקודות if, לולאות for, פילטרים וירושה של תבניות. תכונות אלו מאפשרות לך לכתוב ביעילות דפי HTML קלים לתחזוקה. Jinja גם מבצע באופן אוטומטי מניעה של HTML כדי למנוע מצבי Cross-Site Scripting (XSS) פיגועים.

במדריך זה, תבנה יישום אינטרנט קטן שמרנדר מספר קבצי HTML. תשתמש במשתנים כדי להעביר נתונים מהשרת לתבניות. ירושת התבניות תעזור לך להימנע מחזרה. תשתמש בהגיון בתבניות כמו תנאים ולולאות, תשתמש בפילטרים כדי לשנות טקסט, ותשתמש בסט הכלים Bootstrap כדי לעצב את היישום שלך.

דרישות מוקדמות

סביבת תכנות Python 3 מקומית. עקוב אחר המדריך עבור ההפצה שלך בסדרת כיצד להתקין ולהגדיר סביבת תכנות מקומית עבור Python 3. במדריך זה נקרא לתיקיית הפרויקט שלנו flask_app.
Flask מותקן בסביבת התכנות שלך כפי שנכון בשלב 1 של כיצד ליצור את היישום הרשתי הראשון שלך באמצעות Flask ו-Python.
הבנה של מושגי בסיס של Flask, כגון נתיבים ופונקציות מצגת. אם אינך מכיר Flask, עיין ב-כיצד ליצור את היישום הראשון שלך באינטרנט באמצעות Flask ו-Python.
הבנה של מושגי בסיס של HTML. תוכל לעיין בסדרת המדריכים שלנו כיצד לבנות אתר עם HTML לידע רקע.

שלב 1 — עיבוד תבנית ושימוש במשתנים

הקפד להפעיל את הסביבה שלך ולהתקין את Flask, ואז תוכל להתחיל לבנות את היישום שלך. הצעד הראשון הוא להציג הודעה שמברכת מבקרים בדף הבית. תשתמש בפונקציה העזר render_template() של Flask כדי לשרת תבנית HTML כתגובה. תראה גם כיצד להעביר משתנים מצד היישום שלך לתבניות.

ראשית, בתיקיית flask_app שלך, פתח קובץ בשם app.py לעריכה. השתמש ב-nano או בעורך הטקסט המועדף עליך:

nano app.py

הוסף את הקוד הבא בתוך קובץ app.py:

flask_app/app.py


from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello():
    return render_template('index.html')

שמור וסגור את הקובץ.

בבלוק הקוד הזה, אתה מייבא את המחלקה Flask ואת הפונקציה render_template() מהחבילה flask. אתה משתמש במחלקה Flask כדי ליצור מופע יישום Flask בשם app. לאחר מכן אתה מגדיר פונקציית תצוגה (שהיא פונקציית Python שמחזירה תגובת HTTP) בשם hello() באמצעות הדקורטור app.route(), שממיר פונקציה רגילה לפונקציית תצוגה. פונקציית התצוגה הזו משתמשת בפונקציה render_template() כדי לעבד קובץ תבנית בשם index.html.

הבא, תצטרך ליצור את קובץ התבנית index.html בספרייה בשם templates בתוך הספרייה flask_app שלך. Flask מחפש תבניות בספרייה templates directory, שנקראת templates, כך שהשם חשוב. ודא שאתה בתוך הספרייה flask_app והרץ את הפקודה הבאה כדי ליצור את הספרייה templates:

mkdir templates

לאחר מכן, פתח קובץ בשם index.html בתוך הספרייה templates לעריכה. השם index.html כאן אינו שם סטנדרטי שנדרש; אתה יכול לקרוא לו home.html או homepage.html או כל דבר אחר שתרצה:

nano templates/index.html

הוסף את קוד ה-HTML הבא בתוך קובץ index.html:

flask_app/templates/index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
</body>
</html>

כאן, הגדרת כותרת, הוספת הודעת Hello World! ככותרת H1, ויצרת הודעת Welcome to FlaskApp! ככותרת H2.

שמור וסגור את הקובץ.

בעודך בספרייה flask_app עם הסביבה הווירטואלית שלך מופעלת, הודע ל-Flask על היישום (app.py במקרה שלך) באמצעות משתנה הסביבה FLASK_APP, והגדר את משתנה הסביבה FLASK_ENV ל-development כדי להפעיל את היישום במצב פיתוח ולקבל גישה לדבאגר. השתמש בפקודות הבאות כדי לעשות זאת (ב-Windows, השתמש ב-set במקום export):

export FLASK_APP=app
export FLASK_ENV=development

לאחר מכן, הפעל את היישום באמצעות הפקודה flask run:

flask run

עם שרת הפיתוח פועל, בקר ב-URL הבא באמצעות הדפדפן שלך:

http://127.0.0.1:5000/

תראה שהכותרת של הדף מוגדרת כ-FlaskApp, ושני הכותרות מוצגים כ-HTML.

ביישומי אינטרנט, לעתים קרובות עליך להעביר נתונים מקבצי ה-Python של היישום שלך לתבניות ה-HTML שלך. כדי להדגים כיצד לעשות זאת ביישום זה, תעביר משתנה המכיל את התאריך והשעה הנוכחיים ב-UTC לתבנית ה-index, ותציג את ערך המשתנה בתבנית.

השאר את השרת פועל, ופתח את קובץ app.py לעריכה בטרמינל חדש:

nano app.py

ייבא את המודול datetime מספריית הסטנדרט של Python וערוך את הפונקציה index() כך שהקובץ יראה כך:

flask_app/app.py

import datetime
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello():
    return render_template('index.html', utc_dt=datetime.datetime.utcnow())

שמור וסגור את הקובץ.

כאן ייבאת את המודול datetime והעברת משתנה בשם utc_dt לתבנית index.html עם הערך של datetime.datetime.utcnow(), שהוא התאריך והשעה הנוכחיים ב-UTC.

הבא, כדי להציג את ערך המשתנה בדף ה-index, פתח את קובץ index.html לעריכה:

nano templates/index.html

ערוך את הקובץ כך:

flask_app/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
    <h3>{{ utc_dt }}</h3>
</body>
</html>

שמור וסגור את הקובץ.

הוספת כותרת H3 עם המפריד המיוחד {{ ... }} כדי להדפיס את ערך המשתנה utc_dt.

פתח את הדפדפן שלך ובקר בדף ה-index:

http://127.0.0.1:5000/

תראה דף דומה לתמונה הבאה:

כעת יצרת עמוד כללי עם תבנית HTML באפליקציית Flask שלך, הרכיבת תבנית, והעברת והצגת ערך משתנה. השלב הבא יעזור לך להימנע מחזרה קוד על ידי שימוש בהשכלה של תבניות.

שלב 2 — שימוש בהשכלה של תבנית

בשלב זה, תיצור תבנית בסיסית עם תוכן שניתן לחלוק עם תבניות אחרות שלך. תערוך את תבנית הכללי שלך כדי שתירש תבנית זו. אחר כך, תיצור עמוד חדש שישמש כעמוד "אודות" של האפליקציה שלך, איפה שמשתמשים יוכלו למצוא מידע נוסף אודות האפליקציה שלך.

תבנית בסיסית מכילה מרכיבים HTML המשותפים בדרך כלל לכל התבניות האחרות, כמו כותרת האפליקציה, סרגלי ניווט, וכותרות.

קודם כל, פתח קובץ חדש בשם base.html לעריכה בתוך ספריית התבניות שלך:

nano templates/base.html

כתוב את הקוד הבא בתוך קובץ base.html שלך:

flask_app/templates/base.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

שמור וסגור את הקובץ.

רוב הקוד בקובץ זה הוא HTML סטנדרטי, כותרת, קצת סגנון לקישורי הניווט, סרגל ניווט עם שני קישורים, אחד לעמוד הכללי ואחד לעמוד "אודות" שטרם נוצר, ו<div> עבור התוכן של העמוד. (הקישורים עדיין לא עובדים; השלב הבא ידגים כיצד לקשר בין עמודים).

עם זאת, החלקים המודגשים הבאים הם ספציפיים למנוע התבנית Jinja:

{% block title %} {% endblock %}: בלוק שמשמש כמקום שמור לכותרת. לאחר מכן תשתמש בו בתבניות אחרות כדי לספק כותרת מותאמת אישית לכל דף ביישומן שלך מבלי לכתוב מחדש את כל מדור ה-<head> בכל פעם.
{% block content %} {% endblock %}: בלוק נוסף שיוחלף בתוכן בהתאם לתבנית הילד (תבנית שיורשת מ-base.html) שתחליף אותו.

עכשיו כשיש לך תבנית בסיס, אתה יכול למנף אותה באמצעות ירושה. פתח את קובץ index.html:

nano templates/index.html

ואז החלף את תוכנו בזה:

flask_app/templates/index.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Index {% endblock %}</h1>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
    <h3>{{ utc_dt }}</h3>
{% endblock %}

כאן, אתה משתמש בתגית {% extends %} כדי לרשת מהתבנית base.html. אז אתה מרחיב אותה על ידי החלפת הבלוק content בתבנית הבסיס עם מה שבתוך הבלוק content בקוד הקודם.

בלוק התוכן הזה מכיל תגית <h1> עם הטקסט Index בתוך בלוק כותרת, שבתורו מחליף את בלוק הכותרת המקורי בתבנית base.html עם הטקסט Index כך שהכותרת המלאה הופכת להיות Index - FlaskApp. בדרך זו, אתה יכול להימנע מחזרה של אותו טקסט פעמיים, מכיוון שהוא פועל גם ככותרת לדף וגם ככותרת שמופיעה מתחת לסרגל הניווט שנרשם מהתבנית הבסיסית.

אז יש לך עוד כמה כותרות: כותרת <h1> אחת עם הטקסט Hello World!, כותרת <h2>, וכותרת <h3> המכילה את הערך של המשתנה utc_dt.

רשת התבניות נותנת לך את האפשרות לעשות שימוש חוזר בקוד ה-HTML שיש לך בתבניות אחרות (base.html במקרה זה) מבלי לחזור עליו בכל פעם שהוא נדרש.

שמור וסגור את הקובץ ורענן את דף האינדקס בדפדפן שלך. הדף יראה כך:

הבא, אתה תיצור את דף האודות. פתח את הקובץ app.py כדי להוסיף ניתוב חדש:

nano app.py

הוסף את הניתוב הבא בסוף הקובץ:

flask_app/app.py


# ...
@app.route('/about/')
def about():
    return render_template('about.html')

כאן אתה משתמש בפונקציית הדקורטור app.route() כדי ליצור פונקציית תצוגה בשם about(). בתוכה, אתה מחזיר את התוצאה של קריאה לפונקציה render_template() עם שם קובץ התבנית about.html כפרמטר.

שמור וסגור את הקובץ.

פתח קובץ תבנית בשם about.html לעריכה:

nano templates/about.html

הוסף את הקוד הבא לקובץ:

flask_app/templates/about.html


{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} About {% endblock %}</h1>
    <h3>FlaskApp is a Flask web application written in Python.</h3>
{% endblock %}

כאן, אתה יורש מהתבנית הבסיסית באמצעות התג extends, מחליף את בלוק ה-content של התבנית הבסיסית עם תג <h1> שמשמש גם ככותרת העמוד, ומוסיף תג <h3> עם מידע כלשהו על היישום.

שמור וסגור את הקובץ.

עם השרת המפתח פועל, בקר בכתובת ה-URL הבאה באמצעות הדפדפן שלך:

http://127.0.0.1:5000/about

תראה עמוד הדומה למה שבא להלן:

שים לב כיצד סרגל הניווט וחלק מהכותרת מושארים מהתבנית הבסיסית.

כעת יצרת תבנית בסיסית והשתמשת בה בדף הבית ובדף האודות כדי להימנע מחזרה קוד. הקישורים בסרגל הניווט לא עושים כלום בשלב זה. בשלב הבא, תלמד כיצד לקשר בין דפים בתבניות שלך על ידי תיקון קישורי סרגל הניווט.

שלב 3 — קישור בין דפים

בשלב זה, תלמד כיצד לקשר בין דפים בתבניות שלך באמצעות פונקציית העוזר url_for(). תוסיף שני קישורים לסרגל הניווט בתבנית הבסיסית שלך, אחד לדף הבית, ואחד לדף האודות.

ראשית, פתח את תבנית הבסיס שלך לעריכה:

nano templates/base.html

ערוך את הקובץ כך:

flask_app/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('hello') }}">FlaskApp</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

כאן, אתה משתמש בפונקציה מיוחדת url_for() שתחזיר את ה-URL לפונקציית התצוגה שאתה נותן לה. הקישור הראשון מקשר לנתיב של פונקציית התצוגה hello() (שהיא דף הבית). הקישור השני מקשר לנתיב של פונקציית התצוגה about(). שים לב שאתה מעביר את שם פונקציית התצוגה, לא הנתיב (/ או /about).

שימוש בפונקציית url_for() לבניית URLs עוזר לך לנהל URLs טוב יותר. אם תקשטט URLs, הקישורים שלך יישברו אם תערוך את הנתיבים. עם url_for() אתה יכול לערוך נתיבים ולהבטיח שהקישורים יעבדו כצפוי. פונקציית url_for() גם דואגת לדברים אחרים כמו ביטול תווים מיוחדים.

שמור וסגור את הקובץ.

עכשיו עבור לדף הבית ונסה את הקישורים בסרגל הניווט. תראה שהם עובדים כצפוי.

שיעור זה לימד אותך כיצד להשתמש בפונקציה url_for() כדי לקשר למסלולים אחרים בתבניות שלך. הלאה, תוסיף כמה משפטים מותנים כדי לשלוט במה שמוצג בתבניות שלך בהתאם לתנאים שאתה קובע, ותשתמש בלולאות for בתבניות שלך כדי להציג פריטים ברשימה.

שלב 4 — שימוש במותנים ובלולאות

בשלב זה, תשתמש במשפטי if בתבניות שלך כדי לשלוט במה להציג בהתאם לתנאים מסוימים. תשתמש גם בלולאות for כדי לעבור על רשימות של Python ולהציג כל פריט ברשימה. תוסיף דף חדש שמציג תגובות ברשימה. תגובות עם מספר אינדקס זוגי יהיו עם רקע כחול, ותגובות עם מספר אינדקס אי-זוגי יוצגו עם רקע אפור.

ראשית, תיצור מסלול עבור דף התגובות. פתח את קובץ app.py שלך לעריכה:

nano app.py

הוסף את המסלול הבא בסוף הקובץ:

flask_app/app.py


# ...

@app.route('/comments/')
def comments():
    comments = ['This is the first comment.',
                'This is the second comment.',
                'This is the third comment.',
                'This is the fourth comment.'
                ]

    return render_template('comments.html', comments=comments)

במסלול למעלה, יש לך רשימה של Python בשם comments שמכילה ארבעה פריטים. (התגובות הללו בדרך כלל יבואו ממסד נתונים בתרחיש עולם אמיתי ולא יהיו קשורות כמו שעשית כאן.) אתה מחזיר קובץ תבנית בשם comments.html בשורה האחרונה, ומעביר משתנה בשם comments המכיל את הרשימה לקובץ התבנית.

שמור וסגור את הקובץ.

לאחר מכן, פתח קובץ comments.html חדש בתוך ספריית templates לעריכה:

nano templates/comments.html

הוסף את הקוד הבא לקובץ:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
        <div style="padding: 10px; background-color: #EEE; margin: 20px">
            <p style="font-size: 24px">{{ comment }}</p>
        </div>
        {% endfor %}
    </div>
{% endblock %}

כאן, אתה מרחיב את התבנית base.html ומחליף את תוכן הבלוק content. ראשית, אתה משתמש בכותרת <h1> שגם משמשת ככותרת העמוד.

אתה משתמש בלולאת Jinja for בשורה {% for comment in comments %} כדי לעבור על כל הערה ברשימת comments (שמאוחסנת במשתנה comment). אתה מציג את ההערה בתג <p style="font-size: 24px">{{ comment }}</p> באותו אופן שבו תמיד מציגים משתנה ב-Jinja. אתה מציין את סוף הלולאה באמצעות המילת המפתח {% endfor %}. זה שונה מאופן בניית לולאות for בפייתון כי אין כאן כניסה מיוחדת בתבניות Jinja.

שמור וסגור את הקובץ.

עם שרת הפיתוח פועל, פתח את הדפדפן שלך ובקר בדף ההערות:

http://127.0.0.1:5000/comments

תראה עמוד הדומה למה שבא להלן:

עכשיו תשתמש בהצהרת התנאי if בתבניות שלך על ידי הצגת הערות עם מספר אינדקס אי-זוגי עם רקע אפור, והערות עם מספר אינדקס זוגי עם רקע כחול.

פתח את קובץ התבנית comments.html שלך לעריכה:

nano templates/comments.html

ערוך אותו להיראות כדלקמן:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index % 2 == 0 %}
                {% set bg_color = '#e6f9ff' %}
            {% else %}
                {% set bg_color = '#eee' %}
            {% endif %}

            <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

בעריכה זו, הוספת פקודת if בשורה {% if loop.index % 2 == 0 %}. המשתנה loop הוא משתנה מיוחד ב-Jinja המאפשר גישה למידע על הלולאה הנוכחית. כאן אתה משתמש ב-loop.index כדי לקבל את האינדקס של הפריט הנוכחי, שמתחיל מ-1, לא כמו ברשימות של Python שמתחילות מ-0.

הפקודת if בודקת האם האינדקס הוא זוגי באמצעות אופרטור ה-%. היא בודקת את השארית מחלוקת האינדקס ב-2; אם השארית היא 0 זה אומר שהאינדקס הוא זוגי, אחרת האינדקס הוא אי-זוגי. אתה משתמש בתגית {% set %} כדי להכריז על משתנה בשם bg_color. אם האינדקס הוא זוגי, אתה מגדיר אותו לצבע כחול כהה, אחרת, אם האינדקס הוא אי-זוגי, אתה מגדיר את המשתנה bg_color לאפור. אז אתה משתמש במשתנה bg_color כדי לקבוע צבע רקע לתגית <div> שמכילה את התגובה. מעל טקסט התגובה, אתה משתמש ב-loop.index כדי להציג את האינדקס הנוכחי בתגית <p>.

שמור וסגור את הקובץ.

פתח את הדפדפן שלך ובקר בדף התגובות:

http://127.0.0.1:5000/comments

תראה את דף התגובות החדש שלך:

זו היתה הדגמה של איך להשתמש בפקודת if. אבל אתה יכול גם להשיג את אותה השפע על ידי שימוש בעוזר המיוחד loop.cycle() של Jinja. כדי להדגים זאת, פתח את הקובץ comments.html:

nano templates/comments.html

ערוך את זה כך:

flask_app/templates/comments.html


{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            <div style="padding: 10px;
                        background-color: {{ loop.cycle('#EEE', '#e6f9ff') }};
                        margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

כאן, הסרת את הפקודה if/else והשתמשת בסייעת loop.cycle('#EEE', '#e6f9ff') כדי לעבור בין שתי הצבעים. הערך של background-color יהיה #EEE פעם אחת ו-#e6f9ff פעם אחרת.

שמור וסגור את הקובץ.

פתח את דף התגובות בדפדפן שלך, רענן אותו, ותראה שזה יוצר את אותו האפקט כמו הפקודה if.

אפשר להשתמש בפקודות if למספר מטרות, כולל שליטה במה שמופיע בדף. לדוגמה, כדי להציג את כל התגובות חוץ מהשנייה, אפשר להשתמש בפקודת if עם התנאי loop.index != 2 כדי לפסול את התגובה השנייה.

פתח את תבנית התגובות:

nano templates/comments.html

וערוך אותה כך:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment }}</p>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

כאן, אתה משתמש ב-{% if loop.index != 2 %} כדי להציג רק את התגובות שאינן עם האינדקס 2, כלומר כל התגובות חוץ מהשנייה. אתה גם משתמש בערך קשיח לצבע הרקע במקום בסייעת loop.cycle() כדי לפשט, ושאר הדברים לא השתנו. אתה סוגר את הפקודה if באמצעות {% endif %}.

שמור וסגור את הקובץ.

רענן את דף התגובות ותראה שהתגובה השנייה אינה מוצגת.

עכשיו אתה צריך להוסיף קישור שמביא את המשתמשים לדף התגובות בסרגל הניווט. פתח את התבנית הבסיסית לעריכה:

nano templates/base.html

ערוך את תוכן התג <nav> על ידי הוספת קישור <a> חדש לתוכו:

flask_app/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('hello') }}">FlaskApp</a>
        <a href="{{ url_for('comments') }}">Comments</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

כאן, אתה משתמש בסייעת url_for() כדי לקשר לפונקציית התצוגה comments().

שמור וסגור את הקובץ.

כעת, סרגל הניווט יכיל קישור חדש המקשר לדף התגובות.

השתמשת בהצהרות if בתבניות שלך כדי לשלוט במה להציג בהתאם לתנאים מסוימים. השתמשת בלולאות for כדי לעבור על רשימות פייתון ולהציג כל פריט ברשימה, ולמדת על המשתנה המיוחד loop בג'ינג'ה. הבא, תשתמש במסננים של ג'ינג'ה כדי לשלוט באופן ההצגה של נתונים משתנים.

שלב 5 — שימוש במסננים

בשלב זה, תלמד כיצד להשתמש במסננים של ג'ינג'ה בתבניות שלך. תשתמש במסנן upper כדי להמיר תגובות שהוספת בשלב הקודם לאותיות גדולות, תשתמש במסנן join כדי לחבר רצף של מחרוזות למחרוזת אחת, ותלמד כיצד להציג קוד HTML מהימן מבלי לברוח אותו באמצעות המסנן safe.

ראשית, תמיר את התגובות בדף התגובות לאותיות גדולות. פתח את התבנית comments.html לעריכה:

nano templates/comments.html

ערוך אותו כך:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

כאן, הוספת את הupper מסנן באמצעות סמל הצינור (|). זה ישנה את הערך של המשתנה comment לאותיות גדולות.

שמור וסגור את הקובץ.

עם שרת הפיתוח פועל, פתח את דף התגובות עם הדפדפן שלך:

http://127.0.0.1:5000/comments

אתה יכול לראות שהתגובות כולן באותיות גדולות לאחר החלת המסנן.

מסננים יכולים גם לקבל ארגומנטים בסוגריים. כדי להדגים זאת, תשתמש במסנן join כדי לחבר את כל התגובות ברשימת comments.

פתח את תבנית התגובות:

nano templates/comments.html

ערוך אותה להיראות כך:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            <p>{{ comments | join(" | ") }}</p>
        </div>
    </div>
{% endblock %}

כאן הוספת תג <hr> ותג <div> שבו אתה מחבר את כל התגובות ברשימת comments באמצעות המסנן join().

שמור וסגור את הקובץ.

רענן את דף התגובות ותראה דף דומה לזה:

כפי שאתה יכול לראות, רשימת comments מוצגת עם התגובות מופרדות באמצעות סמל צינור, שזה מה שהעברת למסנן join().

פילטר חשוב נוסף הוא פילטר safe, המאפשר לך לרנדר HTML מהותר בדפדפן. כדי להמחיש זאת, תוסיף טקסט שמכיל תג HTML לתבנית התגובות שלך באמצעות מפריד {{ }} של Jinja. בתרחיש אמיתי, זה יבוא כמשתנה מהשרת. לאחר מכן תערוך את הארגומנט join() להיות התג <hr> במקום הסמל מיכוי.

פתח את תבנית התגובות:

nano templates/comments.html

ערוך אותו כך:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            {{ "<h1>COMMENTS</h1>" }}
            <p>{{ comments | join(" <hr> ") }}</p>
        </div>
    </div>
{% endblock %}

כאן, הוספת את הערך "<h1>COMMENTS</h1>" ושינית את הארגומנט להצטרפות לתג <hr>.

שמור וסגור את הקובץ.

רענן את דף התגובות ותראה דף דומה למה שלהלן:

כפי שאתה יכול לראות, התגי HTML לא נרנדו. זוהי תכונת בטיחות ב-Jinja, כי חלק מתגי ה-HTML יכולים להיות מזיקים ועלולים לגרום להתקפת Cross Site Scripting (XSS). עליך לאפשר רק HTML מהותר להיות מרונד בדפדפן.

כדי לרנדר את תגי ה-HTML שלמעלה, פתח את קובץ תבנית התגובות:

nano templates/comments.html

ערוך אותו על ידי הוספת פילטר safe:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            {{ "<h1>COMMENTS</h1>" | safe }}
            <p>{{ comments | join(" <hr> ") | safe }}</p>
        </div>
    </div>
{% endblock %}

אתה יכול לראות שאתה יכול גם לשרשר פילטרים כמו בשורה <p>{{ comments | join(" <hr> ") | safe }}</p>. כל פילטר מוחל על תוצאת הפילטור הקודם.

שמור וסגור את הקובץ.

רענן את דף התגובות ותראה שתגי ה-HTML מרונדים כפי שציפית:

אזהרה: שימוש במסנן safe על HTML ממקורות נתונים לא ידועים עשוי לפתוח את היישום שלך להתקפות XSS. אל תשתמש בו אלא אם כן ה-HTML שאתה מעבד הוא ממקור מהימן.

למידע נוסף, עיין ברשימת המסננים המובנים של Jinja.

כעת למדת כיצד להשתמש במסננים בתבניות Jinja שלך כדי לשנות את ערכי המשתנים. הלאה, תשלב את ספריית Bootstrap כדי לעצב את היישום שלך.

שלב 6 — שילוב Bootstrap

בשלב זה, תלמד כיצד להשתמש בספריית Bootstrap כדי לעצב את היישום שלך. תוסיף שורת ניווט של Bootstrap בתבנית הבסיס שתופיע בכל הדפים שיורשים מתבנית הבסיס.

ספריית Bootstrap עוזרת לך לעצב את היישום שלך כך שהוא יהיה מראה מרשים יותר. היא תעזור לך גם לשלב דפי אינטרנט תגובתיים ביישום האינטרנט שלך כך שהוא יעבוד היטב על דפדפני סמארטפון מבלי לכתוב את הקוד העצמאי שלך של HTML, CSS ו-JavaScript כדי להשיג מטרות אלו.

כדי להשתמש ב-Bootstrap, תצטרך להוסיף אותו לתבנית הבסיס כך שתוכל להשתמש בו בכל התבניות האחרות.

פתח את תבנית base.html שלך לעריכה:

nano templates/base.html

ערוך אותה כך שתראה כמו הבא:

flask_app/templates/base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>{% block title %} {% endblock %} - FlaskApp</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('hello') }}">FlaskApp</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('comments') }}">Comments</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('about') }}">About</a>
            </li>
        </ul>
        </div>
    </div>
    </nav>
    <div class="container">
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

  </body>
</html>

רוב הקוד שלמעלה הוא קוד מתוך תבנית Bootstrap הנדרש כדי להשתמש בו. יש לך כמה תגי meta, קישור לקובץ CSS של Bootstrap בסעיף <head>, ובתחתית יש לך קישור ל-JavaScript אופציונלי. החלקים המודגשים של הקוד מכילים קוד Jinja שהוסבר בשלבים הקודמים. שים לב כיצד אתה משתמש בתגים ובמחלקות CSS ספציפיות כדי להורות ל-Bootstrap כיצד להציג כל אלמנט.

בתג <nav> למעלה, יש לך תג <a> עם המחלקה navbar-brand, שמגדיר את הקישור למותג בסרגל הניווט. בתוך תג <ul class="navbar-nav">, יש לך פריטי סרגל ניווט רגילים בתוך תג <a> בתג <li>.

כדי ללמוד עוד על תגים אלו ומחלקות CSS, ראה רכיבי Bootstrap.

שמור וסגור את הקובץ.

עם שרת הפיתוח פועל, פתח את דף הבית עם הדפדפן שלך:

http://127.0.0.1:5000/

תראה דף דומה להלן:

עכשיו אתה יכול להשתמש ברכיבי Bootstrap כדי לעצב פריטים ביישום Flask שלך בכל התבניות שלך.

מסקנה

אתה יודע כיצד להשתמש בתבניות HTML ביישום האינטרנט שלך בפלאסק. השתמשת במשתנים כדי להעביר נתונים מהשרת לתבניות, השתמשת בירושה של תבניות כדי להימנע מחזרה, כללת אלמנטים כמו תנאי if ולולאות for, וקישרת בין דפים שונים. למדת על מסננים לשינוי טקסט והצגת HTML מהימן, ושילבת את בוטסטראפ ביישום שלך.

אם תרצה לקרוא עוד על פלאסק, בדוק את דף הנושא של פלאסק.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-templates-in-a-flask-application