PUG HTMLテンプレートエンジン：初心者ガイド

Webデザイナーまたは開発者として、私たちは皆、HTMLのかなりのシェアを書かなければならない可能性があります。そして、これは最も難しい作業ではありませんが、しばしば少し退屈または反復的に感じることがあります。これは、パグHTMLプリプロセッサが入ってくる場所です。

HTMLも静的です。つまり、動的データを表示する場合（たとえば、APIからフェッチします）、JavaScript内のHTMLスティングのミシュマッシュになります。これは、デバッグして維持する悪夢になる可能性があります。 Pugは、ノードおよびブラウザ用のテンプレートエンジンです。 HTMLにコンパイルし、単純化された構文を備えているため、生産性が高まり、コードがより読みやすくなります。 PUGは、再利用可能なHTMLを簡単に作成し、データベースまたはAPIから引用したデータをレンダリングすることを簡単にします。 このガイドでは、Pugで起きて実行する方法を示します。まず、NPMからインストールし、基本的な構文を確認してから、PUGでJavaScriptを使用する例をいくつか見てみましょう。最後に、Pugをテンプレートエンジンとして使用するシンプルなノード/Expressプロジェクトを構築することにより、Pugのより高度な機能をいくつか検討します。

キーテイクアウト

以前はJadeとして知られていたPugは、HTMLにコンパイルするテンプレートエンジンであり、特にダイナミックコンテンツを扱う場合、より読みやすいコードを作成するのに役立ちます。

動的データのHTMLへの統合を簡素化し、データ駆動型のアプリケーションに最適ですが、小さな静的サイトや最小限の動的コンテンツには必要ありません。

インストールには、ノード、NPM、およびPUG-CLIパッケージのセットアップが含まれます。編集者には、開発の容易さを推奨する構文が強調表示されます。

PUGは、閉鎖タグなしの単純化された構文を使用し、インデントに依存してHTMLドキュメントを構造化します。これにより、書かれたコードの量を大幅に削減できます。

動的テンプレートのJavaScript統合をサポートし、PUGファイルで変数、反復、条件を直接許可します。
• チュートリアルは、ノード/ExpressプロジェクトでPUGを使用した実用的なデモンストレーションで終了し、スタッフディレクトリを作成し、再利用可能なコードのテンプレート継承やミキシンなどの高度な機能を紹介します。
• パグは何に使用されますか？
• パグを見始める前に、関係する概念を理解するために少し時間をかけましょう。
• テンプレートエンジンは、テンプレート（多くの言語のいずれかを使用して書くことができる）をHTMLにコンパイルする責任があるプログラムです。テンプレートエンジンは通常、外部ソースからデータを受信し、コンパイルするテンプレートに注入します。これは、次の図で示されています クレジット：Dreftymac、TempengWeb016、CC BY-SA 3.0

  このアプローチを使用すると、データに基づいて動的要素を定義しながら、静的Webページ要素を再利用できます。また、懸念の分離を促進し、アプリケーションロジックを表示ロジックから分離します。

  サイトまたはWebアプリケーションがデータ駆動型である場合、テンプレートエンジンの恩恵を受ける可能性が高くなります。たとえば、従業員を管理するためのスタッフディレクトリ、ユーザーが購入できるさまざまな製品をリストするWebストア、または動的なサイトを使用する機能を検索します。
  APIから少量のデータを取得している場合（この場合はJavaScriptのネイティブテンプレート文字列を使用できます）、または小さな静的サイトを作成している場合は、テンプレートエンジンは必要ありません。
  ちょっとした歴史

  また、2015年の商標請求のためにパグが名前を変更することを余儀なくされるまで、パグはジェイドと呼ばれていたことも注目に値します。名前の変更はバージョン2.0で有効になりました。

  オンラインで入手できるジェイド関連の素材はまだたくさんあります。そして、それのいくつかはおそらくまだ非常に有効ですが、名前の変更がメジャーバージョンのバンプと一致したという事実は、Pugの構文に前任者と比較していくつかの違い、非推奨、除去があることを意味します。これらはここに文書化されています。
  もっと知りたい場合は、このgithub問題で元の名前の変更アナウンスを読むことができます。それ以外の場合は、パグ関連のGoogle検索に「テンプレート」という単語を追加して、犬に満ちていることを避けてください。

  PUGのインストール

  パグを書く前に、ノード、NPM（ノードがバンドルされている）とPUG-CLIパッケージをインストールする必要があります。

  ノード/npmをインストールするためのいくつかのオプションがあります。プロジェクトのホームページにアクセスして、システムの正しいバイナリをダウンロードするか、NVMなどのバージョンマネージャーを使用します。可能な限りバージョンマネージャーを使用することをお勧めします。これにより、さまざまなノードバージョンをインストールして自由に切り替えることができるためです。また、潜在的な権限エラーの束も無効になります。

  より詳細なガイドを得るには、「NVMを使用してnode.jsの複数のバージョンのインストール」というチュートリアルをご覧ください。

  ノードとNPMがシステムにインストールされたら、次のようにPUG-CLIパッケージをインストールできます。

  インストールプロセスがパグを入力することで正しく実行されたことを確認できます。これにより、パグのバージョンとインストールしたCLIのバージョンが出力されます。

  執筆時点で、これは次のとおりでした：

  編集者で強調表示

  編集者がPUGの強調表示を提供していない場合は、この機能を追加するための拡張機能を探すことをお勧めします。

  これを改善するために、崇高なパグパッケージをインストールできます：

  

  構文の強調表示により、特に長さのファイルを使用することがはるかに簡単になります。
  をインストールせずにPUG HTMLを試してみてください

  このチュートリアルのより簡単な例をフォローしたい場合は、さまざまなオンラインコードの遊び場で実行することもできます。 たとえば、

  Codepenには、Pug Supportがすぐに焼き付けられています。新しいペンを作成してから、>html

  を選択し、PreprocessorとしてPugを選択します。これにより、PUGコードをHTMLペインに入力して、結果がリアルタイムで表示されるのを確認できます。 追加のボーナスとして、HTMLペインのダウン矢印をクリックして、を表示するを選択して、PUGが生成したマークアップを確認することができます。 PUG HTMLの基本的な構文

  パグがインストールされたので、試してみましょう。 Pug-examplesという名前の新しいディレクトリを作成して変更します。次に、HTMLと呼ばれるさらにディレクトリを作成し、index.pug：

  というファイルを作成します。

  注：touchコマンドはlinux/macos固有です。 Windowsユーザーはエコーを行います。> index.pug同じことを達成するために。

  これが機能する方法は、Pug CodeをIndex.pugに記述し、Pug-Cliにこのファイルを変更してもらうことです。任意の検出がある場合、index.pug.pugの内容を取得し、HTMLディレクトリでHTMLとしてレンダリングします。 これをキックオフするには、Pug-Examplesディレクトリにターミナルを開き、これを入力してください。

  次のようなものが表示されるはずです：

  <span>npm i -g pug-cli
  </span>

  注：上記のコマンドでは、-wオプションは時計の略で、ドットはパグに現在のディレクトリのすべてを見るように指示します。 -pオプションは出力をprettiftiftiftiftifistiftifistiftifistiftifistiftifistiftiftify 上記のスクリーンショットからページを作成しましょう（構文の強調表示の欠如について不平を言っているもの）。以下をindex.pugに入力してください：

  pug.indexを保存し、./html/index.htmlの内容を検査します。次のことを確認する必要があります。

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  悪くない、え？パグCLIは私たちのパグファイルを取得し、それを通常のHTMLとしてレンダリングしました。

  この例は、パグに関するいくつかの重要なポイントを強調するのに役立ちます。第一に、それは空白に敏感です。つまり、パグはインデンテーションを使用して、どのタグが互いにネストされているかを解決することを意味します。たとえば、

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  上記のコードはこれを生成します：

  このコードを取ります：

  pug <span>-w . -o ./html -P
  </span>

  これにより、次のことが生成されます
  インデントのレベルは実際には問題ではありません（必要に応じてタブを使用することもできます）が、インデントのレベルを一貫性に保つことを強くお勧めします。この記事では、2つのスペースを使用します。

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  第二に、パグにはクロージングタグがありません。これは明らかにあなたにかなりの数のキーストロークを節約し、清潔で読みやすい構文をパグします。

  基本的なパグを処理したので、その構文をすばやく見てみましょう。これのいずれかが混乱しているように見える場合、またはより詳細に進みたい場合は、プロジェクトの優れたドキュメントを必ず参照してください。

  doctype

  PUGを使用して、ドキュメントタイプの宣言を数多く生成できます。 たとえば、

  doctype htmlは標準のhtml5 doctypeであるにコンパイルされますが、doctype strictは。 Pugは、その出力がドキュメントタイプに有効であることを確認するために最善を尽くします。

  タグ

  前述のように、パグにはクロージングタグがなく、ネストのインデントに依存しています。これには少量の慣れが必要になる場合がありますが、一度実行すると、クリーンで読みやすいコードが作成されます。例として：

  上記のコードはこれにまとめます：

  <span>npm i -g pug-cli
  </span>

  パグは、私たちにとって自己閉鎖タグ（要素など）を閉じるのに十分賢いことに注意してください。

  クラス、ID、属性

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  クラスとIDは、.classNameおよび#idname Notationを使用して表現されます。たとえば、

  パグは私たちに便利なショートカットも提供しています。タグが指定されていない場合、それは

  要素を想定します：

  これらの両方のコンパイル：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  属性は、括弧：

  pug <span>-w . -o ./html -P
  </span>

  を使用して追加されます

  これにより、次の結果が得られます

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  属性についてもっと言うことがたくさんあります。たとえば、JavaScriptを使用して属性に変数を含めるか、属性に値の配列を割り当てることができます。次のセクションでは、PugでJavaScriptを使用します。

  プレーンテキストとテキストブロック

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  PUGは、レンダリングされたHTMLに直接プレーンテキストを追加するためのさまざまな方法を提供します。

  プレーンテキストのインラインを追加する方法はすでに見られています：

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  もう1つの方法は、パイプ文字を使用して行を接頭することです（|）：

  これにより、次のことがわかります

  テキストの大きなブロックを扱う場合、ドットを広告することができます。タグ名の直後、または閉じた括弧の直後、タグに属性がある場合：

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  これは次のとおりです。

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  コメント

  <span>div<span>.remark</span>
  </span><span>p Pug rocks!!
  </span>

  最後に、コメントは次のように追加できます

  このコメントは、レンダリングされたhtml：

  <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
  </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>

  に追加されます

  そうなコメントを開始します：

  <span>nav
  </span>  <span>navbar-default  div
  </span>    <span>h1 My Website!
  </span>  <span>ul
  </span>    <span>li
  </span>      <span>a Home
  </span>    <span>li
  </span>      <span>a Page 1
  </span>    <span>li
  </span>      <span>a Page 2
  </span>  <span>input
  </span>

  これを行うと、コメントはPUGファイルに残りますが、HTMLには表示されません。

  コメントは自分の行に表示する必要があります。ここでは、コメントはプレーンテキストとして扱われます：

  <span><span><span><nav</span>></span>
  </span>  <span><span><span><div</span>></span>
  </span>    <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span>
  </span>  <span><span><span></div</span>></span>
  </span>  <span><span><span><ul</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span>
  </span>  <span><span><span></ul</span>></span>
  </span>  <span><span><span><input</span>/></span>
  </span><span><span><span></nav</span>></span>
  </span>

  マルチラインコメントも可能です：

  <span>npm i -g pug-cli
  </span>

  基本的な構文demo

  以下に、これまでに説明したテクニックを示すブートストラップスタイルのレイアウトのデモを見つけることができます。

  PUG HTMLテンプレートでJavaScriptを使用して
  
  

  パグの素晴らしいことの1つは、テンプレートでJavaScriptを実行できることです。これにより、変数をテンプレートに簡単に挿入したり、配列とオブジェクトを反復したり、条件付きでHTMLをレンダリングしたりできます。

  バッファー対バッファーコード

  これは、パグでjavascriptを使用する前に注意すべき重要な区別です。

  バッファーされていないコードはマイナス（ - ）で始まります。出力に直接何も追加しませんが、その値はパグ内から使用できます：

  一方、バッファーコードは、等しい（=）で始まります。 JavaScript式を評価し、結果を出力します

  上記のコードはこれにまとめます：

  セキュリティの理由のために、バッファコードがHTMLエスケープされています。

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  上記のコードはこれにまとめます：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  補間

  pug <span>-w . -o ./html -P
  </span>

  文字列補間は、テンプレート内の1つ以上のプレースホルダーを対応する値に置き換えるプロセスです。今まで見てきたように、バッファリングされた入力はこれを行う1つの方法を提供します。もう1つは＃{}を使用することです。ここで、パグは巻き毛ブラケット間のコードを評価し、それを逃がして、テンプレートにレンダリングします。

  上記のコードはこれにまとめます：

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  巻き毛ブラケットには有効なJavaScript式が含まれる可能性があるため、これは多くの可能性を開きます。

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  これは次のとおりです

  ！{}を使用して、Unescaped値をテンプレートにレンダリングすることもできます。しかし、これは、入力が信頼されていないソースから来る場合、最良のアイデアではありません。

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  注：変数に保持されている値を要素の属性に割り当てたい場合は、＃{}を省略できます。例：img（alt = name）。

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  iteration

  パグの各キーワードにより、配列を簡単に反復します：

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  これにより、次の結果が得られます

  <span>div<span>.remark</span>
  </span><span>p Pug rocks!!
  </span>

  それを使用して、オブジェクトのキーを反復することもできます。

  これは次のとおりです。

  パグでは、配列またはオブジェクトが空である場合に実行される他のブロックを提供することもできます。

  最後に、それぞれのエイリアスとして使用できることに注意してください。

  条件

  <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
  </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>

  条件は、JavaScriptの式の結果に応じて、異なるHTMLをレンダリングする非常に便利な方法を提供します：

  <span>npm i -g pug-cli
  </span>

  この例では、従業員オブジェクトにextnプロパティがあるかどうかを確認し、そのプロパティの値を出力（存在する場合）、または「n/a」というテキストを確認しています。 PUGデモのJavaScript

  javaScript

  以下に、このセクションで説明したいくつかのテクニックのデモを見つけることができます。これは、パグのメリットを以前のデモよりも多少紹介します。さらに、従業員を追加するために必要なことは、SitePointEmployesアレイにさらにオブジェクトを追加することだけです。 on Codepen。

  実践的な例
  
  パグの構文とそれがどのように機能するかについての合理的なアイデアが得られたので、小さなExpress.jsアプリを構築して、いくつかのPugのより高度な機能をデモンストレーションすることで終了しましょう。 この例のコードは、githubで入手できます。

  注：Expressを以前に使用したことがない場合は、心配はありません。これは、node.jsのWebフレームワークであり、Webアプリを構築するための堅牢な機能セットを提供します。詳細については、Expressチュートリアルを始めましょう。

  まず、新しいプロジェクトを作成してExpressをインストールしましょう：

  次に、PUG-Expressフォルダーにapp.jsファイルを作成します：

  次に追加します：

  ここでは、ルート（/）を宣言しています。これは、「Hello、World！」というテキストでGetリクエストに応答します。これをブラウザでテストし、ノードapp.jsでサーバーを起動し、http：// localhost：3000にアクセスしてテストできます。

  このようなものを見たら、物事は計画になりました：

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  いくつかのデータの追加

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  このエクスプレスアプリは、あまり壮観なことをしません。データベースから従業員のリストを取得し、テーブルに表示するシンプルなスタッフディレクトリを構築します。そのためには、データベースといくつかのデータが必要になります。 ただし、この小さな例では、データベースのインストールと構成は少し重いものであるため、JSON-Serverというパッケージを使用します。これにより、DB.JSONファイルを作成することができます。これは、REST APIに変わり、CRUD操作を実行できます。

  インストールしましょう：

  pug <span>-w . -o ./html -P
  </span>

  プロジェクトのルートに前述のDB.JSONファイルを作成します：

  最後に、それを入力するにはJSONが必要です。ランダムなユーザーデータを生成するための無料のオープンソースAPIであるランダムユーザージェネレーターを使用します。この例では25人がすべきので、https：//randomuser.me/api/?results=25に向かい、結果をdb.jsonにコピーしてください。

  最後に、次のような2番目の端末ウィンドウでサーバーを起動します。

  <span>npm i -g pug-cli
  </span>

  これにより、JSON-Serverがポート3001で起動し、データベースファイルを変更して変更します。

  テンプレートエンジンとしてパグをセットアップします

  ExpressにはPUGの使用に優れたサポートがあるため、構成はほとんど必要ありません。

  最初に、プロジェクトにパグを追加しましょう：

  app.jsでは、パグを使用するように式典に伝える必要があります：

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  次に、ビューディレクトリを作成してから、ビューディレクトリで、index.pugファイルを追加します：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  そのファイルにいくつかのコンテンツを追加します：

  pug <span>-w . -o ./html -P
  </span>

  次に、app.jsを変更します：

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  最後に、ノードサーバーを再起動してから、ブラウザを更新すると、これが表示されます。

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  そしてそれだけです。行ってもいいです。

  スタッフディレクトリの構築

  リストの次のタスクは、表示するパグテンプレートにデータを渡すことです。そのためには、JSON-Serverからデータを取得する方法が必要です。残念ながら、Fetch APIはノードに実装されていないため、代わりに人気のあるHTTPクライアントであるAxiosを使用しましょう。

  次に、app.jsを変更します：

  ここにはいくつかのことが起こっています。ルートハンドラーを非同期関数に変えたので、従業員のデータがJSON-Serverから返されるのを待つ前に、テンプレートに渡すことができます。

  その後、インデックスを以前のようにレンダリングしますが、今回はすべてのデータを含むオブジェクトをリテラルに渡します。

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  注：app.jsに変更するたびにノードサーバーを再起動する必要があります。これが迷惑になり始めたら、Nodemonをチェックしてください。 パグのために

  今。インデックスを変更して、次のようになります

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  ここで驚くことは何も起こっていないことを願っています。私たちは、いくつかのスタイリングにセマンティックUI-CSSを使用しています。また、独自のスタイルもいくつかあります。

  それから、テーブル本体では、app.jsから渡され、詳細をテーブルに出力している従業員の配列を繰り返しています。 ページの下部には、著作権請求と今年度のフッターがあります。

  今すぐページを更新する場合は、これを表示する必要があります：

  テンプレート継承

  これはすでにかなりいいですが、物事を締めくくるために、プロジェクトが成長するにつれて最大の柔軟性を提供するために私たちの意見を構築する方法を示します。

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  レイアウトを作成することから始めましょう。ビューディレクトリでファイルをパグ：

  次に追加します：

  ここで行ったのは、プロジェクト内の他のPUGファイルが拡張できるよりも、レイアウトファイルを作成することです。多数のパグファイルを持っている場合、これによりかなりの量のコードが節約されます。

  これが機能する方法は、子供のテンプレートが置き換える可能性のある2つのコンテンツ（ブロックコンテンツとブロックフッター）を定義したことです。フッターブロックの場合、チャイルドテンプレートがこのブロックを再定義しない場合にレンダリングされるいくつかのフォールバックコンテンツも定義しました。 index.pugファイルにレイアウトを継承するように伝えることができます：

  結果は以前と同じですが、コードはより良い構造を持っています。

  <span>npm i -g pug-cli
  </span>

  ミックス

  ミックスインを使用すると、再利用可能なパグブロックを作成できます。これを使用して、テーブルの列を独自のファイルに抽出できます。

  ビューフォルダーとそのフォルダーでミキシンと呼ばれるフォルダーを作成し、_tablerow.pug：

  という名前のファイルを作成します

  ミキシンは、ミックスキーワードを使用して宣言されます。それらは機能するように編集されており、議論をすることができます。ビュー/ミックス/_tablerow.pugに次のことを追加します

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  index.pug like so：

  を変更します

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  ご覧のとおり、ファイルの上部にミックスインをインポートしています。次に、その名前をプラス記号で接頭することで呼び出し、従業員のオブジェクトを渡して表示します。

  これは私たちの小さなアプリにとっては過剰ですが、再利用可能なコードを書くことができるパグの非常に便利な機能を示しています。

  結論

  pug <span>-w . -o ./html -P
  </span>

  ここまで行ったことがあればよくやった！このチュートリアルでは、多くの根拠を取り上げました。 Pug、その基本的な構文、JavaScriptのサポート、および反復および条件付きレンダリングのための構成要素のインストールを検討しました。最後に、リモートソースからデータを引き出し、パグテンプレートにフィードする完全に機能するExpressアプリを構築しました。

  パグができることはまだたくさんあります。その優れたドキュメントをチェックして、プロジェクトで使用を開始することをお勧めします。また、ReactやVueなどのいくつかの最新のJSフレームワークで使用することもできます。また、他のいくつかの言語に移植されています。

  チャレンジを探している場合は、従業員ディレクトリを拡張して不足しているCRUD機能を追加してみませんか。構文に固執している場合は、ヘルプが常に手元にあることを忘れないでください。 パグについて

  faq htmlテンプレート前処理>

  ここに、パグに関するよくある質問がいくつかあります。

  PUG HTMLテンプレートプリプロセッサとは？

  以前はJadeとして知られていましたが、高性能HTMLテンプレートプリプロセッサです。より簡潔で表現力のある構文を提供することにより、HTMLを作成するプロセスを簡素化および強化します。これにより、インデントベースの構造化が可能になり、多くの場合、よりクリーンで整理されたコードにつながります。 PUGは変数、ミックスインをサポートし、テンプレートの作成をより効率的にすることも含みます。

  htmlパグは何に使用されますか？

  パグは、より簡潔で整理された効率的な方法でHTMLマークアップを生成するために使用されます。 PUGは、読みやすく、書き込み、維持が簡単なHTMLテンプレートを作成するために、Web開発プロジェクトでよく採用されています。

  PUGには多くの利点がありますが、その主な制限は、従来のHTMLに慣れている場合、学習曲線です。さらに、誰もがパグに精通しているわけではないチームで作業するには、いくらかの調整が必要になる場合があります。

  PUGは主にHTMLを生成するために設計されていますが、React、Angular、vue.jsなどのさまざまなフロントエンドフレームワークと組み合わせて使用​​できます。ただし、これらのフレームワークでPUGを使用するには、追加の構成とツールが必要になる場合があります。

  同じプロジェクトで通常のHTMLとPUGを混ぜることはできますか？

  はい、同じプロジェクト内の通常のHTMLファイルと一緒にPugテンプレートを簡単に統合できます。これは、ある形式から別の形式に移行する場合、またはさまざまなアプローチを使用して開発者と協力する場合に役立ちます。

  Pugを使用するには、「Pug」という名前のnode.jsパッケージをインストールする必要があります。プロジェクトにグローバルまたはローカルにインストールできます。インストール後、.PUGファイル拡張子を使用してPUGテンプレートの作成を開始できます。

以上がPUG HTMLテンプレートエンジン：初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。