본문 바로가기

Javascript/nodejs

[Node.js: Express Template Engine] 템플릿 엔진 사용법, Jade 문법

템플릿 엔진 사용법

http://expressjs.com/ko/guide/using-template-engines.html

 

Express와 함께 템플리트 엔진 사용

Express와 함께 템플리트 엔진을 사용 Express가 템플리트를 렌더링하려면 다음과 같은 애플리케이션 설정이 필요합니다. views, 템플리트가 있는 디렉토리. 예: app.set('views', './views') view engine, 사용할 템플리트 엔진. 예: app.set('view engine', 'pug') 이후 그에 맞는 템플리트 엔진 npm 패키지를 다음과 같이 설치하십시오. $ npm install pug --save Express

expressjs.com

Jade 템플릿 엔진을 설치하자.

> npm install jade --save

 

views 디렉토리 생성 후 temp.jade 를 만들어 html이라고 쳐서 넣는다.

// app.js
// ...
app.set('view engine', 'jade');
app.set('views', './views');

app.get('/template', function(req, res){
    res.render('temp');
});

 

Jade 문법

// app.js 수정
// ...
app.locals.pretty = true; // Jade가 만든 태그 예쁘게 만들기

app.get('/template', function(req, res){
    res.render('temp', {_title:'Jade', time:Date()}); // 템플릿에 데이터 주입하는 방법
});
// temp.jade
html
    head
        title= _title
    body
        h1 Hello Jade
        ul
            -for(var i=0; i<5; i++)
                li coding
        div= time

* 프로그래밍적으로 제어하기 위한 코드는 - 를 앞에 붙여주기

* 태그가 아닌 문자 출력을 위해서는 태그와 같은 라인에 써야한다.