2020国产成人精品视频,高h肉爽文

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

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

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Lisa Kudrow

Feb 10, 2025 am 11:27 AM

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

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

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

キーテイクアウト

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

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

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

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

チュートリアルは、ノード/ExpressプロジェクトでPUGを使用した実用的なデモンストレーションで終了し、スタッフディレクトリを作成し、再利用可能なコードのテンプレート継承やミキシンなどの高度な機能を紹介します。
パグは何に使用されますか？
パグを見始める前に、関係する概念を理解するために少し時間をかけましょう。
テンプレートエンジンは、テンプレート（多くの言語のいずれかを使用して書くことができる）をHTMLにコンパイルする責(zé)任があるプログラムです。テンプレートエンジンは通常、外部ソースからデータを受信し、コンパイルするテンプレートに注入します。これは、次の図で示されていますクレジット：Dreftymac、TempengWeb016、CC BY-SA 3.0
このアプローチを使用すると、データに基づいて動的要素を定義しながら、靜的Webページ要素を再利用できます。また、懸念の分離を促進(jìn)し、アプリケーションロジックを表示ロジックから分離します。
サイトまたはWebアプリケーションがデータ駆動型である場合、テンプレートエンジンの恩恵を受ける可能性が高くなります。たとえば、従業(yè)員を管理するためのスタッフディレクトリ、ユーザーが購入できるさまざまな製品をリストするWebストア、または動的なサイトを使用する機能を検索します。

APIから少量のデータを取得している場合（この場合はJavaScriptのネイティブテンプレート文字列を使用できます）、または小さな靜的サイトを作成している場合は、テンプレートエンジンは必要ありません。

ちょっとした歴史
また、2015年の商標(biāo)請求のためにパグが名前を変更することを余儀なくされるまで、パグはジェイドと呼ばれていたことも注目に値します。名前の変更はバージョン2.0で有効になりました。
オンラインで入手できるジェイド関連の素材はまだたくさんあります。そして、それのいくつかはおそらくまだ非常に有効ですが、名前の変更がメジャーバージョンのバンプと一致したという事実は、Pugの構(gòu)文に前任者と比較していくつかの違い、非推奨、除去があることを意味します。これらはここに文書化されています。

もっと知りたい場合は、このgithub問題で元の名前の変更アナウンスを読むことができます。それ以外の場合は、パグ関連のGoogle検索に「テンプレート」という単語を追加して、犬に満ちていることを避けてください。
PUGのインストール
パグを書く前に、ノード、NPM（ノードがバンドルされている）とPUG-CLIパッケージをインストールする必要があります。
ノード/npmをインストールするためのいくつかのオプションがあります。プロジェクトのホームページにアクセスして、システムの正しいバイナリをダウンロードするか、NVMなどのバージョンマネージャーを使用します?？赡埭氏蓼辚些`ジョンマネージャーを使用することをお勧めします。これにより、さまざまなノードバージョンをインストールして自由に切り替えることができるためです。また、潛在的な権限エラーの束も無効になります。
より詳細(xì)なガイドを得るには、「NVMを使用してnode.jsの複數(shù)のバージョンのインストール」というチュートリアルをご覧ください。
ノードとNPMがシステムにインストールされたら、次のようにPUG-CLIパッケージをインストールできます。

インストールプロセスがパグを入力することで正しく実行されたことを確認(rèn)できます。これにより、パグのバージョンとインストールしたCLIのバージョンが出力されます。
執(zhí)筆時點で、これは次のとおりでした：

編集者で強調(diào)表示

編集者がPUGの強調(diào)表示を提供していない場合は、この機能を追加するための拡張機能を探すことをお勧めします。
これを改善するために、崇高なパグパッケージをインストールできます：

構(gòu)文の強調(diào)表示により、特に長さのファイルを使用することがはるかに簡単になります。
をインストールせずにPUG HTMLを試してみてください
このチュートリアルのより簡単な例をフォローしたい場合は、さまざまなオンラインコードの遊び場で実行することもできます。たとえば、
Codepenには、Pug Supportがすぐに焼き付けられています。新しいペンを作成してから、
>html
を選択し、PreprocessorとしてPugを選択します。これにより、PUGコードをHTMLペインに入力して、結(jié)果がリアルタイムで表示されるのを確認(rèn)できます。追加のボーナスとして、HTMLペインのダウン矢印をクリックして、を表示するを選択して、PUGが生成したマークアップを確認(rèn)することができます。 PUG HTMLの基本的な構(gòu)文
パグがインストールされたので、試してみましょう。 Pug-examplesという名前の新しいディレクトリを作成して変更します。次に、HTMLと呼ばれるさらにディレクトリを作成し、index.pug：
というファイルを作成します。
注：touchコマンドはlinux/macos固有です。 Windowsユーザーはエコーを行います。> index.pug同じことを達(dá)成するために。
これが機能する方法は、Pug CodeをIndex.pugに記述し、Pug-Cliにこのファイルを変更してもらうことです。任意の検出がある場合、index.pug.pugの內(nèi)容を取得し、HTMLディレクトリでHTMLとしてレンダリングします。これをキックオフするには、Pug-Examplesディレクトリにターミナルを開き、これを入力してください。

次のようなものが表示されるはずです：
```
npm i -g pug-cli

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

pug.indexを保存し、./html/index.htmlの內(nèi)容を検査します。次のことを確認(rèn)する必要があります。
```
$ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

```
悪くない、え？パグCLIは私たちのパグファイルを取得し、それを通常のHTMLとしてレンダリングしました。
この例は、パグに関するいくつかの重要なポイントを強調(diào)するのに役立ちます。第一に、それは空白に敏感です。つまり、パグはインデンテーションを使用して、どのタグが互いにネストされているかを解決することを意味します。たとえば、
```
mkdir -p pug-examples/html
cd pug-examples
touch index.pug

```
上記のコードはこれを生成します：
このコードを取ります：
```
pug -w . -o ./html -P

```
これにより、次のことが生成されます

インデントのレベルは実際には問題ではありません（必要に応じてタブを使用することもできます）が、インデントのレベルを一貫性に保つことを強くお勧めします。この記事では、2つのスペースを使用します。
```
watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html
```
第二に、パグにはクロージングタグがありません。これは明らかにあなたにかなりの數(shù)のキーストロークを節(jié)約し、清潔で読みやすい構(gòu)文をパグします。
基本的なパグを処理したので、その構(gòu)文をすばやく見てみましょう。これのいずれかが混亂しているように見える場合、またはより詳細(xì)に進(jìn)みたい場合は、プロジェクトの優(yōu)れたドキュメントを必ず參照してください。
doctype

PUGを使用して、ドキュメントタイプの宣言を數(shù)多く生成できます。たとえば、
doctype htmlは標(biāo)準(zhǔn)のhtml5 doctypeであるにコンパイルされますが、doctype strictは。 Pugは、その出力がドキュメントタイプに有効であることを確認(rèn)するために最善を盡くします。
タグ

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

上記のコードはこれにまとめます：
```
npm i -g pug-cli

```
パグは、私たちにとって自己閉鎖タグ（要素など）を閉じるのに十分賢いことに注意してください。
クラス、ID、屬性
```
$ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

```
クラスとIDは、.classNameおよび#idname Notationを使用して表現(xiàn)されます。たとえば、
パグは私たちに便利なショートカットも提供しています。タグが指定されていない場合、それは
要素を想定します：

これらの両方のコンパイル：
mkdir -p pug-examples/html cd pug-examples touch index.pug 

屬性は、括?。?pre class="brush:php;toolbar:false">pug -w . -o ./html -P を使用して追加されます

これにより、次の結(jié)果が得られます
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html

屬性についてもっと言うことがたくさんあります。たとえば、JavaScriptを使用して屬性に変數(shù)を含めるか、屬性に値の配列を割り當(dāng)てることができます。次のセクションでは、PugでJavaScriptを使用します。
プレーンテキストとテキストブロック
doctype html html(lang='en') head title Hello, World! body h1 Hello, World! div.remark p Pug rocks! 

PUGは、レンダリングされたHTMLに直接プレーンテキストを追加するためのさまざまな方法を提供します。
プレーンテキストのインラインを追加する方法はすでに見られています：
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <div class="remark"> <p>Pug rocks!!</p> </div> </body> </html> 

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

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

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

div.remark p Pug rocks!! 

これは次のとおりです。

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

コメント

div.remark p Pug rocks!! 
最後に、コメントは次のように追加できます

このコメントは、レンダリングされたhtml：
<div class="remark"></div> <p>Pug rocks!!</p> 
に追加されます

そうなコメントを開始します：
nav navbar-default div h1 My Website! ul li a Home li a Page 1 li a Page 2 input 

これを行うと、コメントはPUGファイルに殘りますが、HTMLには表示されません。
コメントは自分の行に表示する必要があります。ここでは、コメントはプレーンテキストとして扱われます：

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

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

npm i -g pug-cli 

基本的な構(gòu)文demo

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

パグの素晴らしいことの1つは、テンプレートでJavaScriptを?qū)g行できることです。これにより、変數(shù)をテンプレートに簡単に挿入したり、配列とオブジェクトを反復(fù)したり、條件付きでHTMLをレンダリングしたりできます。
バッファー対バッファーコード

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

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

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

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

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

$ pug --version pug version: 2.0.3 pug-cli version: 1.0.0-alpha6 

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

mkdir -p pug-examples/html cd pug-examples touch index.pug 

補間

pug -w . -o ./html -P 
文字列補間は、テンプレート內(nèi)の1つ以上のプレースホルダーを?qū)潖辘工雮帳酥盲瓝Qえるプロセスです。今まで見てきたように、バッファリングされた入力はこれを行う1つの方法を提供します。もう1つは＃{}を使用することです。ここで、パグは巻き毛ブラケット間のコードを評価し、それを逃がして、テンプレートにレンダリングします。

上記のコードはこれにまとめます：
watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html

巻き毛ブラケットには有効なJavaScript式が含まれる可能性があるため、これは多くの可能性を開きます。
doctype html html(lang='en') head title Hello, World! body h1 Hello, World! div.remark p Pug rocks! 

これは次のとおりです

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

<!DOCTYPE html> <html lang="en"> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <div class="remark"> <p>Pug rocks!!</p> </div> </body> </html> 
注：変數(shù)に保持されている値を要素の屬性に割り當(dāng)てたい場合は、＃{}を省略できます。例：img（alt = name）。

div.remark p Pug rocks!! 
iteration

パグの各キーワードにより、配列を簡単に反復(fù)します：
<div class="remark"> <p>Pug rocks!!</p> </div> 

これにより、次の結(jié)果が得られます
div.remark p Pug rocks!! 

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

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

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

<div class="remark"></div> <p>Pug rocks!!</p> 
條件は、JavaScriptの式の結(jié)果に応じて、異なるHTMLをレンダリングする非常に便利な方法を提供します：

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

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

実踐的な例

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

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

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

次に追加します：
ここでは、ルート（/）を宣言しています。これは、「Hello、World！」というテキストでGetリクエストに応答します。これをブラウザでテストし、ノードapp.jsでサーバーを起動し、http：// localhost：3000にアクセスしてテストできます。
このようなものを見たら、物事は計畫になりました：

$ pug --version pug version: 2.0.3 pug-cli version: 1.0.0-alpha6 

いくつかのデータの追加
mkdir -p pug-examples/html cd pug-examples touch index.pug 

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

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

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

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

npm i -g pug-cli 
これにより、JSON-Serverがポート3001で起動し、データベースファイルを変更して変更します。
テンプレートエンジンとしてパグをセットアップします

ExpressにはPUGの使用に優(yōu)れたサポートがあるため、構(gòu)成はほとんど必要ありません。
最初に、プロジェクトにパグを追加しましょう：

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

$ pug --version pug version: 2.0.3 pug-cli version: 1.0.0-alpha6 

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

mkdir -p pug-examples/html cd pug-examples touch index.pug 
そのファイルにいくつかのコンテンツを追加します：

pug -w . -o ./html -P 
次に、app.jsを変更します：

watching index.pug rendered /home/jim/Desktop/pug-examples/html/index.html
最後に、ノードサーバーを再起動してから、ブラウザを更新すると、これが表示されます。

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

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

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

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

ここにはいくつかのことが起こっています。ルートハンドラーを非同期関數(shù)に変えたので、従業(yè)員のデータがJSON-Serverから返されるのを待つ前に、テンプレートに渡すことができます。
その後、インデックスを以前のようにレンダリングしますが、今回はすべてのデータを含むオブジェクトをリテラルに渡します。
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <div class="remark"> <p>Pug rocks!!</p> </div> </body> </html> 

注：app.jsに変更するたびにノードサーバーを再起動する必要があります。これが迷惑になり始めたら、Nodemonをチェックしてください。パグのために
今。インデックスを変更して、次のようになります
div.remark p Pug rocks!! 

ここで驚くことは何も起こっていないことを願っています。私たちは、いくつかのスタイリングにセマンティックUI-CSSを使用しています。また、獨自のスタイルもいくつかあります。
それから、テーブル本體では、app.jsから渡され、詳細(xì)をテーブルに出力している従業(yè)員の配列を繰り返しています。ページの下部には、著作権請求と今年度のフッターがあります。
今すぐページを更新する場合は、これを表示する必要があります：

テンプレート継承

これはすでにかなりいいですが、物事を締めくくるために、プロジェクトが成長するにつれて最大の柔軟性を提供するために私たちの意見を構(gòu)築する方法を示します。
<div class="remark"> <p>Pug rocks!!</p> </div> 
レイアウトを作成することから始めましょう。ビューディレクトリでファイルをパグ：

次に追加します：

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

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

結(jié)果は以前と同じですが、コードはより良い構(gòu)造を持っています。
npm i -g pug-cli 

ミックス

ミックスインを使用すると、再利用可能なパグブロックを作成できます。これを使用して、テーブルの列を獨自のファイルに抽出できます。
ビューフォルダーとそのフォルダーでミキシンと呼ばれるフォルダーを作成し、_tablerow.pug：
という名前のファイルを作成します

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

$ pug --version pug version: 2.0.3 pug-cli version: 1.0.0-alpha6 
index.pug like so：
を変更します

mkdir -p pug-examples/html cd pug-examples touch index.pug 
ご覧のとおり、ファイルの上部にミックスインをインポートしています。次に、その名前をプラス記號で接頭することで呼び出し、従業(yè)員のオブジェクトを渡して表示します。
これは私たちの小さなアプリにとっては過剰ですが、再利用可能なコードを書くことができるパグの非常に便利な機能を示しています。
結(jié)論
pug -w . -o ./html -P 

ここまで行ったことがあればよくやった！このチュートリアルでは、多くの根拠を取り上げました。 Pug、その基本的な構(gòu)文、JavaScriptのサポート、および反復(fù)および條件付きレンダリングのための構(gòu)成要素のインストールを検討しました。最後に、リモートソースからデータを引き出し、パグテンプレートにフィードする完全に機能するExpressアプリを構(gòu)築しました。
パグができることはまだたくさんあります。その優(yōu)れたドキュメントをチェックして、プロジェクトで使用を開始することをお勧めします。また、ReactやVueなどのいくつかの最新のJSフレームワークで使用することもできます。また、他のいくつかの言語に移植されています。
チャレンジを探している場合は、従業(yè)員ディレクトリを拡張して不足しているCRUD機能を追加してみませんか。構(gòu)文に固執(zhí)している場合は、ヘルプが常に手元にあることを忘れないでください。パグについて
faq htmlテンプレート前処理>

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

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

パグは、より簡潔で整理された効率的な方法でHTMLマークアップを生成するために使用されます。 PUGは、読みやすく、書き込み、維持が簡単なHTMLテンプレートを作成するために、Web開発プロジェクトでよく採用されています。
PUGには多くの利點がありますが、その主な制限は、従來のHTMLに慣れている場合、學(xué)習(xí)曲線です。さらに、誰もがパグに精通しているわけではないチームで作業(yè)するには、いくらかの調(diào)整が必要になる場合があります。
PUGは主にHTMLを生成するために設(shè)計されていますが、React、Angular、vue.jsなどのさまざまなフロントエンドフレームワークと組み合わせて使用??できます。ただし、これらのフレームワークでPUGを使用するには、追加の構(gòu)成とツールが必要になる場合があります。

同じプロジェクトで通常のHTMLとPUGを混ぜることはできますか？
はい、同じプロジェクト內(nèi)の通常のHTMLファイルと一緒にPugテンプレートを簡単に統(tǒng)合できます。これは、ある形式から別の形式に移行する場合、またはさまざまなアプローチを使用して開発者と協(xié)力する場合に役立ちます。
Pugを使用するには、「Pug」という名前のnode.jsパッケージをインストールする必要があります。プロジェクトにグローバルまたはローカルにインストールできます。インストール後、.PUGファイル拡張子を使用してPUGテンプレートの作成を開始できます。

以上がPUG HTMLテンプレートエンジン：初心者ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。

このウェブサイトの聲明

この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡(luò)ください。

ホットAIツール

Undress AI Tool

脫衣畫像を無料で

Undresser.AI Undress

リアルなヌード寫真を作成する AI 搭載アプリ

AI Clothes Remover

寫真から衣服を削除するオンライン AI ツール。

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中國語版

中國語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

8638

Java チュートリアル

1783

CakePHP チュートリアル

1728

Laravel チュートリアル

1579

PHP チュートリアル

1443

Related knowledge

「レンダリングブロッキングCSS」とは何ですか？ Jun 24, 2025 am 12:42 AM

ブラウザは、特にインポートされたスタイルシート、ヘッダーのインラインCSS、および最適化されていないメディアクエリスタイルを使用して、ブラウザがインラインおよび外部CSSをデフォルトで主要なリソースとして表示するため、ページレンダリングをブロックします。 1.重要なCSSを抽出し、HTMLに埋め込みます。 2。JavaScriptを介して非クリティカルなCSSの読み込みを遅らせる。 3.メディア屬性を使用して、印刷スタイルなどのロードを最適化します。 4.リクエストを減らすためにCSSを圧縮およびマージします。ツールを使用してキーCSSを抽出し、REL = "Preload"非同期負(fù)荷を組み合わせ、過度の分割と複雑なスクリプト制御を避けるためにメディア遅延荷重を合理的に使用することをお勧めします。

外部対內(nèi)部CSS：最良のアプローチは何ですか？ Jun 20, 2025 am 12:45 AM

TheBestAppRoachforCSDependsonTheProject'sSpecificNeeds.forLargerProjects、externalCssissisbetterduetoMaintainasiladability; forsmallerProjectsOrsingLe-PageApplications、internalcsSmightBemoresuitable.it

私のCSSは小文字でなければなりませんか？ Jun 19, 2025 am 12:29 AM

いいえ、CSSDOESNOTHAVETOBEINLOWERCASE。

CSSケース感度：重要なことを理解する Jun 20, 2025 am 12:09 AM

cssismostlycase-inssensitive、buturlsandfontfamilynamesarecase-sensitive.1）propertiesandvalueslikecolor：red; areotcase-sensitive.2）urlsmustmatchtheserver'scase、例えば、/畫像/logo.png.3）

Autoprefixerとは何ですか？それはどのように機能しますか？ Jul 02, 2025 am 01:15 AM

Autoprefixerは、ターゲットブラウザスコープに基づいてCSS屬性にベンダープレフィックスを自動的に追加するツールです。 1.エラーで接頭辭を手動で維持する問題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある屬性を分析し、構(gòu)成に従ってコードを生成する屬性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設(shè)定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辭を手動で追加しない、構(gòu)成の更新を保持すること、すべての屬性ではなくプレフィックスを維持することが含まれ、プリ??プロセッサでそれらを使用することをお勧めします。

CSSカウンターとは何ですか？ Jun 19, 2025 am 12:34 AM

csScountersCantAnationally-bersectionSandLists.1）usecounter-resettoinitialize、counter-incrementtoincrease、andcounter（）orcounters（）todisplayvalues.2）を組み合わせたjavascriptfordynamiccontenttoensureaCurateupdatesと組み合わせます。

CSS：ケースはいつ重要ですか（いつそうではありませんか）？ Jun 19, 2025 am 12:27 AM

CSSでは、セレクターと屬性名はケースに敏感ですが、値、名前の色、URL、およびカスタム屬性はケースに敏感です。 1.バックグラウンドカラーや背景色など、セレクターと屬性名はケース非感受性です。 2。値の16進(jìn)數(shù)色は大文字と小文字を區(qū)別しますが、赤と赤などの名前の色は無効です。 3. URLは癥例に敏感であり、ファイルロードの問題を引き起こす可能性があります。 4.カスタムプロパティ（変數(shù)）はケースに敏感であり、使用する場合はケースの一貫性に注意を払う必要があります。

conic-gradient（）関數(shù)とは何ですか？ Jul 01, 2025 am 01:16 AM

TheConic-Gradient（）functionsscreateScular勾配の勾配は、測定されていることを確認(rèn)してください

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

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

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

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

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

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

基本的な構(gòu)文demo

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

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

これは次のとおりです

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

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

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

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