the onishimemo

Pugでループさせつつ任意の位置で改行を入れる

Web

Pugを使っていて便利だな〜と痛感するのが繰り返し処理を使うときです。リスト要素にはほぼ必ずと言っていいほどfor文を使用してます。

ループにしておくと要素やclassを追加・削除したい時に修正が一箇所で済むので便利なんですよね。ミスも減るし一石二鳥。

で、たまに文章を任意の位置で改行したいな〜と思うときがあります。大したことないのですが、そのやり方をメモっておきます。(他にもっとスマートなやり方あるのかも)

ちなみにPugで複数行に渡って変数を定義する時は、ハイフンの後に改行&インデントを入れる必要があります。

-
  var spice = [
    {
      title : 'クミンシード',
      text: 'クミンとはエジプトなどを原産とするセリ科の一年草。\n種子に強い芳香とほろ苦み、辛みがあり、香辛料として用いられる。'
    }, {
      title : 'カルダモン',
      text :  'カルダモンは、ショウガ科の多年草である。和名は小荳蒄。\nカーダモンとも呼ばれる。\n原産はインド、スリランカ、マレー半島。'
    }
  ];
dl.spice-list
  - for(var i=0; i < spice.length; i++)
    - var text = spice[i].text.split('\n');
    dt.spice-name
      | #{spice[i].title}
    dd.spice-text
      - for(var j=0; j < text.length; j++)
        - if(j > 0)
          br
        | #{text[j]}

これで\nの入っている場所でbrタグが挿入されます。別に\nじゃなくても良くて、極端な話★とか♪でもいいのですが、癖で改行コードで書いています。

Pug使っていい案件とそうでない案件では作業速度全然違いますね…久々に触ってやっぱり便利だなぁと改めて思いました。おわり。

/