Tweet
Tweet

Slide 1

Slide 1 text

Jinja & Bootstrap Racterub@ITAC 1

Slide 2

Slide 2 text

Overview • Basic Jinja Templates • Bootstrap (我只會⼤概介紹) • Basic login page (這個請⾃⾏實作，最後會帶⼀次) 2

Slide 3

Slide 3 text

但是， 我還是先確認一下每一個 人都有跟上進度 3

Slide 4

Slide 4 text

https://reurl.cc/z8OqEV 這是這次簡報的網址 4

Slide 5

Slide 5 text

Jinja • ⼀種模版引擎 • Flask 的預設前端，你也可以將 Jinja 替換成 Vue.js, AngularJS ..etc • 前幾年資安競賽蠻愛考的 • 可以阻擋 XSS 5

Slide 6

Slide 6 text

Jinja • {% .. %} statement • {# .. #} comment • {{ .. }} variables • # .. # line statements (statement 的美化版) 6

Slide 7

Slide 7 text

Jinja • 從 Flask 丟參數去 Jinja • 字串 / 數字 • {{ variable }} • 串列 • {{ variable[idx] }} • 字典 • {{ variable[key] }} 7

Slide 8

Slide 8 text

Jinja • 語法 • if {% if %} … {% else if %} … {% else %} … {% endif %} 8

Slide 9

Slide 9 text

Jinja • for • Jinja 在 for 迴圈裡⾯會有特別的變數讓你使⽤ {% for i in arr %} … {% endfor %} 9

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

Jinja • Filters • Jinja 內建的功能，可以做許多好⽤的處理 11

Slide 12

Slide 12 text

▲https://jinja.palletsprojects.com/en/2.11.x/templates/#list-of-builtin-filters 12

Slide 13

Slide 13 text

Jinja • Python • • Jinja • {{ “ hello world “|trim|title }} • 13

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

Jinja • Tests • 通常⽤來過濾資料 • 15

Slide 16

Slide 16 text

Jinja • ( a = 123) • 16

Slide 17

Slide 17 text

Jinja • 模板繼承 • Jinja 裡⾯很重要的⼀個功能 • 先講語法 • block {% block %} … {% endblock %} 17

Slide 18

Slide 18 text

Jinja • 當你的網站有設計主題，讓許多側邊欄、頂部導航列需要 在每⼀⾴都顯⽰ • 你可能想說複製貼上就好了 • 但是當你在 Facebook ⼯作時 • Facebook 的 codebase 有 62,000,000 ⾏ (2017) • 會先複製到死吧 18

Slide 19

Slide 19 text

Jinja •以這個側邊欄為例 •那我就可以先寫好側邊欄的 code •然後在從其他頁面做引入 •模板繼承這種東⻄就被做出來 了 19

Slide 20

Slide 20 text

實作辣 1. 將 GET 參數 a 的數字產⽣⼀個 0 到 a 的 list，並且在 jinja 裡⾯作出以下格式 (e.g. ?a=123 => [0,1,…123]) 1. 1, 2, 3, 4, 5, …… 2. 將第⼀個實作修改，如果數字可以整除 5，則顯⽰在⾴⾯ 上。同樣需要相同格式 20

Slide 21

Slide 21 text

Boostrap • 由 Twitter 內部的⼀群⼯程師維護，⽬前已開源 • 可以⽤來做響應式⾴⾯ (RWD) 21

Slide 22

Slide 22 text

22