[pug] pug express template engine 기본 사용법

pug

> html을 좀더 간편하고 멋지게 만들어주는 view engine.

> 설치 : npm install pug

> 설정 : app.set("view engine", "pug") 

 :> view engine 설정의 default값은 undefined이며 pug 파일 형식으로 바꿔주는 과정임.

 :> "pug" 는 확장자를 의미.

> 들여쓰기를 한 후 작성 시 해당 태그는 children을 의미.

> block content : 해당 자리에 외부의 코드가 들어갈것임을 의미.

 

 

> extends 폴더/파일명 : main.pug 파일(의 레이아웃)을 이 파일에 확장/적용한다는 의미.

> block content 입력 후 밑에 내용을 작성 : main.pug의 block content 부분에 들어갈 것임.

 

 

> html 태그도 입력 가능하나, 괄호와 콤마를 이용해 입력해야 함.

 

 

> JS코드 넣기 : #{} 안에 입력

 

 

> 파일 호출

 

 

home으로 정의된 함수가 들어있는 js파일에서 render 함수를 실행하고 함수의 인자로 가져올 pug 템플릿 파일명을 입력한다. render함수가 파일명이 Home이고 확장자가 pug인 템플릿파일을 찾아 보여줄 것이다.

 

default directory("/views) 변경

> app.set("views", "/views2")

 

express.app API 문서

expressjs.com/ko/4x/api.html

Express 4.x - API 참조