pug-templete(1)

* templete의 세가지 방법

 

1) conditional: 자스에서 쓰던 if, else if와 사용법이 같다.

 

2) iteration: elements의 list를 보여준다.

iteration을 하기위해선 array나 객체를 이용하면 된다. 여기서는 array를 사용할 것임.

controller의 videos 부분이 

home.pug의 in videos와 이름이 같아야한다. each와 li는 tomato,potato 그 어떤 이름이어도 상관이 없다.

3) mixin : base.pug에서 봤던 partials이긴 한데 데이터를 받을 수 있는 partial로 같은 형태의 HTML이지만

다른 데이터를 반영할때 사용한다. 한줄로 정리하면 똑똑한 partial!!

iteration과 마찬가지로 list를 만들고 이번엔 그 안에 속성까지 만들었다. 그리고 home으 videos로 

return 해준다. 여기까지는 iteration과 비슷하다.

 

그 후에 views에 mixin이라는 폴더를 만들고 video.pug라는 파일을 만들어준다.

그리고 안에 내용을 적는다. 괄호안의 변수명은 info라고 적어준다.=>video남발시 헷갈릴수 있음!

그리고 다시 home으로 와서 videos 안에 각각의 potato 라고 변수를 적고

mixin은 +로 표기해준다. 그래서 mixin표기+video라는 객체명(potato 변수) 라고 적는다.

그리고 원래 home에서 쓰려던 형태의 html을 video에 붙여넣기 해준다. 변수는 info로 바꿔준다.

여기까지하고 실행을 시키면 에러가 뜨는데

그 이유는 footer처럼 include 해주지 않았기 때문이다.

그래서 home에 include를 적어준다. include는 확장과 비슷한 개념..!