# Flask實作_基礎_11_jinja2_樣板繼承 ###### tags: `python` `jinja2` `flask` 網頁開發中很多時候HTML文件的結構是相同的，可能就是title不一樣，或是那兒不一樣。如果每個一點點不一樣就建置一個HTML文件的話，那只要有一個小調整，就要對所有的不一樣通通改版，肯定累死人。這次我們要來瞭解如何利用jinja2的樣板繼承減化重覆性的網頁開發工作。 ## 作業說明 jinja2帶有樣板繼承的功能，可以避免掉重覆性的網頁開發工作，實務上我們會建置一個基礎樣板(`base.html`)提供其它需求HTML文件繼承，語法結構可參閱jinja2官方文件會更清楚，也強烈的建議務必閱讀一次官方文件。 jinja2表達式大致如下<sub><a href='#note_1'>註1</a></sub>： ```python= {% block block_name %} {% endblock block_name %} ``` 我們先建立一個基礎樣板HTML文件，並將文件命名為`base.html` * file name: base.html ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> {% block head %} <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{% block title%}{% endblock title%} -titleBlock</title> {% endblock head %} </head> <body> <h1>Welcome to the test HTML</h1> <h2>大家都要用的就不要用block處理</h2> <h3>block的區塊是提供調整的部位</h3> {% with messages = get_flashed_messages() %} {% if messages %} <ul class="flash"> {% for message in messages %} <li>{{ message }}</li> {% endfor %} </ul> {% endif %} {% endwith%} <div class="content"> {% block content %} {% endblock content %} </div> </body> </html> ``` 第8行：建置一個`block`，命名為`title` 第25行：建置一個`block`，命名為`content` 上面的HTML文件中，簡單的加入兩個block，一個是`block title`，一個是`block content`，這兩個block代表繼承該板的HTML文件可以調整的地方，其餘的部份皆透過繼承直接產生，不需要任何調整。 對於繼承`base.html`的作法，我們要在HTML文件開頭透過`extends`來宣告。 現在我們透過調整`login.html`來瞭解上面的說明，如下： * file name: login.html ```htmlmixed= {% extends "base.html" %} {% block title %}Login{% endblock title%} {% block content%} <form method='post' action={{ url_for('login') }}> <p> <input type='text' name='username'> </p> <p> <input type="text" name="password"> </p> <p> <button type='submit'>Submit</button> </p> </form> {% endblock content%} ``` 第1行：宣告樣板繼承`base.html` 第2行：利用`block title`設置`login.html`的title 第3行：利用`block content`設置`login.html`的內容 我們的Python文件基本上沒有調整，如下： ```python= from flask import Flask, request, render_template, redirect, url_for app = Flask(__name__) @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': return redirect(url_for('hello', username=request.form.get('username'))) return render_template('login.html') @app.route('/hello/<username>') def hello(username): return render_template('hello.html', username=username) if __name__ == '__main__': app.debug = True app.run() ``` 執行專案透過路由確認網頁是否正常，也可以發現，即使`login.html`只有少許的數行，但透過樣板繼承我們重新定義了`block`內的資料，並且保留其它地方的結構。 這種樣板繼承的作法除了可以確保整個網站的網頁結構是相同的之外，也減少大量重覆性的工作。 ## 註解說明 <span id='note_1'>註1</span>：`{{ 兩個大括號是參數綁定 }}` `{% 這樣是執行jinja2內置函數 %}` `{# 這樣是註解說明 #}` ## 總結 透過練習我們瞭解到，樣板的繼承可以大量減少我們在網頁開發上的程式碼，當然jinja2不止如此的作用，還有`macro`以及內置函數的操作，再次的說明，務必快速閱讀一次官方文件。 **上一話：**[Flask實作_基礎_10_flash message](https://hackmd.io/s/BkkbvYIff) **下一話：**[Flask實作_基礎_12_jinja2_樣板繼承_保留父類樣板資訊](https://hackmd.io/s/S1ujRT2ZM)