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
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Ruby Parser progress report 2025
yui_knk
1
410
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
710
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Kiroで始めるAI-DLC
kaonash
2
580
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
120
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
180
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
280
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Featured
See All Featured
Scaling GitHub
holman
463
140k
Six Lessons from altMBA
skipperchong
28
4k
Bash Introduction
62gerente
615
210k
Why Our Code Smells
bkeepers
PRO
339
57k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Into the Great Unknown - MozCon
thekraken
40
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Language of Interfaces
destraynor
161
25k
Producing Creativity
orderedlist
PRO
347
40k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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