PUG) iteration , mixin 에 대한 내용

iteration

사용 빈도수 : 자주 사용

 

Iteration은 array의 모든 element에 대해 특정 행동을 취할 때 사용한다

 

each X in Y 인데 Y의 변수는 꼭 존재해야 한다

 

Y는 array의 형태이여야 하고

 

array 안에 아무것도 없을 때를 대비하여 else를 사용가능하다

 

리스트의 각 아이템을 보여줌

 

또한 Y의 어레이를 오브젝트 형태로 사용할 때가 있는데 자바스크립트는 이해를 못하니

 

더 자세하게 적어주면  된다

먼저 each potato(각 아이템의 이름) in videos(변수이름)이 필요하며

실제 videos 변수가 array의 형태를 하며 정보를 갖고 있어야 합니다

 

Iteration의 문서

 

https://pugjs.org/language/iteration.html

Iteration – Pug

 

mixin

사용 빈도수: 가끔 씀

 

Mixin 은 예를들어 홈페이지,검색 페이지 , 프로필 페이지에서 똑같은 형태의 HTML 블록을 여러 페이지에서 보여주고 싶을 때 사용한다

 

mixin은 이미 만들어진 html 조각과 같다

 

HTML 내용물을 return 하는 JavaScript 의 function과도 같다

 

HTML 내용물은 바뀌어도 된다

 

사용하는 방법

 

첫째로는 include mixin폴더위치/mixin퍼그파일이름 을 해주어야하고

 

두번째로는 +mixin변수이름()을 사용해야 한다

 

또한 mixin 변수에는 argument를 필요로 한다 만약 argument가 없다면 오류가 뜹니다

 

include mixin // +video(potato) 가 필요하고

 

mixins/video.pug 안에 내용에 video(info)로 해당하는 내용들이 필요하며

실제로 videos 변수가 갖고 있는 array 형태의 정보가 필요합니다 

 

Mixin의 문서

 

https://pugjs.org/language/mixins.html

Mixins – Pug