ExpressJS-テンプレート

PugはExpressのテンプレートエンジンです。テンプレートエンジンは、サーバーコードがHTMLで乱雑になるのを防ぎ、文字列を既存のHTMLテンプレートに乱暴に連結するために使用されます。 Pugは非常に強力なテンプレートエンジンで、*フィルター、インクルード、継承、補間*などのさまざまな機能を備えています。これには多くの根拠があります。

ExpressでPugを使用するには、インストールする必要があります。

npm install --save pug

Pugがインストールされたので、アプリのテンプレートエンジンとして設定します。あなたはそれを「要求」する必要はありません。次のコードを index.js ファイルに追加します。

app.set('view engine', 'pug');
app.set('views','./views');

次に、viewsという名前の新しいディレクトリを作成します。その中に first_view.pug というファイルを作成し、その中に次のデータを入力します。

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

このページを実行するには、アプリに次のルートを追加します-

app.get('/first_template', function(req, res){
   res.render('first_view');
});

出力は-* Hello World！として取得されます。Pugは、この非常にシンプルなマークアップをHTMLに変換します。タグを閉じるのを追跡する必要はありません。クラスやidキーワードを使用する必要はなく、「。」を使用しますおよび *'＃' で定義します。上記のコードは最初に変換されます-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>

   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pugは、HTMLマークアップを単純化するだけではありません。

パグの重要な機能

Pugのいくつかの重要な機能を調べてみましょう。

シンプルなタグ

タグは、インデントに従ってネストされます。上記の例のように、 <title> は <head> タグ内でインデントされているため、その中にありました。ただし、 <body> タグは同じインデントにあるため、 <head> タグの兄弟でした。

タグを閉じる必要はありません。パグが同じまたは外側のインデントレベルで次のタグを検出するとすぐに、タグを閉じます。

タグ内にテキストを配置するには、3つの方法があります-

スペース区切り

h1 Welcome to Pug

配管されたテキスト

div
   | To insert multiline text,
   | You can use the pipe operator.

テキストのブロック

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and
   indent it accordingly.

属性

属性を定義するには、属性のカンマ区切りリストを括弧で囲んで使用します。クラスおよびID属性には特別な表現があります。次のコード行は、特定のhtmlタグの属性、クラス、およびIDの定義をカバーしています。

div.container.column.main#division(width = "100", height = "100")

このコード行は、次のように変換されます。 −

<div class = "container column main" id = "division" width = "100" height = "100"></div>

テンプレートに値を渡す

Pugテンプレートをレンダリングするとき、実際にルートハンドラーから値を渡すことができ、テンプレートで使用できます。次を使用して新しいルートハンドラを作成します。

var express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "finddevguides",
      url:"http://www.finddevguides.com"
   });
});

app.listen(3000);

そして、次のコードを使用して、 dynamic.pug と呼ばれるビューディレクトリに新しいビューファイルを作成します-

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

ブラウザでlocalhost：3000/dynamic_viewを開きます。あなたは次の出力を取得する必要があります-

テンプレート内の変数

これらの渡された変数をテキスト内で使用することもできます。タグのテキスト間に渡された変数を挿入するには、*＃\ {variableName} *構文を使用します。たとえば、上の例で、finddevguidesからの挨拶を入れたい場合は、次のようにすることができます。

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

値を使用するこの方法は*補間*と呼ばれます。上記のコードは、次の出力を表示します。 −

Templating Inter

条件付き

条件ステートメントとループ構造も使用できます。

以下を考慮してください-

ユーザーがログインしている場合、ページには "Hi、User" が表示され、そうでない場合は "Login/Sign Up" リンクが表示されます。これを達成するために、次のような単純なテンプレートを定義できます-

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

ルートを使用してこれをレンダリングするとき、次のプログラムのようにオブジェクトを渡すことができます-

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

メッセージが表示されます-*こんにちは、Ayush *。ただし、オブジェクトを渡さない場合、またはユーザーキーのないオブジェクトを渡さない場合は、サインアップリンクを取得します。

含めるとコンポーネント

Pugは、Webページのコンポーネントを作成する非常に直感的な方法を提供します。たとえば、ニュースWebサイトが表示された場合、ロゴとカテゴリのヘッダーは常に修正されます。これを作成するすべてのビューにコピーする代わりに、 include 機能を使用できます。次の例は、この機能を使用する方法を示しています-

次のコードで3つのビューを作成します-

*HEADER.PUG*

div.header.
   I'm the header for this website.

*CONTENT.PUG*

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

*FOOTER.PUG*

div.footer.
   I'm the footer for this website.

次のようにこのためのルートを作成します-

var express = require('express');
var app = express();

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

localhost：3000/componentsに移動すると、次の出力が表示されます-

テンプレートのコンポーネント

*_include_* は、プレーンテキスト、CSS、およびJavaScriptを含めるためにも使用できます。

Pugにはさらに多くの機能があります。しかし、これらはこのチュートリアルの範囲外です。パグについては、http：//jade-lang.com [Pug]でさらに詳しく調べることができます。

Expressjs-templating

目次