纯文本(Plain Text)

¥Plain Text

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

¥Pug provides four ways of getting plain text — that is, any code or text content that should go, mostly unprocessed, directly into the rendered HTML. They are useful in different situations.

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

¥Plain text does still use tag and string interpolation, but the first word on the line is not a Pug tag. And because plain text is not escaped, you can also include literal HTML.

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

¥One common pitfall here is managing whitespace in the rendered HTML. We’ll talk about that at the end of this page.

内联在标签中(Inline in a Tag)

¥Inline in a Tag

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

¥The easiest way to add plain text is inline. The first term on the line is the tag itself. Everything after the tag and one space will be the text contents of that tag. This is most useful when the plain text content is short (or if you don’t mind lines running long).

字面量 HTML(Literal HTML)

¥Literal HTML

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

¥Whole lines are also treated as plain text when they begin with a left angle bracket (<), which may occasionally be useful for writing literal HTML tags in places that could otherwise be inconvenient. For example, one use case is conditional comments. Since literal HTML tags do not get processed, they do not self-close, unlike Pug tags.

管道文本(Piped Text)

¥Piped Text

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

¥Another way to add plain text to templates is to prefix a line with a pipe character (|). This method is useful for mixing plain text with inline tags, as we discuss later, in the Whitespace Control section.

标签中的块(Block in a Tag)

¥Block in a Tag

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

¥Often you might want large blocks of text within a tag. A good example is writing JavaScript and CSS code in the script and style tags. To do this, just add a . right after the tag name, or after the closing parenthesis, if the tag has attributes.

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

¥There should be no space between the tag and the dot. Plain text contents of the tag must be indented one level:

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

¥You can also create a dot block of plain text after other tags within the parent tag.

空白控制(Whitespace Control)

¥Whitespace Control

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

¥Managing the whitespace of the rendered HTML is one of the trickiest parts about learning Pug. Don’t worry, though, you’ll get the hang of it soon enough.

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

¥You just need to remember two main points about how whitespace works. When compiling to HTML:

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

    ¥Pug removes indentation, and all whitespace between elements.

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

      ¥So, the closing tag of an HTML element will touch the opening tag of the next. This is generally not a problem for block-level elements like paragraphs, because they will still render as separate paragraphs in the web browser (unless you have changed their CSS display property). See the methods described below, however, for when you do need to insert space between elements.

  2. Pug 保留元素内的空格，包括：

    ¥Pug preserves whitespace within elements, including:

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

      ¥all whitespace in the middle of a line of text.

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

      ¥leading whitespace beyond the block indentation.

    • 尾随空白。

      ¥trailing whitespace.

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

      ¥line breaks within a plain text block, or between consecutive piped lines.

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

¥So…Pug drops the whitespace between tags, but keeps the whitespace inside them. The value here is that it gives you full control over whether tags and/or plain text should touch. It even lets you place tags in the middle of words.

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

¥The trade-off is that it requires you to think about and take control over whether tags and text touch.

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

¥If you need the text and/or tags to touch — perhaps you need a period to appear outside the hyperlink at the end of a sentence — this is easy, as it’s basically what happens unless you tell Pug otherwise.

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

¥If you need to add space, you have a few options:

¥Recommended Solutions

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

¥You could add one or more empty piped lines — a pipe with either spaces or nothing after it. This will insert whitespace in the rendered HTML.

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

¥If your inline tags don’t require many attributes, you may find it easiest to use tag interpolation, or literal HTML, within a plain text block.

¥Not recommended

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

¥Depending on where you need the whitespace, you could add an extra space at the beginning of the text (after the block indentation, pipe character, and/or tag). Or you could add a trailing space at the end of the text.

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

¥NOTE the trailing and leading spaces here:

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

¥The above solution works perfectly well, but is admittedly perhaps a little dangerous: many code editors by default will remove trailing whitespace on save. You and all your contributors may have to configure your editors to prevent automatic trailing whitespace removal.

Pug 中文网 - 粤ICP备13048890号