トップページのブログ最新記事の表示を変更したい

解決済
mayu
観光客
10 0 1

お世話になっております。
質問させてください。

テーマは「debut」を使用しています。

ブログを2種類作成し、1つはデフォルトの表示、1つは写真のように表示させたいのですが、どのファイルをどのように変更すれば良いでしょうか?

ご存知の方がいらっしゃいましたら、教えていただけますと幸いです。

ブログ最新記事.jpg

0 件の「いいね!」
jizo
先駆者
224 80 248

成功

以下のいずれかでそれぞれ分岐させ、スクリーンショットのような状態になるようにコーディングすることになるかと思います。

  • blog-template.liquid内で分岐させ、スクリーンショットのような内容を記載する
  • blog-template.liquidを複製してスクリーンショットのような内容を記載し、blog.liquid内で読み込みを分岐させる

 

分岐に関しては以下ヘルプのblogsの箇所が参考になります。

https://shopify.dev/docs/themes/liquid/reference/objects

<ul>
  {% for article in blogs.myblog.articles  %}
   <li>{{ article.title | link_to: article.url }}</li>
  {% endfor %}
</ul>

加えて、私のブログで恐縮ですが以下なども参考になるかもしれません。(ブログのハンドル部分)

https://webutubutu.com/webdesign/8828#toc_H3-2

 

スクリーンショットの内容を具体的にどう作るのかはblog-template.liquidや以下のblog objectのヘルプなどが手掛かりになると思います。

https://shopify.dev/docs/themes/liquid/reference/objects/blog

0 件の「いいね!」
mayu
観光客
10 0 1

返信をありがとうございます。

教えていただいたブログなどを参照し、どのようにコードを書いたら良いのかは分かりました。

しかし、大変お恥ずかしいのですが、ファイル内のどの部分にコードを挿入したら良いのか分かりません。

大変恐縮ですが教えていただけますと幸いです。

0 件の「いいね!」
jizo
先駆者
224 80 248

記載箇所は作り方によってかわりますのでなんとも言えない状態ですが、ご希望のコードはセクションを丸ごと作る必要があると思われるため以下のいずれかになるかと思います。

  • blog-template.liquid内で分岐させる場合、元のコードの前後
  • blog-template.liquidを複製し改造して用いる場合、そのファイル丸ごと
0 件の「いいね!」
mayu
観光客
10 0 1

jizo様、初歩的な質問にも丁寧にお答え下さって感謝申し上げます。

まだ上手く実装できていませんが、頑張ってみます。

本当にありがとうございました。

0 件の「いいね!」