web-dev-qa-db-fra.com

Jinja2 correctement indent le bloc inclus

J'ai deux fichiers:

base.html 

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>{{title}}</title>
    </head>
    <body>
       {% block content %}
       {% endblock %}   
    </body>
</html>

register.html 

{% extends "base.html" %}
{% block content %}
<h1>Register</h1>
<form action="" method="post" name="register">
    {{ form.hidden_tag() }}
    {{ form.login.label }} {{ form.login(size=20) }}
    {{ form.password.label }} {{ form.password(size=20) }}
    <input type="submit" value="Register">
</form>
{% endblock %}

Il est rendu comme ceci:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>Register</title>
    </head>
    <body>

<h1>Register</h1>
<form action="" method="post" name="register">
    <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1393257771.168161##ce877b3519f192c05d3b409f3b7b07bb147dead7"></div>
    <label for="login">login</label> <input id="login" name="login" size="20" type="text" value="">
    <label for="password">password</label> <input id="password" name="password" size="20" type="password" value="">
    <input type="submit" value="Register">
</form>

    </body>
</html>

J'aimerais réaliser ceci:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>Register</title>
    </head>
    <body>
        <h1>Register</h1>
        <form action="" method="post" name="register">
            <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1393257771.168161##ce877b3519f192c05d3b409f3b7b07bb147dead7"></div>
            <label for="login">login</label> <input id="login" name="login" size="20" type="text" value="">
            <label for="password">password</label> <input id="password" name="password" size="20" type="password" value="">
            <input type="submit" value="Register">
        </form>
    </body>
</html>

Est-ce que je manque quelque chose? J'ai essayé Google et en jouant avec les empreintes de modèle, le filtre indent ne semble pas s'appliquer ici. Je ne veux pas coder en dur l'indentation dans le bloc interne, car cela casserait si je décidais de modifier la mise en forme et les éléments de la base ultérieurement.

flaskjinja2
24
Fenikso

Bien que je pense que l’augmentation de la taille du document est un bon argument contre les documents «correctement» indentés, jinja2 fournit en fait une fonction pour faire ce que vous voulez

indent(s, width=4, indentfirst=False)

que vous utiliseriez dans votre base.html avec une macro, comme décrit dans cette réponse sur SO .

Je ferais probablement cela quand même une macro et l'appellerais render_register_form:

{% macro render_register_form(form) %}
    <h1>Register</h1>
    <form action="" method="post" name="register">
        {{ form.hidden_tag() }}
        {{ form.login.label }} {{ form.login(size=20) }}
        {{ form.password.label }} {{ form.password(size=20) }}
        <input type="submit" value="Register">
    </form>
{% endmacro %}

et ensuite l'inclure si nécessaire, par exemple, avec l'indentation de 8 espaces, comme:

{{ render_register_form(my_form)|indent(8, True) }}
28
Midnighter

Bonne question. Je crois que Jinja2 ne fait pas cela.

La principale question que vous devez vous poser est de savoir pourquoi vous voulez que le code HTML soit correctement mis en retrait, car les navigateurs ne s’y intéressent pas. Dans une application de production, il est plus efficace d'aller dans l'autre sens et de supprimer tous les espaces pour réduire la taille de la page.

Si cela vous intéresse lors du développement, vous pouvez alors transmettre le code HTML généré par render_template() par un indenteur tel que prettify() de BeautifulSoup. Je ne le recommande pas pour un système de production, car l’exécution de vos fonctions prendra plus de temps.

5
Miguel

Je sais que la question est assez ancienne mais j’ai trouvé une solution intéressante à ce problème . Vous pouvez appliquer des filtres à des blocs de texte entiers: Documentation sur le concepteur de modèles/Filtres

{% filter indent(width=4) %}
{% include "./sub-template.yml.j2" %}
{% endfilter %}
3
M. Scho.