Pug のループ時にa要素をどのように組み込んでいいのか分かりません

前提

Pugを勉強中です。
月ごとのページに飛ぶメニューを作っています。
ループを入れ子にして作ってみようと思うのですが
どうやってa要素を入れていいか
わかりません。

実現したいこと

2022　01　02　03　04　05　06　07　08　09　10　11　12
2021　01　02　03　04　05　06　07　08　09　10　11　12
2020　01　02　03　04　05　06　07　08　09　10　11　12

各月にリンクを張りたい

該当のソースコード

pug
1body
2  - var y = 2022;
3  - var m = 01;
4
5  while y > 2019
6    ul.flex
7      li.year= y--
8        while m < 13
9          li.month= m++
10        - var m = 01;

.flex と .year と .month はレイアウト用のクラスです。
よくあるループのサンプルを参考に
変数を入れてみました。
各月にリンクを張りたいので

pug
1li.month= m++

のところを

pug
1li.month a(href="#") m++

こんな意味合いの形にしたいのですが
実際にやろうとすると
Invalid string length とエラーが出ます。
コンパイルは preprosです。

教えていただければありがたいです。

回答1件

ベストアンサー

こんにちは！
最初にですが、

li.year の入れ子が即 li.month となっていますが、htmlの構造上 ul ないし ol が必要なので注意しましょう
- var m = 01; が2度定義されている

エラーについて

li.month a(href="#") m++
ですが、https://pugjs.org/language/code.html#buffered-code にもあるように、jsの評価として=で繋ぐというルールがあります
なので、while文の m が評価されずループし続けた結果、Invalid string length となったんだと思います

回避策としては以下の2パターン

・パターン1
// a を入れ子にして a に = をつける
li.month
  a(href="#")= m++

・パターン2
// ワンライナーで書く場合「:」で繋ぎ、a 側に = をつける
li.month: a(href="#")= m++

参考例

- var y = 2022

ul.flex
  while y > 2019
    li.year= y--
    - for (var m = 1; 13 > m; m++)
      li.month
        if (m > 9)
          a(href="")= m
        else
          a(href="")= `0${m}`

whileの入れ子だとうまく行かなかったので、for文で記述
変数はbodyの外に記述した方が良さそう
monthを01、02としたいのであれば、今の変数はNumber型なので、01とはならない
- if文とテンプレートリテラルを使って記述した方が良さそう
- 回避策パターン2だと li.month が2回出てくるのでパターン1で記述
for文やif文、テンプレートリテラルについては解説しません

投稿2022/08/09 10:43