AJING NOTE: [Python] 使用Flask建立網站(二)

這次我們要來回傳HTML頁面。
就是要使用到這張圖的第三功能 Templating Engine！

在第一回的文章我們是這麼做的。

@app.route('/')
def hello():
    return "<h3>Hello</h3>"

在瀏覽器端我們就可以看到Hello。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>
<h3>Hello</h3>
</body>
</html>

web/routes.py

from flask import Blueprint
from flask import render_template

home = Blueprint('home', __name__)

@home.route('/')
def hello():
    return render_template('home.html', title="My Home")

* render_template()會自己去找templates目錄裡載入home.html
* 後面可填參數，flask內的jinja2引擎會幫我們將參數填入home.html中，如此就可以做到動態修改html。
* 在HTML待填補的變數會以 {{ }}框起來。

在標題的部分會是 My Home

jinja2 template的官方文檔在這裡：http://jinja.pocoo.org/docs/2.10/templates/

常用的就：
1. {{varible}}
2. {% if flag==true %}{% endif %}
3. {% for item in items%} {% endfor %}
4. {% extends "layout.html" %}
5. {% block content %}{% endblock content %}

上面已經秀過 {{variable}}了，下面再嘗試一個for迴圈。

for迴圈：
web/templates/home.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>
<h3>Hello</h3>
{% for item in items%}
<p>{{loop.index}}: {{item}}</p>
{% endfor %}
</body>
</html>

web/routes.py改成：

@home.route('/')
def hello():
    bags = ['water', 'cookies', 'money']
    return render_template('home2.html', title="My Home", items=bags)

extends 和 block的部分在這篇也可以看到：[GAE] 網站的目錄規劃，主要是可以用來組合HTML檔案。
這裡我們要試著組合 layout.html 和 home.html。
web/templates/layout.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>

web/templates/home.html：

{% extends "layout.html" %}
{% block content %}
    <h3>Home page</h3>
{% endblock content %}

web/routes.py改成：

@home.route('/')
def hello():
    return render_template('home.html', title="My Home")

* home.html中的{% block content %}{% endblock content%}包住的內容將會嵌入layout.html的{% block content %}{% endblock content%}中。(content是這個block的名字，因此不一定是叫content這個名字，重要的是home.html和layout.html的block名要能對起來)

AJING NOTE

首頁

2019年5月26日星期日

[Python] 使用Flask建立網站(二) — 使用jinja2繪製頁面

沒有留言:

張貼留言

首頁

2019年5月26日 星期日

[Python] 使用Flask建立網站(二) — 使用jinja2繪製頁面

沒有留言:

張貼留言

2019年5月26日星期日