Pug
pug는 template engine으로써 express에서 html을 render할 수 있게 해준다.
npm i pug app.set("view engine", "pug") - server.js에서 view engine을 pug로 설정해주는 것이다. app.set("views", process.cwd() + "/src/views") - server.js에서 express에서 기본으로 설정 된 views 탐색 경로를 재설정한 것이다.
#{ }
pug에서 javascript나 variable을 사용하기 위해서는 #{someCode}를 사용해야 한다.
#{variable}을 사용하여 변수를 지정했을 경우 해당 controller에서 variable: "string"을 통해 변수에 해당하는 값을 보내줄 수 있다.
Extends, Block
extend base.pug
extend path.pug를 통해서 해당 파일을 extend 시킬 수 있다.
block content
base.pug에 block content를 사용해서 html에 content를 위한 공간을 만들 수 있다.
home.pug block content h1 write here
Conditionals
h1=pageTitle을 통해서 단 하나의 변수 값만 h1에 지정할 수 있다.
다만 다른 text들과는 함께 사용할 수 없다.
pug 에서는 if 나 else if, else를 사용할 수 있다.
Iteration
each video in videos - videos는 반드시 array여야 한다.
each video in videos를 통해 array를 html로 표현할 수 있다. each는 python의 for과 동일하다.
Mixins
mixins(미리 만들어진 데이터를 받을 수 있는 html block)는 데이터를 받을 수 있는 partials(ex/ footer.pug)이다.
mixins를 사용하는 이유는 partials처럼 코드를 다른 곳에서도 재사용 하기 위해서이다.
mixins 폴더 생성 video.pug 파일 생성 mixin video(videos) - videos는 argument로 받을 인자이다. structure
include mixins/video each video in videos +video(video) - argument를 반드시 넘겨줘야한다.
mixin을 사용하기 위해서는 +를 사용해야 한다.
Learn more