pug 쓰는 방법, 사용법(변수 & 배열편)

pug를 갓 쓰는 프로젝트에 들어간 적이 없다.
드디어 그때가 와서 몇가지 빠졌기 때문에 메모가 테라에 정리해 보았습니다.

변수 지정 방법

var, let

덮어쓸 수 있는 변수를 지정할 수 있다.
지정하고 있는 파일과 다른 파일에서도 덮어쓰기가 가능.
하이픈 + 개행 + 들여 쓰기로 일일이 하이픈을 쓰지 않아도된다
var도 생략할 수 있다
템플릿 리터럴 방식으로 변수와 문자열을 연결할 수 있으며, 그 때는 ${XXX}문자열로 단순히 내뱉을 때는 #{XXX}

-
  var person1 = "羽川翼"
  person2 = "戦場ヶ原ひたぎ"
  test = `${person1}＆${person2}` // test = 羽川翼＆戦場ヶ原ひたぎ
  person1 = "委員長" // person1 = 委員長

//- ↓pugでの指定の仕方
p #{person1}

//- ↓吐き出されるHTML
<p>委員長</p>

const

덮어쓸 수 없는 변수를 지정할 수 있습니다.
덮어 쓰려고하면 오류가 발생합니다.
var 같이 const를 생략할 수 없다. 생략하면 덮어쓸 수 있는 변수가 완성된다.

- const person3 = "千石撫子"
  const person4 = "神原駿河"

배열 지정 방법

배열·연상 배열(객체)도 조작 가능

배열·연상 배열

//- ↓配列
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓連想配列（オブジェクト）
-
  var array3 = {
    neko:"羽川翼",
    kani: "戦場ヶ原ひたぎ",
    saru: "神原駿河",
  }

연상 배열은 하이픈 + 들여 쓰기를 쓰지 않으면 에러가 된다 (답다…)

//- このように書くとエラーになる
- var array3 = {
  neko:"羽川翼",
  kani: "戦場ヶ原ひたぎ",
  saru: "神原駿河",
}

배열에 연관 배열(객체)

-
  const array4 = [
    {
      name: "戦場ヶ原ひたぎ",
      kaii: "蟹"
    },
    {
      name: "神原駿河",
      kaii: "猿"
    },
    {
      name: "千石撫子",
      kaii: "蛇"
    },
  ]

연상 배열 안에 연상 배열

어쩐지 대량으로 데이터만 갖게 해, 그 중에서 대상의 데이터만 꺼내고 싶다…같은…

-
  var array5 = {
    nadeko: {
      name: "千石撫子",
      kaii: "蛇",
      feature: "中学生",
    },
    mayoi: {
      name: "八九寺真宵",
      kaii: "蝸牛",
      feature: "小学生",
    },
    shinobu: {
      name: "忍野忍",
      kaii: "鬼",
      feature: "吸血鬼",
    },
    yotsugi: {
      name: "斧乃木余接",
      kaii: "憑藻神",
      feature: "人形",
    }
  }

조건 분기

if 문

JS와 같은 사용법이 가능하다. 물론 else도 사용 가능.
if문의 조건에 맞는 경우에 토해내고 싶은 소스는 들여쓰기가 필요.
부모 요소가 있으면 if 문 자체에도 들여 쓰기가 필요합니다.

  div
    if person1 === '委員長'
      p 羽川翼
    else
      p 誰でしょう？

case

javascript에서 말하는 switch 문

  div
    case person1
      when '委員長'
        p 羽川翼
      when '主人公'
        p 阿良々木暦
      when 'ヒロイン'
        p 戦場ヶ原ひたぎ
      when '詐欺師'
        - break
      default
        p 誰でしょう？

이 경우 person1이 위원장인 경우

  <div>
    <p>羽川翼</p>
  </div>

그리고 컴파일되고,
”사기꾼”의 경우

  <div>
  </div>

아무것도 내뿜지 않는 결과가 됩니다.

반복 처리

each

앞에서 설명한 배열을 꺼냅니다.

간단한 배열

//- ↓配列
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓pug
ul
  each girl in girls
    li!= girl

//- ↓HTML
  <ul>
    <li>shinobu</li>
    <li>mayoi</li>
    <li>yotsugi</li>
  </ul>

li!= girl이 「!마크＋이콜」은 꺼낸 아이템을 코드로서 묻어 줍니다.
따라서 "shino<br>bu"와 같은 배열의 경우 <li>shino<br>bu</li>라는 HTML이 토출됩니다.

배열에 연관 배열

-
  const array4 = [
    {
      name: "戦場ヶ原ひたぎ",
      kaii: "蟹"
    },
    {
      name: "神原駿河",
      kaii: "猿"
    },
    {
      name: "千石撫子",
      kaii: "蛇"
    },
  ]

//- ↓pugでの取り出し方
ul
  each item,index in array4
    li(class=`item${index+1}`)!= item.name
      span 怪異は#{item.kaii}

//- ↓吐き出されるHTML
  <ul>
    <li class="item1">戦場ヶ原ひたぎ<span>怪異は蟹</span></li>
    <li class="item2">神原駿河<span>怪異は猿</span></li>
    <li class="item3">千石撫子<span>怪異は蛇</span></li>
  </ul>

배열 속에 객체의 경우가 가장 많이 사용하는 빈도가 많은 것 같습니다. .
배열로 꺼낸 아이템은 변수와 같이 #{とりだしたアイテム}속성도 배열 돌릴 때마다 바꾸고 싶어
each 문장에서는 index 번호도 취득할 수 있으므로 위와 같이 일련번호로 클래스를 부여하는 일도 가능

연상 배열 안에 연상 배열

-
  var array5 = {
    nadeko: {
      name: "千石撫子",
      kaii: "蛇",
      feature: "中学生",
    },
    mayoi: {
      name: "八九寺真宵",
      kaii: "蝸牛",
      feature: "小学生",
    },
    shinobu: {
      name: "忍野忍",
      kaii: "鬼",
      feature: "吸血鬼",
    },
    yotsugi: {
      name: "斧乃木余接",
      kaii: "憑藻神",
      feature: "人形",
    }
  }
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓上記の配列から幼女と少女と童女（変数girls）を取り出したい。
p 幼女と少女と童女を取り出したい。
ul
  each girl,index in girls
    li.item(id=`${girl}` class=`item${index+1}`)!= array5[girl].name

//- ↓吐き出されるHTML
  <p>幼女と少女と童女を取り出したい。</p>
  <ul>
    <li class="item item1" id="shinobu">忍野忍</li>
    <li class="item item2" id="mayoi">八九寺真宵</li>
    <li class="item item3" id="yotsugi">斧乃木余接</li>
  </ul>

배열로 지정한 데이터만을 표시시키고 싶다…같은 때에…
연상 배열을 꺼내는 방법은 점으로 연결하면 꺼낼 수 있습니다! 생각하고,array5.girl.name 에서 꺼내려고하면 오류가 발생합니다. (키가 일본어가 아니어도. 왜??)
그래서 []에서 꺼내는 것이 무난한 것 같습니다.

참고

htps // 푸 gjs. 오 rg/아피/갓찐 g-s r d. HTML
htps : // tr. 84815. s 파세/푸g/

요약

조금씩 ~이지만 기억하면 편리 할 것입니다 ~라고 생각합니다.
mixin에 대해서도 여러가지 빠져 있으므로 마음이 가면 갱신합니다
미스드의 추격은 더블 초콜릿입니다