forループ
forループは、HubLでのオブジェクトのシーケンスに対する反復処理に使用できます。主にブログコンテンツをリスト形式でレンダリングする場合に使用されますが、他のシーケンス変数を並べ替える場合にも使用できます。
forループは、{% for %}
文で始まり {% endfor %}
文で終わります。{% for %}
文では、シーケンス項目の名前に続き、in
を使ってシーケンス名を指定します。for
文の始まりから終わりまでの間のコードが、反復の度に出力されます。このコードには通常、各シーケンス項目の出力変数が含まれます。forループの基本構文は以下のとおりです。
loop.index
によって、ループの現在の反復数(イテレーション)がカウントされます。他にも反復数をさまざまな方法でカウントするloop変数プロパティーがあります。これらのプロパティーについては以下に示します。変数 | Description |
---|---|
loop.cycle
| シーケンスリスト間を循環するヘルパー関数。後述の説明を参照してください。 |
loop.depth
| 再帰ループでのレンダリングの現在の深さを示します。レベル1から開始します。 |
loop.depth0
| 再帰ループでのレンダリングの現在の深さを示します。レベル0から開始します。 |
loop.first
| この変数は、ループの最初の反復である場合にtrueとして評価されます。 |
loop.index
| ループの現在の反復数。この変数はカウントを1から開始します。 |
loop.index0
| ループの現在の反復数。この変数はカウントを0から開始します。 |
loop.last
| この変数は、ループの最後の反復である場合にtrueとして評価されます。 |
loop.length
| シーケンスの項目の数。 |
loop.revindex
| ループの終わりまでの反復数。1までカウントダウンします。 |
loop.revindex0
| ループの終わりまでの反復数。0までカウントダウンします。 |
さまざまなループ変数の使用例を以下にいくつか示します。以下の基本的な例では、loop.index
を使用して、反復の度に出力されるカウントを行います。
次の例では、条件文を使用して、ループの長さが特定の数でdivisibleby
(割り切れる)かどうかをチェックします。次に、記事項目divの幅をレンダリングします。この例では標準のブログ記事ループを使用し、ループに6件の記事があると仮定しています。
ループを他のループでネストすることもできます。子forループは、親forループが反復される度に実行されます。以下の例では、親項目の<ul>
の中でネストしている<ul>
に子項目のリストが出力されます。
反復の度に一連の文字列値を循環して出力するには、forループでcycleタグを使用します。この手法の実用例として、リスト内のブログ記事に適用するクラスを交互に切り替える処理が挙げられます。このタグは3つ以上の値に使用でき、ループの反復数がcycleの値よりも多い場合にcycleが繰り返されます。以下の例では、odd
とeven
というクラスがリスト内の記事に適用されます(この例ではループに5件の記事が含まれていると仮定しています)。
カンマ区切りのcycle文字列値の間にスペースがない点に注意してください。
ループの対象にするディクショナリー(辞書型)にキーと値が含まれている場合、単純なforループで参照できるのは値に限られます。forループ内でキーと値の両方を参照するには、次のような形式のHubLを使用します。
ページにタグを追加すると、HubSpotにより、ラッパー側のHTMLに自動的にid
が割り当てられます。このタグはタグの「name」ごとに固有です。特定のタグをforループ内で使用する場合に、固有のnameを設定することは現実的ではありません。タグにunique_in_loop
パラメーターを追加して、固有idを生成してください。このパラメーターによってモジュール名に現在のループの反復数が追加されることで、項目が重複しなくなります。固有idは、HTMLの有効性に必要なだけでなく、アクセシビリティーにおいても重要です。
貴重なご意見をありがとうございました。