Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Jinja2

Introduction to Jinja2

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

Eueung Mulyana

December 10, 2015
Tweet

More Decks by Eueung Mulyana

Other Decks in Programming

Transcript

  1.  Python - Jinja2
    Eueung Mulyana
    http://eueung.github.io/python/jinja2
    Python CodeLabs | Attribution-ShareAlike CC BY-SA
    1 / 27

    View full-size slide

  2. Agenda
    Jinja Basics
    Rendering to Files
    Jinja + Flask
    2 / 27

    View full-size slide

  3.  Jinja Basics
    3 / 27

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  10. output-basic-3.html
    10 / 27

    View full-size slide

  11.  Rendering to Files
    Based on the Codes by @mjhea0 (Michael Herman/Real Python)
    11 / 27

    View full-size slide

  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

    View full-size slide

  13. output-t-0.html
    13 / 27

    View full-size slide

  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

    View full-size slide

  15. output-t-1.html
    15 / 27

    View full-size slide

  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

    View full-size slide

  17. output-t-2.html
    17 / 27

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  20. output-t-3.html
    20 / 27

    View full-size slide

  21.  Jinja + Flask
    21 / 27

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  24. http://localhost:5000
    24 / 27

    View full-size slide

  25. http://localhost:5000/about
    25 / 27

    View full-size slide

  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

    View full-size slide

  27.  END
    Eueung Mulyana
    http://eueung.github.io/python/jinja2
    Python CodeLabs | Attribution-ShareAlike CC BY-SA
    27 / 27

    View full-size slide