index.liquidに特定のブログ記事を3記事だけ出力させたい

解決済
福水正太
Shopify Expert
18 3 8

はじめまして。

初めて、こちらのフォーラムで質問させて頂きます。

現在、html/css/javascriptで構成されたファイルを、Shopifyに移行して、動的な箇所(商品一覧・記事一覧など)はliquidタグと差し替える作業を行っております。

 

TOPページのある場所に、「サイト内の特定のブログ記事を3記事だけ出力させる(表示順は新着)」必要があったため、下記URLを参考に、index.liquidにていろいろ試してみましたが、反映されませんでした。

参考URL:https://shopify.github.io/liquid-code-examples/example/blog-article-list

 

↓記載したコード↓

 <div class="list-thumbnail flex">
<ul>

// 特定のブログを、新着順に3記事だけ表示させたい //

  <li><a href="/article.html" class="hover-img-outer">
    <img src="" alt="" class="for_sp" alt="">
    <span class="hover-img for_pc"><span class="hover-img-inner"><img src="" alt=""></span></span>
    <p class="title">タイトルタイトルタイトル</p>
    <p class="lead for_pc">ディスクリプションディスクリプションディスクリプション</p>
    <p class="date gothic">日付日付日付日付日付日付</p>
  </a></li>

// 特定のブログを、新着順に3記事だけ表示させたい //

</ul>
</div>

 

タイトルや日付に入れるliquidタグは分かるのですが、ループ?させるために、どこに何をどう書けば、狙い通りの表示ができるのかが、どうしても分からなかったため、どなたかご教授頂けると本当に嬉しいです。

 

目的は、「特定のブログ記事一覧を、3記事だけ、TOPページに表示させる」です。

 

よろしくお願い致します。

代表取締役
1 件の受理された解決策

ベストソリューション
Jizo_Inagaki
航海者
473 175 468

成功

この件は以下の英語フォーラムなどで触れられていますのでお知らせします。

https://community.shopify.com/c/Technical-Q-A/Loop-through-all-articles-in-all-blogs/td-p/564893

 

上記を踏まえ以下のようにすれば実現できるのではと思います。

{% for article in blogs['特定のブログのハンドル'].articles | limit: 3 %}
    {{article.title}}
{% endfor %}

 「特定のブログのハンドル」は「ブログ記事のハンドル」でなく、例えば初期に設定されている「news」などである点に留意ください。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。

元の投稿で解決策を見る

2件の返信2
Jizo_Inagaki
航海者
473 175 468

成功

この件は以下の英語フォーラムなどで触れられていますのでお知らせします。

https://community.shopify.com/c/Technical-Q-A/Loop-through-all-articles-in-all-blogs/td-p/564893

 

上記を踏まえ以下のようにすれば実現できるのではと思います。

{% for article in blogs['特定のブログのハンドル'].articles | limit: 3 %}
    {{article.title}}
{% endfor %}

 「特定のブログのハンドル」は「ブログ記事のハンドル」でなく、例えば初期に設定されている「news」などである点に留意ください。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。

元の投稿で解決策を見る

福水正太
Shopify Expert
18 3 8

表示されました!

誠にありがとうございます!!

代表取締役