Koa.js-テンプレート

パグはテンプレートエンジンです。テンプレートエンジンは、サーバーコードがHTMLで乱雑になるのを防ぎ、文字列を既存のHTMLテンプレートに乱暴に連結するために使用されます。 Pugは非常に強力なテンプレートエンジンで、 filters、includes、inheritance、interpolation などのさまざまな機能を備えています。これには多くの根拠があります。

KoaでPugを使用するには、次のコマンドを使用してインストールする必要があります。

$ npm install --save pug koa-pug

パグをインストールしたら、アプリのテンプレートエンジンとして設定します。 app.jsファイルに次のコードを追加します。

var koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app//Equivalent to app.use(pug)
});

var _ = router();//Instantiate the router

app.use(_.routes());//Use the routes defined using the router
app.listen(3000);

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

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

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

_.get('/hello', getMessage);//Define routes

function *getMessage(){
   this.render('first_view');
};

あなたはとして出力を受け取るでしょう-

こんにちはビュー

Pugが行うことは、この非常にシンプルなマークアップをHTMLに変換することです。タグを閉じるのを追跡する必要はありません。クラスやidキーワードを使用する必要はなく、「。」を使用しますそして、それらを定義する「＃」。上記のコードは最初に変換されます

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

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

Pugは、HTMLマークアップを単純化するだけではありません。 Pugのこれらの機能のいくつかを見てみましょう。

シンプルなタグ

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

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

タグ内にテキストを配置する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 koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app//equals to pug.use(app) and app.use(pug.middleware)
});

var _ = router();//Instantiate the router

_.get('//dynamic_view', dynamicMessage);//Define routes

function* dynamicMessage(){
   this.render('dynamic', {
      name: "finddevguides",
      url:"https://www.finddevguides.com"
   });
};

app.use(_.routes());//Use the routes defined using the router
app.listen(3000);

次に、次のコードを使用して、viewsディレクトリにdynamic.pugという名前の新しいビューファイルを作成します。

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

ブラウザで localhost：3000/dynamic を開くと、以下が出力されます。 −

テンプレート変数

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

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

値を使用するこの方法は、補間と呼ばれます。

条件付き

条件ステートメントとループ構造も使用できます。ユーザーがログインしている場合は「Hi、User」を表示し、そうでない場合は「ログイン/サインアップ」リンクを表示したいという実用的な例を考えてみましょう。これを達成するために、次のような単純なテンプレートを定義できます-

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

ルートを使用してこれをレンダリングし、次のようなオブジェクトを渡す場合-

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

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

含めるとコンポーネント

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

次のコードで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 koa = require('koa');
var router = require('koa-router');
var app = koa();

var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app//Equivalent to app.use(pug)
});

var _ = router();//Instantiate the router

_.get('/components', getComponents);

function *getComponents(){
   this.render('content.pug');
}

app.use(_.routes());//Use the routes defined using the router
app.listen(3000);

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

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

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

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

Koajs-templating

目次