効率のいいコードの書き方

コードを書いていると、下部のようなデザインによく出くわします。
　

スキーマのblockforで動的に追加するのであれば、アイテムになる部分の記述は１度でいいのですが、
静的に固定されているような時は、同じものを４回書くのもあれだし…だからといってSHOP内で、このカード使うところここしかないのでスニペットファイルにするのも…うーん…みたいな時に、for文で書く方法がないかとやり始めた方法です。

管理しやすく？記述量も大幅に減らせると思っているので、個人的におすすめです。

コード紹介

{%- comment -%} ラベル {%- endcomment -%}
{% assign title_array = "a,b,c,d" | split: "," %}

{%- comment -%} リンク {%- endcomment -%}
{% assign link_array = '/pages/a,/pages/b,/pages/c,/pages/d' | split: "," %}

<ul class="list">
  {% for i in (0..3) %}
    <li class="item">
      <a href="{{ link_array[i] }}"
        class="{% if i == 2 %} active {% endif %}"
      >
        {{ title_array[i] }}
      </a>
    </li>
  {% endfor %}
</ul>

変更になる箇所、タイトルやリンクなどの部分を先に配列で作成してあげて、for文をアイテム数だけ(0..3)で回してあげる方法です。
この方法で記述すると
・記述量を減らせ、見渡しやすい
・要素を新しく追加する時は、配列に追加して、カウント数を増やすだけでいい
・HTMLの構造の変更やクラス名の追加時に変更箇所が一箇所でいいこと
・ちょっと仕事できそうな雰囲気w

特定のスタイルの追加

aだけフォントを赤にしたい。
全てのカードの背景画像が違う
そんなこともあるかと思います。
aタグのクラス名にサンプルを追加していますが、for文の値が今何なのか？に合わせてクラス名を付与してもOKですし、スタイルシート内で:nth-child()で記述してもいいと思います。
そこは臨機応変に
　

まとめ

始まりは、ただ、書くのが面倒臭い！から始まったんですが…。
本当に楽です！
どこか使い道があれば活用されてみてください！