336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
앞서 정적 파일과 동적파일을 봤는데, 이 모든걸 합산한 장점을 가지고 있는 것이 templete다.
우선 templete를 설치한다.
$ npm install pug --save
그리고 Express가 templete를 렌더링 하기 위한 코드를 입력해준다.
app.set('view engine','pug')
view engine은 templete엔진을 세팅한다는 약속이고, pug는 templete엔진 중 pug를 세팅한다는 뜻이다.
app.set('views','./views')
그러면 pug파일이 어디 위치해있는가.. 현재 디렉토리 에서 views 라고 하는 파일에 위치한다고 설정한다.
그리고 현재디렉토리에 views 라는 폴더를 설치한다.
이제 기본적인 세팅은 끝났다.
본격적으로 templete 을 사용해보자.
views 파일에
temp.pug라는 파일을 생성해보자
html
head
title= _title
body
h1 coding
ul
-for(var i=0; i<5; i++);
li coding
div= time
위의 코드는
| <html> | |
| <head> | |
| <title>jade</title> | |
| </head> | |
| <body>` | |
| <h1>hello Jade</h1> | |
| <ul> | |
| <li>coding</li> | |
| <li>coding</li> | |
| <li>coding</li> | |
| <li>coding</li> | |
| <li>coding</li> | |
| </ul> | |
| <div>Mon Nov 13 2017 21:40:14 GMT+0900 (대한민국 표준시)</div> | |
| </body> | |
</html> templete 을 렌더링 할 때 같이 적용된다. |
그럼 templete 파일을 랜더링하려면 어떻게해야할까
app.get('/templete',function(req,res){
res.render('temp',{time:Date(),_title:'jade'})
});
render라는 명령어를 통해, templete파일을 로드한다는 것을 알려준다.
render뒤에는 로드 할 pug 파일 이름 'temp'를 넣고,
그 뒤에 temp 안에 넣을 변수값 함께 집어넣는다.
'IT 인터넷 > node.js' 카테고리의 다른 글
| [node js]semantic URL 방식 (0) | 2017.11.30 |
|---|---|
| [node js]쿼리스트링과 쿼리스트링을 이용한 페이지 값 출력 (0) | 2017.11.16 |
| [node js]정적 페이지와 동적 페이지의 장단점 (0) | 2017.11.13 |
| [node js]Express로 정적 페이지 로드하기 (0) | 2017.11.10 |
| [node js]Express로 웹 페이지 생성 (0) | 2017.11.09 |