纯文本

Pug 提供了四种获取纯文本的方法,即任何应该直接进入渲染的 HTML 的代码或文本内容(大部分未经处理)。它们在不同情况下很有用。

纯文本仍然使用标签和字符串 interpolation,但该行的第一个单词不是 Pug 标签。由于纯文本不会被转义,因此你还可以包含字面量 HTML。

这里的一个常见陷阱是管理渲染的 HTML 中的空白。我们将在本页末尾讨论这一点。

内联在标签中

添加纯文本的最简单方法是内联。该行的第一项是标签本身。标签后面的所有内容和一个空格都将是该标签的文本内容。当纯文本内容较短时(或者如果你不介意行长),这非常有用。

字面量 HTML

当整行以左尖括号 (<) 开头时,整行也被视为纯文本,这有时对于在不方便的地方编写字面量 HTML 标记很有用。例如,一个用例是 条件注释。由于文本 HTML 标签不会被处理,因此它们不会自动关闭,这与 Pug 标签不同。

管道文本

将纯文本添加到模板的另一种方法是在行前添加竖线字符 (|)。此方法对于将纯文本与内联标记混合非常有用,正如我们稍后在空白控制部分中讨论的那样。

标签中的块

通常,你可能需要在标签中包含大块文本。一个很好的例子是在 scriptstyle 标签中编写 JavaScript 和 CSS 代码。为此,只需在标签名称后添加 .,或者在右括号后添加 .(如果标签有 attributes)。

标签和点之间不应有空格。标签的纯文本内容必须缩进一级:

你还可以在父标记中的其他标记之后创建纯文本点块。

空白控制

管理渲染 HTML 的空白是学习 Pug 中最棘手的部分之一。不过别担心,你很快就会掌握它的窍门。

你只需要记住有关空白如何工作的两个要点。编译为 HTML 时:

  1. Pug 删除缩进以及元素之间的所有空格。

    • 因此,HTML 元素的结束标记将接触下一个元素的开始标记。对于像段落这样的块级元素来说,这通常不是问题,因为它们仍然会在 Web 浏览器中渲染为单独的段落(除非你更改了它们的 CSS display 属性)。但是,当你确实需要在元素之间插入空格时,请参阅下面描述的方法。

  2. Pug 保留元素内的空格,包括:

    • 一行文本中间的所有空白。

    • 块缩进之外的前导空格。

    • 尾随空白。

    • 纯文本块内或连续管道行之间的换行符。

所以…Pug 删除了标签之间的空白,但保留了标签内部的空白。这里的价值在于,它使你可以完全控制标签和/或纯文本是否应该接触。它甚至允许你将标签放置在单词中间。

权衡是,它需要你考虑并控制标签和文本是否接触。

如果你需要触摸文本和/或标签 - 也许你需要在句子末尾的超链接之外显示一个句点 - 这很容易,因为除非你另外告诉 Pug,否则基本上就是这样发生的。

如果你需要添加空间,你有以下几种选择:

你可以添加一个或多个空管道线 - 管道后面有空格或没有任何内容。这将在渲染的 HTML 中插入空格。

如果你的内联标记不需要很多属性,你可能会发现在纯文本块中使用标记插值或字面量 HTML 是最简单的方法。

根据需要空格的位置,你可以在文本开头添加额外的空格(在块缩进、竖线字符和/或标记之后)。或者你可以在文本末尾添加尾随空格。

注意此处的尾随空格和前导空格:

上面的解决方案工作得很好,但无可否认可能有点危险:默认情况下,许多代码编辑器会在保存时删除尾随空格。你和你的所有贡献者可能必须配置你的编辑器以防止自动删除尾随空格。

Pug 中文文档 - 粤ICP备14034220号-1