Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ITAC | Jinja & Bootstrap
Search
racterub
May 26, 2020
Programming
1
95
ITAC | Jinja & Bootstrap
ITAC | Jinja & Bootstrap
racterub
May 26, 2020
Tweet
Share
More Decks by racterub
See All by racterub
IM620 Web Security
racterub
0
120
ITAC | Websec 3
racterub
0
230
ITAC | Websec 2
racterub
0
190
ITAC | Websec 1
racterub
0
230
ITAC | Linux Basics
racterub
0
98
Introducing Reverse Engineering @ YZU CS250
racterub
0
210
ITAC | Flask - Basic Flask
racterub
1
100
ITAC-Flask | Environment setup
racterub
1
72
Other Decks in Programming
See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
チームのテスト力を鍛える
goyoki
3
900
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
OSS開発者という働き方
andpad
5
1.7k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Improving my own Ruby thereafter
sisshiki1969
1
160
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Ruby Parser progress report 2025
yui_knk
1
460
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
100
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A better future with KSS
kneath
239
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
KATA
mclloyd
32
14k
It's Worth the Effort
3n
187
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Writing Fast Ruby
sferik
628
62k
Unsuck your backbone
ammeep
671
58k
Side Projects
sachag
455
43k
Transcript
Jinja & Bootstrap Racterub@ITAC 1
Overview • Basic Jinja Templates • Bootstrap (我只會⼤概介紹) • Basic
login page (這個請⾃⾏實作,最後會帶⼀次) 2
但是, 我還是先確認一下每一個 人都有跟上進度 3
https://reurl.cc/z8OqEV 這是這次簡報的網址 4
Jinja • ⼀種模版引擎 • Flask 的預設前端,你也可以將 Jinja 替換成 Vue.js, AngularJS
..etc • 前幾年資安競賽蠻愛考的 • 可以阻擋 XSS 5
Jinja • {% .. %} statement • {# .. #}
comment • {{ .. }} variables • # .. # line statements (statement 的美化版) 6
Jinja • 從 Flask 丟參數去 Jinja • 字串 / 數字
• {{ variable }} • 串列 • {{ variable[idx] }} • 字典 • {{ variable[key] }} 7
Jinja • 語法 • if {% if <expression> %} …
{% else if <expression> %} … {% else %} … {% endif %} 8
Jinja • for • Jinja 在 for 迴圈裡⾯會有特別的變數讓你使⽤ {% for
i in arr %} … {% endfor %} 9
10
Jinja • Filters • Jinja 內建的功能,可以做許多好⽤的處理 11
▲https://jinja.palletsprojects.com/en/2.11.x/templates/#list-of-builtin-filters 12
Jinja • Python • • Jinja • {{ “ hello
world “|trim|title }} • 13
14
Jinja • Tests • 通常⽤來過濾資料 • 15
Jinja • ( a = 123) • 16
Jinja • 模板繼承 • Jinja 裡⾯很重要的⼀個功能 • 先講語法 • block
{% block <name> %} … {% endblock %} 17
Jinja • 當你的網站有設計主題,讓許多側邊欄、頂部導航列需要 在每⼀⾴都顯⽰ • 你可能想說複製貼上就好了 • 但是當你在 Facebook ⼯作時
• Facebook 的 codebase 有 62,000,000 ⾏ (2017) • 會先複製到死吧 18
Jinja •以這個側邊欄為例 •那我就可以先寫好側邊欄的 code •然後在從其他頁面做引入 •模板繼承這種東⻄就被做出來 了 19
實作辣 1. 將 GET 參數 a 的數字產⽣⼀個 0 到 a
的 list,並且在 jinja 裡⾯作出以下格式 (e.g. ?a=123 => [0,1,…123]) 1. 1, 2, 3, 4, 5, …… 2. 將第⼀個實作修改,如果數字可以整除 5,則顯⽰在⾴⾯ 上。同樣需要相同格式 20
Boostrap • 由 Twitter 內部的⼀群⼯程師維護,⽬前已開源 • 可以⽤來做響應式⾴⾯ (RWD) 21
22