[Day 5] Flask模板 Jinja2基礎用法

2023 iThome 鐵人賽

DAY 5

Software Development

從開始到放棄的Flask系列第 5 篇

15th鐵人賽

arbin

團隊NUTC_IMAC_智慧星爆

2023-09-15 00:12:03

1220 瀏覽

分享至

基礎

Jinja2是Flask預設的模板引擎,可以用來生成動態的HTML頁面。他允許我們使用兩個大括號來插入變數或者運行Python的表達式，例如有一個index.html模板:

<!DOCTYPE html>
<html>
<body>
  <h1>Hello, {{ name }}!</h1>
</body>
</html>

我們在app.py可以這樣渲染

@app.route('/')
def index():
  return render_template('index.html', name='arbin')

接著我們執行這個程式後，我們可以看到頁面上就會顯示我們傳入的 name 參數，且填入到 {{ name }} 變數中。

if判斷式

一個基本的Jinja2模板除了包含變數外還有控制語句，他支援常見的if條件判斷:

<html>
<body>
  {% if user %}
    <p>User is logged in</p>
  {% else %}  
    <p>User is not logged in</p>
  {% endif %}
</body>
</html>

我們在分別在app.py傳入user及不傳入user，可以發現它會出現不同的頁面。

for迴圈

首先我們先定義一個路由，並且在他渲染網頁時會帶著一個item='abcdefg'的值到index網頁。

@app.route('/')
def index():
    return render_template('index.html',items='abcdefg')

接著我們在網頁將這個item以迴圈的方式顯示出來。

<html>
<body>
    <ul>
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
    </ul>
</body>
</html>

來看看效果如何吧

模板繼承

Flask模板繼承機制可以實現模板的複用,減少模板間內容的冗余。通過{% block %}定義區塊,使用{% extends %}實現繼承,子模板可以覆蓋父模板的區塊。

要實現模板繼承,需要創建一個基模板base.html,裡面定義共用的元素結構:

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
        <p>這個沒有被block框起來會被繼承</p>
    <header>
        {% block header %}{% endblock %}
      </header>
      
      <main>
        {% block content %}{% endblock %}
      </main>
    
      <footer>
        {% block footer %}{% endblock %}
      </footer>
</body>
</html>

<!-- index.html -->
{% extends "base.html" %}

{% block title %}Index{% endblock %}

{% block header %}
  <h1>Hello World</h1>
{% endblock %}

{% block content %}
  <p>Index page content</p>  
{% endblock %}

接著執行起來看看，我們可以發現雖然<p>沒有在index.html寫到，但他仍然出現了，因為子模板通過extends繼承基模板base.html,並重新定義區塊內容。，只要沒有被block框起來的他仍然會出現。