# 【第二篇】Flask templates 網頁樣板 ###### tags: `Flask教學` 在前一篇文章 [Flask 入門](https://hackmd.io/@Scott/Sk2k4yiMr) 介紹到如何使用 return 回傳文字並顯示在網頁上，但如果我們要加入排版，就不可能全部塞在裡面，所以我們可以額外建立 HTML 檔，當使用者進入網頁時，就直接回傳整份 HTML，除了格式更完整以外，也達到分開管理的效果。 檔案樹： ``` + app.py + templates - index.html ``` ### 快速開始 首先先新增資料夾 templates，底下建立名為 index.html 的檔案，輸入以下內容： ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>這是一份獨立的 HTML 檔案</h1> </body> </html> ``` app.py: ```python= from flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello_world(): # 更改為 render_template return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 執行後就可以看到我們剛剛建立的項目： ![](https://i.imgur.com/5v1ZPp6.png) 這邊不多贅述 HTML 的語法，若是想學如何排版，可多參考其他前端設計書籍。 ### Jinja2 語法 Jinja 是 Python 的樣版引擎，在 HTML 裡面，透過大括號就可以加入 Jinja2 的語法，當 Flask 啟動時，他會將此頁面的變數，轉換成 HTML 的格式（很神奇吧！），話不多說我們來實作看看吧。 從剛剛的 index.html 加入： ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>這是一份獨立的 HTML 檔案</h1> <p>我從 Flask 丟進來的變數是： {{ myvar }}</p> </body> </html> ``` app.py: ```python= from flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello_world(): # 後面新增 myvar return render_template('index.html', myvar='good day') if __name__ == '__main__': app.run(debug=True) ``` 網頁顯示： ![](https://i.imgur.com/1P2Jvfn.png) 可以看到 good day 已被加入到文字尾端。 ### Jinja2 條件式 我認為最厲害的是，可以把 Python 的概念帶入到 Jinja 中，變數的開頭是兩個大括號{{ }}，而語法的話是大括號跟百分比符號{% %}，並且要記得加 {% endif %}。底下示範的是 if-else 條件式： index.html ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>這是一份獨立的 HTML 檔案</h1> {% if myvar %} <h1>我從 Flask 丟進來的變數是： {{ myvar }}</h1> {% else %} <h1>沒有變數輸入</h1> {% endif %} </body> </html> ``` 把 app.py 裡的變數刪除： ```python= # 上略 @app.route('/') def hello_world(): return render_template('index.html') # 下略 ``` 效果為： ![](https://i.imgur.com/Rjp2uMB.png) 條件不成立的就不會被執行了。 ### Jinja2 for 迴圈 當然也可以加入迴圈，使用 for 的時機就是當需要重複輸入一段文字時，你只要輸入一次即可。 index.html ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% for i in range(1, 6) %} <h1>這是第 {{ i }} 行</h1> {% endfor %} </body> </html> ``` ![](https://i.imgur.com/rf2zQts.png) --- 上一篇：[【第一篇】Flask 入門](https://hackmd.io/@Scott/Sk2k4yiMr) 下一篇：[【第三篇】Flask 擴展樣板](https://hackmd.io/@Scott/r1f8942fH)