効率のいいコードの書き方
コードを書いていると、下部のようなデザインによく出くわします。
スキーマのblockforで動的に追加するのであれば、アイテムになる部分の記述は1度でいいのですが、
静的に固定されているような時は、同じものを4回書くのもあれだし…だからといって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()で記述してもいいと思います。
そこは臨機応変に
まとめ
始まりは、ただ、書くのが面倒臭い!から始まったんですが…。
本当に楽です!
どこか使い道があれば活用されてみてください!
Author And Source
この問題について(効率のいいコードの書き方), 我々は、より多くの情報をここで見つけました https://qiita.com/Shopify_ojisan/items/7e11c5124500f7a0fa99著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .