Table des matières

Templates

Templates

Doc de Jinja :

Les templates sont généralement placés dans un dossier /templates

/home/marc/mon_projet
├── venv
│   └── ...
├── templates
│   └── index.html
└── app.py

La fonction render_template :

from flask import render_template
 
@app.route("/")
def home():
    return render_template("index.html")

Passage de valeurs au template :

article.html

<h1>{{titre}}</h1>
<p>{{contenu}}</p>

@app.route("/article/<id>")
def article(id):
    return render_template(
        "article.html",
        titre   = "Article n°%s" % id,
        contenu = "Contenu de l'article..."
    )

Héritage de templates

Template de base :

base.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block pagetitle %}{% endblock %}</title>
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

Template pour l'affichage d'un article ; ce template hérite de base.html :

article.html

{% extends "base.html" %}
 
{% block pagetitle %}
    Article : {{titre}}
{% endblock %}
 
{% block body %}
    <h1>{{titre}}</h1>
    <p>{{contenu}}</p>
{% endblock %}

Déclaration de tableau d'objets

Exemple : un menu déclaré sous forme de tableau JSON dont le rendu est effectué dans un boucle.

{%
    set items = [
        { "title": "Accueil", "url": url_for('home')  },
        { "title": "Admin",   "url": url_for('admin') }
    ]
%}
 
<ul class="nav">
    {% for item in items %}
    <li class="nav-item">
        <a class="nav-link" href="{{ item.url }}">
            {{ item.title }}
        </>
    </li>
    {% endfor %}
</ul>

Macros

{% macro menu_item(title, url) -%}
<li class="nav-item">
    <a class="nav-link" href="{{ url }}">
        {{ title }}
    </a>
</li>
{%- endmacro %}
 
<ul class="nav">
    {{ menu_item("Accueil", url_for('home'))  }}
    {{ menu_item("Admin",   url_for('admin')) }}
</ul>

Si les macros sont stockées dans un fichier séparé, utiliser la commande import et préfixer les appels d'un alias :

{% import "macros.html" as m %}
 
{{ m.menu_item("Exemple", url_for('test')) }}

Dictionnaire

Pour afficher le contenu d'un dictionnaire dans un tableau, l'important est d'appeler la méthode items() du dictionnaire lorsqu'on veut le parcourir dans une boucle :

@app.route("/test")
def test():
    return render_template("test.html",
        dictionnaire = {
            'nom'   : 'Dupont',
            'prenom': 'Albert',
            'ville' : 'Bourg-les-Endives',
            ...     : ...
        }
    )

test.html

<table>
    {% for key, value in dictionnaire.items() %}
    <tr>
        <td>{{key}}</td>
        <td>{{value}}</td>
    </tr>
    {% endfor %}
</table>

Accès aux données de l'application et de la configuration

Pour accéder à la configuration de l'application, utiliser la variable config :

<p>Environnement: {{config['ENV']}}</p>
 
               - ou -
 
<p>Environnement: {{config.ENV}}</p>

{% if config.ENV = 'development' %}
<script src="version_de_developpement.js">
{% else %}
<script src="version_de_production.js">
{% endif %}

Cramnurbel

Panneau latéral

Plan du Site:

Table des matières

Templates

Héritage de templates

Déclaration de tableau d'objets

Macros

Dictionnaire

Accès aux données de l'application et de la configuration

Cramnurbel

Outils pour utilisateurs

Outils du site

Panneau latéral

Plan du Site:

Table des matières

Templates

Héritage de templates

Déclaration de tableau d'objets

Macros

Dictionnaire

Accès aux données de l'application et de la configuration

Outils de la page