Templates Overview
Templates are files that contain static data as well as placeholders for dynamic data.
A template is rendered with specific data to produce a final document.
Flask uses the Jinja template library to render templates.
In the application, we will use templates to render span style="color: #0593d3;">HTML which will display in the user's browser.
In Flask, Jinja is configured to autoescape any data that is rendered in HTML templates.
Special delimiters are used to distinguish Jinja syntax from the static data in the template.
Anything between {{ and }} is an expression that will be output to the final document.
{% and %} denotes a control flow statement like if and for.
The templates files will be stored in the templates directory inside the flask project.
We can use static files in the flask like server-side rendering.
If you aren't familiar with flask, please read this first.
I'll start with this.
2020/10/11 - [Python] - [Python] Getting Started with Flask
Create a Project
Create a project like this.
+- src
\- app.py
+- templates
|- base.html
\- index.html
+- static
\- style.css
src/app.py
@app.route("/")
def home():
return render_template("index.html")
static/style.css
* {
background-color: tomato;
}
templates/base.html
<!doctype html>
<title>{% block title %}{% endblock %} - Flask</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<header>
{% block header %}{% endblock %}
</header>
<hr>
<div class="content">
{% block content %}{% endblock %}
</div>
templates/index.html
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Home{% endblock %}</h1>
{% endblock %}
{% block content %}
<div>
This is contents.
</div>
{% endblock %}
As you can see, index.html extends base.html.
{% block %} will be replaced with corresponding contents.
Enjoy your first app.
Try to change the code, and take a look at which thing is changed.
Data Communication with Flask
Let's send data from flask to the static HTML file.
src/app.py
@app.route("/")
def home():
return render_template("index.html", name="HoYa", age=18)
templates/index.html
{% block content %}
...
<div>
Your name is {{name}}, and you are {{age}} years old.
</div>
{% endblock %}
When you use data from flask, put that variable in the {{ and }}.
Loop in Static Files
It is similar to Python, so easy.
src/app.py
@app.route("/")
def home():
return render_template(
"index.html", name="HoYa", age=18, fruits=["apple", "banana", "cherry"]
)
templates/index.html
{% block content %}
...
<ul>
{% for item in fruits %}
<ul>{{item}}</ul>
{% endfor %}
</ul>
{% endblock %}
If in Static Files
This is also similar to Python.
src/app.py
@app.route("/")
def home():
return render_template(
"index.html",
name="HoYa",
age=18,
fruits=["apple", "banana", "cherry"],
is_male=True,
)
templates/index.html
{% block content %}
...
<div>
{% if is_male %}
You are a man.
{% else %}
You are a woman.
{% endif %}
</div>
{% endblock %}
Wrap Up
We found out about the templates static files in Flask so far.
Now make your own wonderful application with this.
'Python' 카테고리의 다른 글
| [Python] List (Array) Data Structure (0) | 2020.12.07 |
|---|---|
| [Python] Dictionary Data Structure (0) | 2020.12.06 |
| [Python] pathlib module (Object-Oriented Filesystem Paths) (0) | 2020.10.13 |
| [Python] Getting Started with Flask (0) | 2020.10.11 |
| [Python] Beautiful Soup4 module (0) | 2020.10.09 |
댓글