Liquid、JavaScriptなどに関する質問
1ブログテンプレートのなかで、mediaというハンドル名のブログ内のタグ1とタグ2のブログ記事を5つずつ出力したいと思っております。
以下のようなlimitを付けて5つずつ、タグ1とタグ2の記事をそれぞれ表示させようとしたときにfor文で分けているにも関わらず、タグ1とタグ2あわせて5つのブログ記事を出力されてしまいます。
様々な方法を試してみたのですが、どうしてもこちら思ったように出力されません。
お手すきでご教授いただけますと幸いです。
<div class="inner">
{% for article in blogs['media'].articles limit: 5 %}
{% for tag1 in article.tags %}
{% if tag1 == 'タグ1' %}
<a class="item" href="{{ article.url }}" data-animate>
<div class="topicsImage">
<img class="card__image lazyload fade-in" data-src="{{ article.image | img_url: 'master' }}"
data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="1.6"
data-sizes="auto"
loading="lazy"
alt="{{image.alt}}">
</div>
<div class="topicsTitle">
<div class="tpYmd">{{ article.created_at | date: '%Y年 %-m月 %d日' }}</div>
<div class="tpTxt">{{ article.title }}</div>
</div>
</a>
{% endif %}
{% endfor %}
{% endfor %}
</div>
<div class="inner">
{% for article in blogs['media'].articles limit: 5 %}
{% for tag1 in article.tags %}
{% if tag1 == 'タグ2' %}
<a class="item" href="{{ article.url }}" data-animate>
<div class="topicsImage">
<img class="card__image lazyload fade-in" data-src="{{ article.image | img_url: 'master' }}"
data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="1.6"
data-sizes="auto"
loading="lazy"
alt="{{image.alt}}">
</div>
<div class="topicsTitle">
<div class="tpYmd">{{ article.created_at | date: '%Y年 %-m月 %d日' }}</div>
<div class="tpTxt">{{ article.title }}</div>
</div>
</a>
{% endif %}
{% endfor %}
{% endfor %}
</div>
ユーザー | ランク |
---|---|
38 | |
17 | |
14 | |
11 | |
5 |
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023