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
94
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
96
Introducing Reverse Engineering @ YZU CS250
racterub
0
210
ITAC | Flask - Basic Flask
racterub
1
98
ITAC-Flask | Environment setup
racterub
1
71
Other Decks in Programming
See All in Programming
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
AIでLINEスタンプを作ってみた
eycjur
1
220
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.5k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
120
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
速いWebフレームワークを作る
yusukebe
3
930
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
630
Improving my own Ruby thereafter
sisshiki1969
1
140
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
0
100
パスタの技術
yusukebe
1
550
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Designing for humans not robots
tammielis
253
25k
The Invisible Side of Design
smashingmag
301
51k
It's Worth the Effort
3n
187
28k
Done Done
chrislema
185
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Facilitating Awesome Meetings
lara
55
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
BBQ
matthewcrist
89
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
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