Jinja模板的{%spaceless%}标签？

Question

Django有一个有用的{% spaceless %}标记,可以从HTML中删除额外的空格.

我的模板产生了很多空白,添加{%-和处理-%}空白控制的地方太麻烦了.有没有人看过类似于{% spaceless %}Jinja 的过滤器,或者也许{% htmltidy %},以便我可以在开发时查看干净的HTML？

Answer 1

有一个jinja2扩展实现了这个效果,由jinja2开发人员编写

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

Answer 2

当我想打印内嵌块级元素而没有它们之间的分离时(例如渲染块的流畅网格),我遇到了这个问题,但我想要一个干净的标记.

jinja2-htmlcompress剥离HTML标记之间的空格,以及jinja标记和变量之间的空格.这并不理想,因为它会强制您使用诸如{{ ' ' }}硬编码的html实体之类的变通办法 .

棺材的无空间标签看起来是理想的解决方案,但它增加了一个依赖(django)和许多不必要的功能.

如果你只想使用Django的无空间标签,你可以使用我从棺材改编的以下代码:

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())

无论您在哪里定义jinja2环境

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

用法示例

<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 %}

无空间的结果

没有空间的结果 (请注意,不可见的空格已将第四个块移动到下一行)

Answer 3

{% filter trim %}相当于{% spaceless %}.