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
チームのテスト力を鍛える
goyoki
3
940
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
旅行プランAIエージェント開発の裏側
ippo012
2
930
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
RDoc meets YARD
okuramasafumi
4
170
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
170
私の後悔をAWS DMSで解決した話
hiramax
4
210
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
rage against annotate_predecessor
junk0612
0
170
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Being A Developer After 40
akosma
90
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Navigating Team Friction
lara
189
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Scaling GitHub
holman
463
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Balancing Empowerment & Direction
lara
3
630
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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