プレーンテキスト

Pugは、プレーンテキスト（ほとんど処理されずにレンダリングされたHTMLに直接出力されるコードまたはテキストコンテンツ）を取得する4つの方法を提供します。それぞれ異なる状況で役立ちます。

プレーンテキストでもタグと文字列の式展開は使用されますが、行の最初の単語はPugタグではありません。また、プレーンテキストはエスケープされないため、リテラルHTMLを含めることもできます。

ここでよくある落とし穴は、レンダリングされたHTMLの空白の管理です。このページの最後でそれについて説明します。

タグ内インライン

プレーンテキストを追加する最も簡単な方法は、インラインです。行の最初の用語はタグ自体です。タグと1つのスペースの後にあるすべてが、そのタグのテキストコンテンツになります。これは、プレーンテキストコンテンツが短い場合（または行が長くなっても構わない場合）に最も便利です。

リテラルHTML

行全体が左山括弧（<）で始まる場合もプレーンテキストとして扱われます。これは、不便な場所にリテラルHTMLタグを記述する場合に役立つことがあります。たとえば、ユースケースの1つは条件付きコメントです。リテラルHTMLタグは処理されないため、Pugタグとは異なり、自動的に閉じられません。

パイプテキスト

テンプレートにプレーンテキストを追加する別の方法は、行の先頭にパイプ文字（|）を付けることです。このメソッドは、空白制御セクションで後述するように、プレーンテキストとインラインタグを混在させる場合に役立ちます。

タグ内ブロック

多くの場合、タグ内に大きなテキストブロックが必要になることがあります。良い例は、scriptタグとstyleタグにJavaScriptおよびCSSコードを記述することです。これを行うには、タグ名の直後、またはタグに属性がある場合は閉じ括弧の後に.を追加します。

タグとドットの間にスペースを入れてはいけません。タグのプレーンテキストコンテンツは1レベルインデントする必要があります

親タグ内の他のタグの後に、プレーンテキストのドットブロックを作成することもできます。

空白制御

レンダリングされたHTMLの空白を管理することは、Pugを学ぶ上で最も難しい部分の1つです。しかし、心配しないでください。すぐにコツをつかむことができます。

空白の仕組みについて、2つの主要なポイントを覚えておく必要があります。HTMLにコンパイルする場合

  1. Pugはインデントと、要素間のすべての空白を削除します。
    • そのため、HTML要素の終了タグは、次の要素の開始タグに接触します。これは、段落などのブロックレベル要素の場合、一般的には問題になりません。Webブラウザでは、CSSのdisplayプロパティを変更していない限り、引き続き個別の段落としてレンダリングされるためです。ただし、要素間にスペースを挿入する必要がある場合は、以下の方法を参照してください。
  2. Pugは要素内の空白を保持します。以下が含まれます。
    • テキスト行の中央にあるすべての空白。
    • ブロックのインデントを超える先頭の空白。
    • 末尾の空白。
    • プレーンテキストブロック内、または連続したパイプライン間の改行。

つまり… Pugはタグ間の空白を削除しますが、タグ内の空白は保持します。これにより、タグやプレーンテキストが接触するかどうかを完全に制御できます。単語の途中にタグを配置することもできます。

トレードオフは、タグとテキストが接触するかどうかを考え、制御する必要があることです。

テキストやタグを接触させる必要がある場合（たとえば、文の末尾にあるハイパーリンクの外側にピリオドを表示する必要がある場合）、これは基本的にPugに指示しない限り発生するため、簡単です。.

スペースを追加する必要がある場合は、いくつかのオプションがあります。

1つ以上の空のパイプライン（スペースまたは何もないパイプ）を追加できます。これにより、レンダリングされたHTMLに空白が挿入されます。

インラインタグに多くの属性が必要ない場合は、プレーンテキストのブロック内でタグの式展開またはリテラルHTMLを使用するのが最も簡単な場合があります。

空白が必要な場所に応じて、テキストの先頭（ブロックのインデント、パイプ文字、および/またはタグの後）に余分なスペースを追加できます。または、テキストの末尾に末尾のスペースを追加できます。

ここで末尾と先頭のスペースに注意してください

上記のソリューションは完全に機能しますが、確かに少し危険です。多くのコードエディターは、デフォルトで保存時に末尾の空白を削除します。あなたとすべてのコントリビューターは、末尾の空白の自動削除を防ぐためにエディターを設定する必要がある場合があります。