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
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
200
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
750
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
QA x AIエコシステム段階構築作戦
osu
0
220
Gemini CLI のはじめ方
ttnyt8701
1
110
TypeScriptでDXを上げろ! Hono編
yusukebe
4
890
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
階層化自動テストで開発に機動力を
ickx
1
450
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
Featured
See All Featured
Done Done
chrislema
185
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
A designer walks into a library…
pauljervisheath
207
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Testing 201, or: Great Expectations
jmmastey
44
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.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