Introduction to Jinja2

Python CodeLabs - Python - Introduction to Jinja2
http://eueung.github.io/python/jinja2

Transcript

1.  Python - Jinja2 Eueung Mulyana http://eueung.github.io/python/jinja2 Python CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 27
2. Agenda Jinja Basics Rendering to Files Jinja + Flask 2 / 27
3.  Jinja Basics 3 / 27
4. Example #1/1-2 H e l l o J o h n D o e ! M y f a v o r i t e n u m b e r s : 1 2 3 4 5 6 7 8 9 f r o m j i n j a 2 i m p o r t T e m p l a t e t e m p l a t e = T e m p l a t e ( ' H e l l o { { n a m e } } ! ' ) p r i n t t e m p l a t e . r e n d e r ( n a m e = ' J o h n D o e ' ) t = T e m p l a t e ( " M y f a v o r i t e n u m b e r s : { % f o r n i n r a n g e ( 1 , 1 0 ) % } { { n } } " p r i n t t . r e n d e r ( ) < t i t l e > < / t i t l e > < u l > < l i > < a h r e f = " a b c @ g m a i l . c o m " > a b c < / a > < / l i > < l i > < a h r e f = " 1 2 3 @ g m a i l . c o m " > 1 2 3 < / a > < / l i > < / u l > f r o m j i n j a 2 i m p o r t T e m p l a t e t e m p l a t e = T e m p l a t e ( ' ' ' < t i t l e > { % b l o c k t i t l e % } { % e n d b l o c k % } < / t i t l e > < u l > { % f o r u s e r i n u s e r s - % } < l i > < a h r e f = " { { u s e r . u r l } } " > { { u s e r . u s e r n a m e } } < / a > < / l i > { % e n d f o r - % } < / u l > ' ' ' ) p r i n t t e m p l a t e . r e n d e r ( t i t l e = ' t i t l e s t r i n g ' , u s e r s = [ { ' u s e r n a m e ' 4 / 27
5. Example #1/3 < h t m l > < h e a d > < t i t l e > H e l l o T i t l e < / t i t l e > < / h e a d > < b o d y > H e l l o . < / b o d y > < / h t m l > f r o m j i n j a 2 i m p o r t E n v i r o n m e n t H T M L = " " " < h t m l > < h e a d > < t i t l e > { { t i t l e } } < / t i t l e > < / h e a d > < b o d y > H e l l o . < / b o d y > < / h t m l > " " " d e f p r i n t _ h t m l ( ) : p r i n t E n v i r o n m e n t ( ) . f r o m _ s t r i n g ( H T M L ) . r e n d e r ( t i t l e = ' H e l l o p r i n t _ h t m l ( ) 5 / 27
6. Example #2/1 < h t m l > < h e a d > < t i t l e > { { t i t l e } } < / t i t l e > < / h e a d > < b o d y > H e l l o . < / b o d y > < / h t m l > basic-1.html f r o m j i n j a 2 i m p o r t E n v i r o n m e n t , F i l e S y s t e m L o a d e r T H I S _ D I R = ' t e m p l a t e s ' d e f p r i n t _ h t m l ( ) : j 2 _ e n v = E n v i r o n m e n t ( l o a d e r = F i l e S y s t e m L o a d e r ( T H I S _ D I R ) , t r i m _ b l o c k s = p r i n t j 2 _ e n v . g e t _ t e m p l a t e ( ' b a s i c - 1 . h t m l ' ) . r e n d e r ( t i t l e = ' H e l l o T i t l e ' ) p r i n t _ h t m l ( ) < h t m l > < h e a d > < t i t l e > H e l l o T i t l e < / t i t l e > < / h e a d > < b o d y > H e l l o . < / b o d y > < / h t m l > 6 / 27
7. Example #2/2 i m p o r t j i n j a 2 t e m p l a t e L o a d e r = j i n j a 2 . F i l e S y s t e m L o a d e r ( s e a r c h p a t h = " t e m p l a t e s " t e m p l a t e E n v = j i n j a 2 . E n v i r o n m e n t ( l o a d e r = t e m p l a t e L o a d e r ) T E M P L A T E _ F I L E = " b a s i c - 2 . h t m l " t e m p l a t e = t e m p l a t e E n v . g e t _ t e m p l a t e ( T E M P L A T E _ F I L E ) F A V O R I T E S = [ " c h o c o l a t e s " , " l u n a r e c l i p s e s " , " r a b b i t s " ] t e m p l a t e V a r s = { " t i t l e " : " T e s t E x a m p l e " , " d e s c r i p t i o n " : " A s i m p l e i n q u i r y o f f u n c t i o n . " " f a v o r i t e s " : F A V O R I T E S } p r i n t t e m p l a t e . r e n d e r ( t e m p l a t e V a r s ) < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > { { t i t l e } } < / t i t l e > < m e t a n a m e = " d e s c r i p t i o n " c o n t e n t = " { { d e s c r i p t i o n } } " / > < / h e a d > < b o d y > < d i v i d = " c o n t e n t " > < p > M y F a v o r i t e T h i n g s : < / p > < u l > { % f o r i t e m i n f a v o r i t e s - % } < l i > { { i t e m } } < / l i > { % e n d f o r - % } < / u l > < / d i v > < / b o d y > < / h t m l > basic-2.html 7 / 27
8. Example #2/2 < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > T e s t E x a m p l e < / t i t l e > < m e t a n a m e = " d e s c r i p t i o n " c o n t e n t = " A s i m p l e i n q u i r y o f f u n c t i o n . " < / h e a d > < b o d y > < d i v i d = " c o n t e n t " > < p > M y F a v o r i t e T h i n g s : < / p > < u l > < l i > c h o c o l a t e s < / l i > < l i > l u n a r e c l i p s e s < / l i > < l i > r a b b i t s < / l i > < / u l > < / d i v > < / b o d y > < / h t m l > 8 / 27
9. Example #2/3 basic-3.html < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " u t f - 8 " / > < t i t l e > T e s t J i n j a 2 < / t i t l e > < / h e a d > < b o d y > < c e n t e r > < h 1 > H e l l o J i n j a 2 < / h 1 > < p > B u i l t i n F i l t e r s - { { u r l s | l e n g t h } } l i n k s < / p > < / c e n t e r > < o l a l i g n = " l e f t " > { % s e t c o u n t e r = 0 - % } { % f o r u r l i n u r l s - % } { % s e t c o u n t e r = c o u n t e r + 1 - % } < l i > < a h r e f = " { { u r l } } " > { { u r l } } < / a > | c o u n t e r i n s i d e : { { c o u n t e r } } { % e n d f o r - % } < / o l > < p > c o u n t e r o u t s i d e : { { c o u n t e r } } < / p > < / b o d y > < / h t m l > i m p o r t o s f r o m j i n j a 2 i m p o r t E n v i r o n m e n t , F i l e S y s t e m L o a d e r P A T H = ' . ' T E M P L A T E _ E N V I R O N M E N T = E n v i r o n m e n t ( a u t o e s c a p e = F a l s e , l o a d e r = F i l e S y s t e m L o a d e r ( o s . p a t h . j o i n ( P A T H , ' t e m p l a t e s ' ) ) , t r i m _ b l o c k s = F a l s e ) d e f r e n d e r _ t e m p l a t e ( t e m p l a t e _ f i l e n a m e , c o n t e x t ) : r e t u r n T E M P L A T E _ E N V I R O N M E N T . g e t _ t e m p l a t e ( t e m p l a t e _ f i l e n a m e d e f c r e a t e _ i n d e x _ h t m l ( ) : f n a m e = " r e s u l t s / o u t p u t - b a s i c - 3 . h t m l " u r l s = [ ' h t t p : / / e x a m p l e . c o m / 1 ' , ' h t t p : / / e x a m p l e . c o m / 2 ' , c o n t e x t = { ' u r l s ' : u r l s } w i t h o p e n ( f n a m e , ' w ' ) a s f : h t m l = r e n d e r _ t e m p l a t e ( ' b a s i c - 3 . h t m l ' , c o n t e x t ) f . w r i t e ( h t m l ) c r e a t e _ i n d e x _ h t m l ( ) 9 / 27
10. output-basic-3.html 10 / 27
11.  Rendering to Files Based on the Codes by @mjhea0 (Michael Herman/Real Python) 11 / 27
12. i m p o r t o s f r o m j i n j a 2 i m p o r t E n v i r o n m e n t , F i l e S y s t e m L o a d e r P A T H = ' . ' T E M P L A T E _ E N V I R O N M E N T = E n v i r o n m e n t ( a u t o e s c a p e = F a l s e , l o a d e r = F i l e S y s t e m L o a d e r ( o s . p a t h . j o i n ( P A T H , ' t e m p l a t e s ' ) ) , t r i m _ b l o c k s = F a l s e ) d e f r e n d e r _ t e m p l a t e ( t e m p l a t e _ f i l e n a m e , c o n t e x t ) : r e t u r n T E M P L A T E _ E N V I R O N M E N T . g e t _ t e m p l a t e ( t e m p l a t e _ f i l e n a m e ) . r e n d e r ( c o n t e x t ) d e f c r e a t e _ i n d e x _ h t m l ( ) : f n a m e = " r e s u l t s / o u t p u t - t - 0 . h t m l " m y _ s t r i n g = " H e l l o ! " m y _ l i s t = [ 0 , 1 , 2 , 3 , 4 , 5 ] c o n t e x t = { ' t i t l e ' : ' t i t l e t - 0 ' , ' m y _ s t r i n g ' : m y _ s t r i n g , ' m y _ l i s t ' : m y _ l i s t } w i t h o p e n ( f n a m e , ' w ' ) a s f : h t m l = r e n d e r _ t e m p l a t e ( ' t - 0 . h t m l ' , c o n t e x t ) f . w r i t e ( h t m l ) c r e a t e _ i n d e x _ h t m l ( ) Example t-0 < d i v c l a s s = " c o n t a i n e r " > < p > M y s t r i n g : { { m y _ s t r i n g } } < / p > < p > V a l u e f r o m t h e l i s t : { { m y _ l i s t [ 3 ] } } < / p > < p > L o o p t h r o u g h t h e l i s t : < / p > < u l > { % f o r n i n m y _ l i s t % } < l i > { { n } } < / l i > { % e n d f o r % } < / u l > < / d i v > t-0.html (partial) 12 / 27
13. output-t-0.html 13 / 27
14. Example t-1 { % e x t e n d s " t - l a y o u t - 1 . h t m l " % } { % b l o c k c o n t e n t % } < h 3 > T h i s i s t h e s t a r t o f m y c h i l d t e m p l a t e < / h 3 > < b r > < p > M y s t r i n g : { { m y _ s t r i n g } } < / p > < p > V a l u e f r o m t h e l i s t : { { m y _ l i s t [ 3 ] } } < / p > < p > L o o p t h r o u g h t h e l i s t : < / p > < u l > { % f o r n i n m y _ l i s t % } < l i > { { n } } < / l i > { % e n d f o r % } < / u l > < h 3 > T h i s i s t h e e n d o f m y c h i l d t e m p l a t e < / h 3 > { % e n d b l o c k % } t-1.html < d i v c l a s s = " c o n t a i n e r " > < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < b r > { % b l o c k c o n t e n t % } { % e n d b l o c k % } < b r > < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < / d i v > t-layout-1.html (partial) 14 / 27
15. output-t-1.html 15 / 27
16. Example t-2 { % e x t e n d s " t - l a y o u t - 2 . h t m l " % } { % b l o c k p a g e % } H o m e { % e n d b l o c k % } { % b l o c k h e a d i n g % } { { s u p e r ( ) } } { % e n d b l o c k % } { % b l o c k c o n t e n t % } < h 3 > T h i s i s t h e s t a r t o f m y c h i l d t e m p l a t e < / h 3 > < b r > < p > M y s t r i n g : { { m y _ s t r i n g } } < / p > < p > V a l u e f r o m t h e l i s t : { { m y _ l i s t [ 3 ] } } < / p > < p > L o o p t h r o u g h t h e l i s t : < / p > < u l > { % f o r n i n m y _ l i s t % } < l i > { { n } } < / l i > { % e n d f o r % } < / u l > < h 3 > T h i s i s t h e e n d o f m y c h i l d t e m p l a t e < / h 3 > { % e n d b l o c k % } t-2.html t-layout-2.html (partial) < d i v c l a s s = " c o n t a i n e r " > { % b l o c k h e a d i n g % } < h 1 > { % b l o c k p a g e % } { % e n d b l o c k % } - F l a s k S u p e r E x a m p l e { % e n d b l o c k % } < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < b r > { % b l o c k c o n t e n t % } { % e n d b l o c k % } < b r > < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < / d i v > 16 / 27
17. output-t-2.html 17 / 27
18. Example t-3 t-3.html { % e x t e n d s " t - l a y o u t - 3 . h t m l " % } { % b l o c k t i t l e % } { { t i t l e } } { % e n d b l o c k % } { % b l o c k h e a d % } { { s u p e r ( ) } } { % e n d b l o c k % } { % b l o c k p a g e % } { { t i t l e } } { % e n d b l o c k % } { % b l o c k h e a d i n g % } { { s u p e r ( ) } } { % e n d b l o c k % } { % b l o c k c o n t e n t % } < h 3 > T h i s i s t h e s t a r t o f m y c h i l d t e m p l a t e < / h 3 > < b r > < b r > < p > M y s t r i n g : { { m y _ s t r i n g } } < / p > < p > V a l u e f r o m t h e l i s t : { { m y _ l i s t [ 3 ] } } < / p > < p > L o o p t h r o u g h t h e l i s t : < / p > < u l > { % f o r n i n m y _ l i s t % } < l i > { { n } } < / l i > { % e n d f o r % } < / u l > < b r > < p > S a m e l i s t w i t h a f i l t e r : { { m y _ l i s t | j o i n ( ' , ' ) } } < / < h 3 > T h i s i s t h e e n d o f m y c h i l d t e m p l a t e < / h 3 > { % b l o c k t r a i l e r % } { { s u p e r ( ) } } { % e n d b l o c k % } { % e n d b l o c k % } t-layout-3.html (partial) < d i v c l a s s = " c o n t a i n e r " > { % b l o c k h e a d i n g % } < h 1 > { % b l o c k p a g e % } { % e n d b l o c k % } - F l a s k S u p e r E x a m p l e { % e n d b l o c k % } < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < b r > { % b l o c k c o n t e n t % } { % e n d b l o c k % } < b r > < h 2 > T h i s i s p a r t o f m y b a s e t e m p l a t e < / h 2 > < b r > < d i v c l a s s = " t r a i l e r " > { % b l o c k t r a i l e r % } W a t c h ! T h i s w i l l b e a d d e d t o m y b a s e a n d c h i l d t e m p l a t e s < b r > < b r > < b r > { % e n d b l o c k % } < / d i v > 18 / 27
19. Example t-3 { % m a c r o n a v _ l i n k ( e n d p o i n t , n a m e ) % } < l i > < a h r e f = " # { { e n d p o i n t } } " > { { n a m e } } < / a > < / l i > { % e n d m a c r o % } t-macro-3.html t-layout-3.html (partial) { % f r o m " t - m a c r o - 3 . h t m l " i m p o r t n a v _ l i n k w i t h c o n t e x t % } < ! D O C T Y P E h t m l > . . . { % b l o c k h e a d % } < t i t l e > { % b l o c k t i t l e % } { % e n d b l o c k % } - F l a s k S u p e r E x a m p l e { % e n d b l o c k % } . . . < d i v i d = " n a v b a r " c l a s s = " c o l l a p s e n a v b a r - c o l l a p s e " > < u l c l a s s = " n a v n a v b a r - n a v " > { { n a v _ l i n k ( ' h o m e ' , ' H o m e ' ) } } { { n a v _ l i n k ( ' a b o u t ' , ' A b o u t ' ) } } { { n a v _ l i n k ( ' c o n t a c t ' , ' C o n t a c t U s ' ) } } < l i c l a s s = " d r o p d o w n " > . . . < / l i > < / u l > < / d i v > 19 / 27
20. output-t-3.html 20 / 27
21.  Jinja + Flask 21 / 27
22. f r o m f l a s k i m p o r t F l a s k , r e n d e r _ t e m p l a t e i m p o r t d a t e t i m e a p p = F l a s k ( _ _ n a m e _ _ ) # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @ a p p . t e m p l a t e _ f i l t e r ( ) d e f d a t e t i m e f i l t e r ( v a l u e , f o r m a t = ' % Y / % m / % d % H : % M ' ) : r e t u r n v a l u e . s t r f t i m e ( f o r m a t ) a p p . j i n j a _ e n v . f i l t e r s [ ' d a t e t i m e f i l t e r ' ] = d a t e t i m e f i l t e r # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @ a p p . r o u t e ( " / " ) d e f t e m p l a t e _ t e s t ( ) : r e t u r n r e n d e r _ t e m p l a t e ( ' f - t e m p l a t e . h t m l ' , m y _ s t r i n g = " W h e e e e e ! " @ a p p . r o u t e ( " / h o m e " ) d e f h o m e ( ) : r e t u r n r e n d e r _ t e m p l a t e ( ' f - t e m p l a t e . h t m l ' , m y _ s t r i n g = " F o o " @ a p p . r o u t e ( " / a b o u t " ) d e f a b o u t ( ) : r e t u r n r e n d e r _ t e m p l a t e ( ' f - t e m p l a t e . h t m l ' , m y _ s t r i n g = " B a r " @ a p p . r o u t e ( " / c o n t a c t " ) d e f c o n t a c t ( ) : r e t u r n r e n d e r _ t e m p l a t e ( ' f - t e m p l a t e . h t m l ' , m y _ s t r i n g = " F o o B a r " # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - i f _ _ n a m e _ _ = = ' _ _ m a i n _ _ ' : a p p . r u n ( h o s t = ' 0 . 0 . 0 . 0 ' , d e b u g = T r u e ) Example #4 f-macro.html { % m a c r o n a v _ l i n k ( e n d p o i n t , n a m e ) % } { % i f r e q u e s t . e n d p o i n t . e n d s w i t h ( e n d p o i n t ) % } < l i c l a s s = " a c t i v e " > < a h r e f = " { { u r l _ f o r ( e n d p o i n t ) } } " > { { n a m e } { % e l s e % } < l i > < a h r e f = " { { u r l _ f o r ( e n d p o i n t ) } } " > { { n a m e } } < / a > < / l i > { % e n d i f % } { % e n d m a c r o % } 22 / 27
23. Example #4 f-template.html { % e x t e n d s " f - l a y o u t . h t m l " % } { % b l o c k t i t l e % } { { t i t l e } } { % e n d b l o c k % } { % b l o c k h e a d % } { { s u p e r ( ) } } { % e n d b l o c k % } { % b l o c k p a g e % } { { t i t l e } } { % e n d b l o c k % } { % b l o c k h e a d i n g % } { { s u p e r ( ) } } { % e n d b l o c k % } { % b l o c k c o n t e n t % } < h 3 > T h i s i s t h e s t a r t o f m y c h i l d t e m p l a t e < / h 3 > < b r > < h 4 > C u r r e n t d a t e / t i m e : { { c u r r e n t _ t i m e | d a t e t i m e f i l t e r } } < b r > < p > M y s t r i n g : { { m y _ s t r i n g } } < / p > < p > V a l u e f r o m t h e l i s t : { { m y _ l i s t [ 3 ] } } < / p > < p > L o o p t h r o u g h t h e l i s t : < / p > < u l > { % f o r n i n m y _ l i s t % } < l i > { { n } } < / l i > { % e n d f o r % } < / u l > < b r > < p > S a m e l i s t w i t h a f i l t e r : { { m y _ l i s t | j o i n ( ' , ' ) } } < / p > < h 3 > T h i s i s t h e e n d o f m y c h i l d t e m p l a t e < / h 3 > { % b l o c k t r a i l e r % } { { s u p e r ( ) } } { % e n d b l o c k % } { % e n d b l o c k % } 23 / 27
24. http://localhost:5000 24 / 27
25. http://localhost:5000/about 25 / 27
26. References 1. Welcome to Jinja2 — Jinja2 Documentation 2. Introduction 3. Tips and Tricks 4. Template Designer 5. Primer on Jinja Templating - Real Python Other Readings 1. Jinja2 Example | Python Adventures 2. Jinja2 Examples 3. Quickstart Guide to Using Jinja2 26 / 27
27.  END Eueung Mulyana http://eueung.github.io/python/jinja2 Python CodeLabs | Attribution-ShareAlike CC BY-SA 27 / 27