忘れがちなpug変数の書き方まとめ #HTML

こんにちは、@pompom0c0 です。Pugに触り始めて2週間くらい。
CMS化するほどでもないけど、ちょいちょいnewsとかいじって更新したいサイトを構築する際に、
変数を使うと便利...!だけど書き方忘れちゃった、、って時のために頭の整理をします。

環境

version

Mac OS Sirra 10.12.3
npm 3.8.6
node 5.12.0
gulp CLI/Local 3.9.1

環境構築

こちらの記事をベースに環境構築をしています。

開発しやすい環境の作り方~Web系~

フォルダ構成

pugやsassから生成されるhtml,cssデータとjs,画像ファイルをまとめてhtdocsに入れています。
一つのファイルにまとめることで、納品の際に漏れがなくすことができます。

root/
 ├ htdocs/
 |  └ css/
 |  └ img/
 |  └ js/
 |  └ index.html
 ├ node_modules/
 ├ pug/
 |  └ index.png
 ├ sass/
 |  └ style.scss
 |  └ _base.scss
 |  └ _conponent.scss
 |  └ _project.scss
 |  └ _reset.scss
 |  └ _utility.scss
 |  └ _variable.scss
 ├ package.json
 └ gulpfile.js

変数指定

配列と連想配列それぞれの書き方

- var array = ['aaa', 'bbb', 'ccc']

-
  var dictionary = [
  {
    'date':'2017.xx.xx',
    'img':'img/img-01.png',
    'title':'タイトル01'
    'class':['tag__border-red','tag__label-red'],
    'tags':['ライフスタイル','カフェ']
  },
  {
    'date':'2017.xx.xx',
    'img':'img/img-02.png',
    'title':'タイトル02',
    'class':['tag__border-blue','tag__label-blue'],
    'tags':['ミュージアム','表参道','散歩']
  },
];

1つのキーに対して複数の値を入れたいときは、[]でくくってその中に値を書きます。

出力方法

繰り返し文を使って出力しています。
まとめるとこんな感じです。

section.article
  each item in dictionary
    div.article__item
      img(src=`${item.img}` alt="img")
      h2 !{item.title}
      p !{item.date}
      // 1. 複数の値を順番に出力
      div.tag.tag__border(class=`${item.class[0]}`)
    div.tag__label(class=`${item.class[1]}`)
        // 2. 複数の値を連続して出力
        ul.article__tag
          each i in item.tags
            li: p # !{i}

1.　複数の値を順番に出力

連想配列内で、1つにキーに対して入れた複数の値は配列と同じように、0から番号順にストックされています。
なので書き出しの際は0から番号を指定して書き出します。

2. 複数の値を連続して出力

連想配列内に指定した、複数の値を連続して出力したいときは、もう1度繰り返し文を使います。
liタグを使うときは、繰り返し文の後もインデントをズラさないと、htmlで出力した時にulタグの中に入らないので注意しましょう。

ul.article__tag
  each i in item.tags
    li: p # !{i}

ul.article__tag
each i in item.tags
  li: p # !{i}

まとめ

ほんとにちょっとしたtipsですが、周りにpug使いがいないと困りますよね。
CMS化する前の業務効率化に少しでも貢献できれば嬉しいです:)