jinja2 - descripcion - ¿Etiqueta{% spaceless%} para plantillas de Jinja?

meta title y meta descripcion

Question

Django tiene una etiqueta {% spaceless %} útil que elimina el espacio en blanco extra de HTML.

Mis plantillas producen una gran cantidad de espacios en blanco y es muy difícil agregar el {%- y -%} todas partes para hacer el control de espacios en blanco. ¿Alguien ha visto un filtro como {% spaceless %} para Jinja, o tal vez {% htmltidy %} , para que pueda ver HTML limpio mientras se desarrolla?

Answer 1

Estoy haciendo:

{% filter trim %}
... code ...
{% endfilter %}

Answer 2

Existe una extensión jinja2 que logra este efecto, creada por el desarrollador jinja2.

https://github.com/mitsuhiko/jinja2-htmlcompress

Answer 3

Tuve este problema cuando quería imprimir elementos de nivel de bloque en línea sin separación entre ellos (por ejemplo, para generar una cuadrícula fluida de bloques), pero quería un marcado de aspecto limpio.

https://github.com/mitsuhiko/jinja2-htmlcompress espacios en blanco entre etiquetas HTML, pero también entre etiquetas y variables jinja. Eso no es ideal porque lo obliga a usar soluciones alternativas como {{ '' '' }} o entidades HTML codificadas como   .

La etiqueta sin espacio de coffin parece la solución ideal, pero agrega una dependencia (django) y una gran cantidad de funcionalidades innecesarias.

Si solo quieres usar las etiquetas sin espacio de Django, puedes usar el siguiente código que he adaptado de coffin:

jinja_extensions.py

# -*- coding: utf-8 -*-

from jinja2 import nodes
from jinja2.ext import Extension

import re


class SpacelessExtension(Extension):
    """
    Removes whitespace between HTML tags at compile time, including tab and newline characters.
    It does not remove whitespace between jinja2 tags or variables. Neither does it remove whitespace between tags
    and their text content.
    Adapted from coffin:
        https://github.com/coffin/coffin/blob/master/coffin/template/defaulttags.py
    """

    tags = set([''spaceless''])

    def parse(self, parser):
        lineno = parser.stream.next().lineno
        body = parser.parse_statements([''name:endspaceless''], drop_needle=True)
        return nodes.CallBlock(
            self.call_method(''_strip_spaces'', [], [], None, None),
            [], [], body,
        ).set_lineno(lineno)

    def _strip_spaces(self, caller=None):
        return re.sub(r''>/s+<'', ''><'', caller().strip())

Dondequiera que definas tu entorno jinja2

extensions=[''path.to.jinja_extensions.SpacelessExtension'']

Ejemplo de uso

<style>
    *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .features {
        text-align: center;
    }
        .features div {
            display: inline-block;
            text-align: left;
            width: 25%;
            padding: 20px;
        }
        /* A style to help us identify the blocks */
        .features div:nth-child(odd) {
            background: #f5f5f5;
        }
    @media only screen and (max-width: 319px) {
        /* For small screens, display a single feature per line */
        .features div {
            width: 100%;
        }
    }
</style>
{% spaceless %} {# We remove whitespace between these inline-block tags without affecting the markup #}
<div class="features">
    <div>
        <h2>Feature 1</h2>
        <p>Content</p>
    </div>
    <div>
        <h2>Feature 2</h2>
        <p>Content</p>
    </div>
    <div>
        <h2>Feature 3</h2>
        <p>Content</p>
    </div>
    <div>
        <h2>Feature 4</h2>
        <p>Content</p>
    </div>
    <div>
        <h2>Feature 5</h2>
        <p>Content, second line on desktop</p>
    </div>
</div>
{% endspaceless %}

Resultado sin espacio

Resultado sin espacio (observe que el espacio en blanco invisible ha movido el cuarto bloque a la siguiente línea)

Answer 4

{% filter trim %} es equivalente a {% spaceless %} .

Answer 5

{% filter replace("/t", " ")|replace("    ", " ")|replace("   ", " ")|replace("  ", " ")|replace("/n ", "/n")|replace("/n/n", "/n") %}

Lo uso para reemplazar múltiples espacios por un solo separador. No agradable pero eficiente sin extensión.