Простой текст

Pug предоставляет четыре способа получения простого текста — то есть любого кода или текстового содержимого, которое должно быть в основном необработанным и непосредственно включено в рендер HTML. Они полезны в разных ситуациях.

Простой текст по-прежнему использует тег и строковую интерполяцию, но первое слово в строке не является тегом Pug. И поскольку простой текст не экранируется, вы также можете включать буквальный HTML.

Одной распространённой ошибкой здесь является управление пробелами в рендерном HTML. Мы обсудим это в конце этой страницы.

Встраивание в тег

Самый простой способ добавить простой текст — это встроить его. Первым элементом в строке является сам тег. Всё после тега и одного пробела будет текстовым содержимым этого тега. Это наиболее полезно, когда содержимое простого текста короткое (или если вы не возражаете против длинных строк).

p This is plain old <em>text</em> content.

<p>This is plain old <em>text</em> content.</p>

Буквальный HTML

Целые строки также обрабатываются как простой текст, когда начинаются с открытой угловой скобки (<), что может иногда быть полезно для написания буквальных тегов HTML в местах, которые в противном случае могут быть неудобными. Например, одно применение — это условные комментарии. Поскольку буквальные теги HTML не обрабатываются, они не закрываются автоматически, в отличие от тегов Pug.

<html>

body
  p Indenting the body tag here would make no difference.
  p HTML itself isn't whitespace-sensitive.

</html>

<html>

<body>
  <p>Indenting the body tag here would make no difference.</p>
  <p>HTML itself isn't whitespace-sensitive.</p>
</body>

</html>

Трубопроводный текст

Ещё один способ добавить простой текст в шаблоны — это добавить в начало строки символ трубы (|). Этот метод полезен для смешивания простого текста со встроенными тегами, как мы обсудим позже, в разделе «Управление пробелами».

p
  | The pipe always goes at the beginning of its own line,
  | not counting indentation.

<p>The pipe always goes at the beginning of its own line,
  not counting indentation.</p>

Блок в теге

Часто вам может потребоваться большой блок текста внутри тега. Хороший пример — написание JavaScript и CSS-кода в тегах script и style. Для этого просто добавьте . сразу после имени тега или после закрывающей скобки, если у тега есть атрибуты.

Между тегом и точкой не должно быть пробелов. Содержимое простого текста тега должно быть отступено на один уровень:

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

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

Вы также можете создать блок простого текста с точкой после других тегов внутри родительского тега.

div
  p This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.

<div>
  <p>This text belongs to the paragraph tag.</p><br />This text belongs to the div tag.
</div>

Управление пробелами

Управление пробелами в рендерном HTML является одной из самых сложных частей изучения Pug. Однако не волнуйтесь, вы быстро освоитесь.

Вам просто нужно запомнить две основные точки о том, как работают пробелы. При компиляции в HTML:

Pug удаляет отступы и все пробелы между элементами.
- Таким образом, закрывающий тег HTML-элемента будет соприкасаться с открывающим тегом следующего. Это, как правило, не проблема для блочных элементов, таких как абзацы, потому что они всё равно будут отображаться как отдельные абзацы в веб-браузере (если вы не изменили их CSS display свойство). Однако см. описанные ниже методы, когда вам действительно нужно вставить пробелы между элементами.
Pug сохраняет пробелы внутри элементов, включая:
- все пробелы посередине строки текста.
- лидирующие пробелы за пределами отступа блока.
- конечные пробелы.
- переводы строк внутри блока простого текста или между последовательными трубопроводными строками.

Таким образом… Pug удаляет пробелы между тегами, но сохраняет пробелы внутри них. Преимущество в том, что это даёт вам полный контроль над тем, должны ли теги и/или текст касаться друг друга. Это даже позволяет размещать теги посреди слов.

| You put the em
em pha
| sis on the wrong syl
em la
| ble.

You put the em<em>pha</em>sis on the wrong syl<em>la</em>ble.

Цена в том, что это требует от вас думать о том, как теги и текст соприкасаются.

Если вам нужен текст и/или теги, чтобы соприкасались — возможно, вам нужна точка, которая появляется за пределами гиперссылки в конце предложения — это легко, так как это происходит, если вы не скажете Pug иначе.

a ...sentence ending with a link
| .

<a>...sentence ending with a link</a>.

Если вам нужно добавить пробелы, у вас есть несколько вариантов:

Не рекомендуется

В зависимости от того, где вам нужны пробелы, вы можете добавить дополнительный пробел в начале текста (после отступа блока, символа трубы и/или тега). Или вы можете добавить конечный пробел в конце текста.

Обратите внимание на конечные и начальные пробелы здесь:

| Hey, check out 
a(href="http://example.biz/kitteh.png") this picture
|  of my cat!

Hey, check out <a href="http://example.biz/kitteh.png">this picture</a> of my cat!

Вышеприведённое решение работает отлично, но, возможно, немного опасно: многие редакторы кода по умолчанию удаляют конечные пробелы при сохранении. Вам и всем вашим участникам может потребоваться настроить свои редакторы, чтобы предотвратить автоматическое удаление конечных пробелов.