Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Templates ======

Doc de **Jinja** : 
  * [[https://jinja.palletsprojects.com/en/3.0.x/templates/]]
  * [[https://jinja.palletsprojects.com/en/3.1.x/]]

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

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

La fonction **render_template** :

<code python>
from flask import render_template

@app.route("/")
def home():
    return render_template("index.html")
</code>

Passage de valeurs au template :

<code html article.html>
<h1>{{titre}}</h1>
<p>{{contenu}}</p>
</code>

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

===== Héritage de templates =====

Template de base :

<code html 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>
</code>

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

<code html article.html>
{% extends "base.html" %}

{% block pagetitle %}
    Article : {{titre}}
{% endblock %}

{% block body %}
    <h1>{{titre}}</h1>
    <p>{{contenu}}</p>
{% endblock %}
</code>

===== Déclaration de tableau d'objets =====

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

<code html>
{%
    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>
</code>

===== Macros =====

<code html>
{% 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>
</code>

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

<code html>
{% import "macros.html" as m %}

{{ m.menu_item("Exemple", url_for('test')) }}
</code>

===== 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 :

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

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

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

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

<code twig>
<p>Environnement: {{config['ENV']}}</p>

               - ou -
               
<p>Environnement: {{config.ENV}}</p>
</code>

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

Outils pour utilisateurs

Outils du site

Outils de la page
