纯文本

Pug 提供了四种获取纯文本的方法，即任何代码或文本内容，这些内容应该直接进入呈现的 HTML 中，几乎不经过处理。它们在不同的情况下很有用。

纯文本仍然使用标签和字符串插值，但是行中的第一个单词不是 Pug 标签。并且因为纯文本没有转义，所以你还可以包含字面 HTML。

这里一个常见的陷阱是管理呈现的 HTML 中的空格。我们将在本页的末尾讨论这个问题。

在标签中内联

添加纯文本的最简单方法是内联。行中的第一个术语是标签本身。标签和一个空格之后的所有内容都将是该标签的文本内容。当纯文本内容较短（或者你不介意行变长）时，这非常有用。

<p>这是纯文本 <em>text</em> 内容。</p>

当整行以左尖括号 (<) 开头时，它们也被视为纯文本，这偶尔可能对在其他情况下可能不方便的地方编写字面 HTML 标签很有用。例如，一个用例是条件注释。由于字面 HTML 标签不会被处理，因此它们不会像 Pug 标签那样自动关闭。

<html> <body> <p>在这里缩进 body 标签不会有任何区别。</p> <p>HTML 本身对空格不敏感。</p> </body> </html>

在模板中添加纯文本的另一种方法是在行首添加管道字符 (|)。此方法可用于将纯文本与内联标签混合使用，如我们在后面空白控制部分中所讨论的。

<p>管道始终位于其所在行的开头，不计算缩进。</p>

通常，您可能希望在标签内有大段文本。一个很好的例子是在 script 和 style 标签中编写 JavaScript 和 CSS 代码。要做到这一点，只需在标签名称后面或在标签有属性时在闭合括号后添加一个 .。

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

<script> if (usingPug) console.log('you are awesome') else console.log('use pug') </script>

您还可以在父标签内的其他标签之后创建一个纯文本点块。

<div> <p>此文本属于段落标签。</p><br />此文本属于 div 标签。 </div>

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

您只需要记住有关空白工作原理的两个要点。编译为 HTML 时

Pug 会删除缩进和所有元素之间的空白。
- 因此，HTML 元素的闭合标签将触及下一个标签的开始标签。对于段落等块级元素，这通常不是问题，因为它们仍将在 Web 浏览器中作为单独的段落呈现（除非您已更改其 CSS display 属性）。但是，请参阅下面描述的方法，以了解何时需要在元素之间插入空格。
Pug 保留元素内的空白，包括
- 文本行中间的所有空白。
- 超出块缩进的前导空白。
- 尾随空白。
- 纯文本块内或连续管道行之间的换行符。

因此…Pug 会删除标签之间的空白，但保留标签内的空白。这里的价值在于它可以让您完全控制标签和/或纯文本是否应该接触。它甚至允许您将标签放在单词中间。

您将 em<em>pha</em>重音放在错误的音节<em>la</em>上。

权衡之处是它要求您考虑并控制标签和文本是否接触。

如果您需要文本和/或标签接触——也许您需要一个句号出现在句末超链接之外——这很容易，因为这基本上是发生的事情，除非您另有指示 Pug。

<a>...以链接结尾的句子</a>.

如果您需要添加空格，您有几个选择

根据您需要空格的位置，您可以在文本开头（在块缩进、管道字符和/或标签之后）添加一个额外的空格。或者您可以在文本末尾添加一个尾随空格。

注意此处尾随和前导空格

嘿，看看 <a href="http://example.biz/kitteh.png">这张图片</a> 我的猫！

上述解决方案效果很好，但不可否认可能有点危险：许多代码编辑器在保存时默认会删除尾随空格。您和所有贡献者可能必须配置编辑器以防止自动删除尾随空格。