PUG) iteration , mixin 에 대한 내용
iteration
사용 빈도수 : 자주 사용
Iteration은 array의 모든 element에 대해 특정 행동을 취할 때 사용한다
each X in Y 인데 Y의 변수는 꼭 존재해야 한다
Y는 array의 형태이여야 하고
array 안에 아무것도 없을 때를 대비하여 else를 사용가능하다
리스트의 각 아이템을 보여줌
또한 Y의 어레이를 오브젝트 형태로 사용할 때가 있는데 자바스크립트는 이해를 못하니
더 자세하게 적어주면 된다
Iteration의 문서
https://pugjs.org/language/iteration.html
Iteration – Pug
Iteration Pug supports two primary methods of iteration: each and while. each Pug’s first-class iteration syntax makes it easier to iterate over arrays and objects in a template: ul each val in [1, 2, 3, 4, 5] li= val 1 2 3 4 5 You can also get the index
pugjs.org
mixin
사용 빈도수: 가끔 씀
Mixin 은 예를들어 홈페이지,검색 페이지 , 프로필 페이지에서 똑같은 형태의 HTML 블록을 여러 페이지에서 보여주고 싶을 때 사용한다
mixin은 이미 만들어진 html 조각과 같다
HTML 내용물을 return 하는 JavaScript 의 function과도 같다
HTML 내용물은 바뀌어도 된다
사용하는 방법
첫째로는 include mixin폴더위치/mixin퍼그파일이름 을 해주어야하고
두번째로는 +mixin변수이름()을 사용해야 한다
또한 mixin 변수에는 argument를 필요로 한다 만약 argument가 없다면 오류가 뜹니다
Mixin의 문서
https://pugjs.org/language/mixins.html
Mixins – Pug
Mixins Mixins allow you to create reusable blocks of Pug. //- Declaration mixin list ul li foo li bar li baz //- Use +list +list foo bar baz foo bar baz Mixins are compiled to functions, and can take arguments: mixin pet(name) li.pet= name ul +pet('cat') +
pugjs.org