node.js no.07

PUGの使用条件と繰り返し

PUGは、条件、繰返しを使用してHTMLブロックを制御することができる.

1. conditional

仮想プレイヤーが生成されます.

const fakeUser = {
  ID: "FUNco",
  loginCheck: true,
};

このプレイヤーのログイン状態に応じて異なるページが表示されます.
通常、<script>タグ内で条件文を使用してhtmlを制御します.
ただし、PUGでは以下のように直接使用できます.

ul
  if fakeUser.loginCheck
     li
       a(href="/logout") Log out
  else 
     li
       a(href="/login") Log in

仮想ユーザのログイン状態がtrueの場合、logoutリンクが表示され、falseの場合、loginリンクが表示されます.

2. literation

コントローラは変数として配列を受信します.どう利用すればいいですか?

// videosInfo is array
each video in videosInfo
	 ul
     	li #{video}

Pythonがfor文を使用する場合と同じフォーマットです.PUGはulタグを生成し、以下のvideosInfo arrayのパラメータを1つずつ取り出し、liを生成します.
ではarrayとobjectが混在する変数では?

// videosInfo is object
each video in videosInfo
	 div
            h4=video.title 
              ul
                 li video # #{video.code} | runtime : #{video.runTime}

上記のように使用できます.

3. mixin

mixinは支店のようなものです.データの予め生成されたhtml blockを受信することができる.
mixinはpartialと同じ概念であるが、htmlブロック内のデータを受信し、コンテンツを異なるものにすることができるという違いがある.また、partialのように、nearincludeをファイルを区切る形で使用することもできます.

// videosInfo is object
// dir = /mixins/video.pug
mixin video(info)
	 div
          h4=info.title 
            ul
               li cideo # #{info.code} | runtime : #{info.runTime}

さらにmixinフォルダを作成してビデオを行います.pugファイルを作成し、ホームディレクトリの下に配置します.pugから呼び出す.

// home.pug
include mixins/video.pug

each video in videosInfo
      +video(video)

上記のコードの結果は、2番目の下部コードと同じです.