Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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