Pug

設定
$ npm install pug
インストールが完了すると、src/viewsというフォルダが作成されます.ファイルは.拡張子pugを付ける

設定とフォルダの指定
app.set(「views」>「置換するフォルダ名」);
process.cwd():現在の作業ディレクトリ(現在符号化されているディレクトリ)

app.set('view engine', 'pug'); 
app.set('views', process.cwd() + '/src/views');

の使用
const home = (req,res) => res.render('Home');

--- home.pug ---

doctype html
html(lang="ko")
  head
    title Web Play
  body
    h1 Welcome Web Play
    footer © #{new Date().getFullYear()} Web Play

#{newDate().getFullYear():pugでJavaScript#{...}を有効にする
Include=含む:https://pugjs.org/language/includes.html

partials/footer.pug作成後

 <footer>&copy; #{new Date().getFullYear()} Web Play</footer>

©:予期せぬテキスト「©」エラー、前述の通り
PUGはHTMLコードで記述できます

home.pugファイルのincludeファイル

doctype html
html(lang="ko")
  head
    title Web Play
  body
    h1 Welcome Web Play
  include partials/footer.pug

Exterspent=継承
1. base.pugを作る.

doctype html
html(lang="ko")
  head
    title Web Play
  body
    h1 Welcome Web Play
  include partials/footer.pug

home.pugファイルのincludeファイル

extends base.pug

Block=継承するファイルのこの部分のみを置換
1. base.pugから「block contents」を追加

doctype html
html(lang="ko")
  head
    title Web Play
  body
    block content

  include partials/footer.pug

home.pugから「block content」

を追加

extends base.pug

block content
  h1 Home

出力

Include/Exportion/Block図

伝達変数(variable)値(value)

home.pugに変数を挿入:#{pageTitle}

doctype html
html(lang="ko")
  head
    title #{pageTitle} | Web Play

Pugでは両者が同じ
title=pageTitle
title #{pageTitle}

コントローラ入力変数と値

const home = (req, res) => {
  res.render(`home`, {pageTitle : 'Home'});
};

履歴書

じょうけんステートメント
1. Controller.js:fakeUserオブジェクト作成とテスト

const fakeUser = {
  username: 'nature',
  loggedIn: false,
};

const home = (req, res) => {
  res.render(`home`, { pageTitle: 'Home', fakeUser });
};

base.pug
if fakeUser.loggedIn

doctype html
html(lang="ko")
  head
    link(href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet")
    title #{pageTitle} | Web Play
  body
    header 
      if fakeUser.loggedIn
        small Hello #{fakeUser.username}
      nav
        ul 
          if fakeUser.loggedIn
            li
              a(href="/logout") Log out
          else
            li
              a(href="/login") Login

出力
1)loggedIn:falseの場合

2)loggedIn:trueの場合

Literation array
https://runebook.dev/ko/docs/pug/language/iteration

Controller.js

export const home = (req, res) => {
  const customers = [1,2,3,4,5]
  res.render(`home`, { pageTitle: 'Home', customers });
};

home.pug : customer

extends base.pug

block content
  h1 Home
  ul 
    each customer in customers 
      li #{customer}

出力

Literationオブジェクト(配列オブジェクトの場合は重複)

Controller.js

export const home = (req, res) => {
  const customers = [{ name: 'aaa' }, { name: 'bbb' }, { name: 'ccc' }];
  res.render(`home`, { pageTitle: 'Home', customers });
};

home.pug : customer.name

extends base.pug

block content
  h1 Home
  ul 
    each customer in customers 
      li #{customer.name}

出力

-----------------------------------------------------------------------------------------------------------------------------------------------

Controller.js

export const home = (req, res) => {
  const customers = [
    {
      name: 'aaa',
      age: 12,
      sex: 'man',
    },
    {
      name: 'bbb',
      age: 12,
      sex: 'man',
    },
  ];
  res.render(`home`, { pageTitle: 'Home', customers });
};

home.pug

extends base.pug

block content
  h1 Home
  ul 
    each customer in customers 
      div
        h2 #{customer.name}
        ul
          li #{customer.age}
          li #{customer.sex}

出力

Mixin(再利用可能なブロック)
1.上記「Literation object(配列内の複数のオブジェクトの場合重複)」と同じ
2.mixinファイルの作成
mixins/customerInfo.pug
extends base.pug

mixin customerMixin(info)
      div
        h2 #{info.name}
        ul
          li #{info.age}
          li #{info.sex}

home.pug

extends base.pug
include mixins/customerInfo.pug

block content
  h1 Home
  ul 
    each customer in customers 
      +customerMixin(customer)

書類を整理する
1. home.pug

1-1. base.pug:継承するファイル

1-2. customerInfo.pug(mixinファイル):再利用可能なブロックファイル

1-1-1. footer.pug:含めるファイル