Question

Django有一个有用的{% spaceless %}标记，用于从HTML中删除额外的空格。

我的模板产生了大量的空白，并且在任何地方添加{%-和-%}以进行空白控制真是太痛苦了。是否有人为Jinja或{% spaceless %}看到了{% htmltidy %}这样的过滤器，以便我可以在开发时查看干净的HTML？

Answer 1

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

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

Answer 2

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

jinja2-htmlcompress删除HTML标记之间的空格，但也删除jinja标记和变量之间的空格。这并不理想，因为它会强制您使用诸如{{ ' ' }}之类的解决方法或 等硬编码的html实体。

coffin的无空格标签看起来是理想的解决方案，但它增加了一个依赖项（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 %}

无空间的结果

with

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

without

Answer 3

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

Answer 4

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

我用它来仅用一个分隔符替换多个空格。不好，但没有扩展的效率。

Answer 5

我在做：

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

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

5 个答案: