[Nodejs] Pug 사용법

[Nodejs]Pug 사용법

Pug는 Nodejs Express Template Engine이다.
html 대신 사용한다.

장점

• HTML을 간단하게 표현해서 가독성이 좋다.
• 정적인 부분과 동적인 부분을 따로 할 수 있다.
• 타 Express Engine보다 Google Trend 수치가 높다.

HTML과 차이

• 닫는 태그가 없다.
• 들여쓰기로 종속성을 구별한다.
• 태그를 선언할 때 이름만 쓰면된다.
• ID와 CLASS를 정해줄때 CSS의 기본 선택자를 사용하면 된다. ex) div.class, div#id
• 태그 없이 ID와 CLASS만 선언할시 div 태그를 사용한다. ex) .class == div.class
• 태그에 속성은 괄호를 이용한다. ex) input(type=”text”)
• 여러 줄을 사용하고 싶으면 |를 사용한다.
• Script나 CSS로 태그를 사용할 땐 끝에 .을 입력한다. ex) script., style.
• 템플릿 안에서 javascript를 사용하려면 앞에 -(Hyphen)을 입력한다.
• nodejs에서 변수를 받아올 때는 #{변수명}을 이용한다.

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
      h1= title
      p Welcome to #{title}

조건문 사용

if문

-var authorised = true
  if authorised
    h1= title
    p Welcome to #{title}
- authorised = false
  if authorised
    h1 hello
    p Welcome to hello

실행 결과화면

<h1>Express</h1>
<p>Welcome to Express</p>

unless문

-var authorised = true
  unless authorised
    h1= title
    p Welcome to #{title}

위에와 동일한 조건문입니다.

-var authorised = true
  if !authorised
    h1= title
    p Welcome to #{title}

case문

-var ball = 10
case ball
  when 0: p i hava no ball
  when 1: p i hava a ball
  default : p i hava #{ball} balls

실행 결과화면

<p>i hava 10 balls</p>

추가로 case문에서 break는 -break라고 작성하면 된다.

반복문

-for (var index = 0; i++ < 3; index++)
  li item

실행 결과화면

<li>item</li>
<li>item</li>
<li>item</li>

each문

-var number = [1,2,3]
each index in number
  li= index

실행 결과화면

<li>1</li>
<li>2</li>
<li>3</li>

Mixin 변수

템플릿 단위로 재사용 가능한 변수를 사용해보자.
mixin으로 변수를 선언하고 변수이름를 더해주어야 한다.

mixin list
  ul
    li 1
    li 1
    li 1
+list
+list

실행 결과화면

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

템플릿 파일들 불러오기

includes

include 파일경로로 사용한다.

include /header.pug
block content
  h1= title
  p Welcome to #{title}

실행 결과화면

<p>hello i'm header</p>
<h1>Express</h1>
<p>Welcome to Express</p>