바르고 뜨겁게

[NodeJS] 템플릿 뷰 엔진 PUG 본문

자바스크립트/Node Js

[NodeJS] 템플릿 뷰 엔진 PUG

RightHot 2019. 1. 11. 15:14

템플릿 뷰 엔진 PUG

html 대신에 다른 템플릿 엔진을 사용할 수 있다.

PUG

pug는 들여쓰기로 부모,자식 태그를 구분한다. 들여쓰기는 탭/스페이스 상관없지만 하나로 통일해야 함.

  express (폴더명) --view=pug
  npm i

  npm install --save express jade pug

  • 변수선언

    1. 프론트 (.pug) 에서 - 선언 후 자바스크립트로 변수 선언가능

    2. 렌더링시에 선언 가능

      router.get('/',(req,res,next)=>{
        console.log('세번째 미들웨어');
        res.render('test',{
            title3: '렌더링 변수',
            title4: '추가',
        }); 
      });

app.js

  app.engine('pug', require('pug').__express);
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'pug');

views/test.pug

  doctype html
  html
      head
          -const title = '익스프레스'
          -const title2 = '퍼그 뷰 테스트'
          title= title + ' ' + title2
          link(rel='stylesheet', href='/stylesheets/style.css')

아래처럼 랜더링 되서 프론트로 보내진다.

  <!DOCTYPE html>
  <html>
      <head>
          <title>익스프레스 퍼그 뷰 테스트 렌더링 변수 추가</title>
          <link rel="stylesheet" href="/stylesheets/style.css">
      </head>
  </html>

  • id와 class는 아래 처럼 사용 가능하다

    // <div id="RightHot" width="500"></div>
    div(id='RightHot' width=500)
    div#RightHot(width=500)
    ​
    // <div class="express testclass" width="500"></div>
    span(class='express testclass' width=100)
    span.express.testclass(width=100)

  • div태그는 생략가능하다

    // <div id="RightHot" width="500"></div>
    #RightHot(width=500)

  • | 이용해서 여러줄 입력가능

            p
                | 안녕하세요
                | 여러줄 입력 가능
                br
                | 태그도 중간에 넣을 수 있다.

  • 자바스크립트 사용법 script.

            script.
                var message = 'pug';
                alert(message);

  • style 사용법 style.

            style.
                p{
                    color: red;
                }

  • 조건문과 반복문 사용

            // 조건문 사용
            -const variable = true
            if variable
                div 조건문이 true 입니다.
            else
                div 조건문이 false 입니다.
    ​
            // 반복문 사용
            for i in ['반복문1', '반복문2', '반복문3']
                div= i

  • include

    부분은 include를 사용

    header.pug

    #header
        span 인클루드 헤더

    test.pug

            include header

  • layout

    구조가 공통된다면 layout 사용

    lay.pug

    doctype html
    html
        head
            -const title = '익스프레스'
            -const title2 = '퍼그 뷰 테스트'
            title= title + ' ' + title2 + ' ' + title3 + ' ' + title4
            link(rel='stylesheet', href='/stylesheets/style.css')
            style.
                p{
                    color: red;
                }
    ​
        body
            include header
    ​
            block content
    ​
            include footer
    ​
    ​
            block script
                script.
                    console.log('block init value');

    test.pug

    extends lay.pug
    ​
    block content
        // <div id="RightHot" width="500"></div>
        // div(id='RightHot' width=500)
        div#RightHot(width=500)
    ​
        // <div class="express testclass" width="500"></div>
        // span(class='express testclass' width=100)
        span.express.testclass(width=100)
    ​
        button(type='submit') 전송
    ​
        // 조건문 사용
        -const variable = true
        if variable
            div 조건문이 true 입니다.
        else
            div 조건문이 false 입니다.
    ​
        // 반복문 사용
        for i in ['반복문1', '반복문2', '반복문3']
            div= i
        
        p
            | 안녕하세요
            | 여러줄 입력 가능
            br
            | 태그도 중간에 넣을 수 있다.
    ​
    ​
    block script
        script.
            var message = 'pug';
            alert(message);
    ​
    ​

    test2.pug

    extends lay.pug
    ​
    block content
        #main 테스트2 본문


저작자표시 변경금지

'자바스크립트 > Node Js' 카테고리의 다른 글

[nodeJS] 노드 보안 처리 dotenv  (0) 2019.01.21
[nodeJS] 시퀄라이즈(sequelize)  (0) 2019.01.21
[NodeJS] express 프레임워크  (0) 2018.12.31
[NodeJS] npm 명령어, 생성, 설치, 배포  (0) 2018.12.29
[NodeJS] 노드JS로 서버 만들기  (0) 2018.12.27
'자바스크립트/Node Js' Related Articles more
Comments