Liquid Snippets by ALSEL
📄 ページテンプレート初級

ブログ記事一覧ページ

ブログの全記事を一覧表示し、記事ごとにタイトル・作成日・著者・本文を出力するテンプレート。コメント機能が有効な場合はコメント数も表示し、ページネーション対応。

用途
ブログセクション、またはニュース・お知らせページで複数の記事を20件単位で分割表示するとき。
設置場所
templates/blog.liquid に配置。管理画面のブログセクションテンプレートとして、または blog.all ハンドルのブログ一覧ページテンプレートとして使用する。
注意点
ページネーションが正しく機能するには `{% paginate %}` で囲った範囲内に `{{ paginate | default_pagination }}` が必須。コメント表示は `blog.comments_enabled?` で事前確認する前提のため、ストアの管理画面でブログのコメント機能を有効化しておく。article.content は HTML タグを含むため、セキュリティと見栄えを考慮して `<div class="article-body textile">` のようにコンテナで確実に囲む。
タグ:blogarticlepaginationlooptemplate

コード

33 行 / liquid
<div id="shop-id-label_about">
<h3 class="article-head-title">{{page.title}}</h3>

{% paginate blog.articles by 20 %}

  {% for article in blog.articles  %}
    <div class="article">
      <h3 class="article-head-title">
        <a href="{{article.url}}">{{ article.title }}</a>
      </h3>

      <p>
      {% if blog.comments_enabled? %}
        <a href="{{article.url}}#comments">{{ article.comments_count }} comments</a>
        &mdash;
      {% endif %}
      posted {{ article.created_at | date: "%Y %h" }} by {{ article.author }}</p>
      <div class="article-body textile">
        {{ article.content }}
      </div>
    </div>
  {% endfor %}

  <div id="pagination">
    {{ paginate | default_pagination }}
  </div>

{% endpaginate %}


</div>
<div class="clear-me"></div>

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📄 ページテンプレート初級

ページテンプレート

Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。

📁 liquid·MIT·5
📄 ページテンプレート初級

リダイレクト

ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。

📁 shopify-headless-theme·MIT·7
📄 ページテンプレート初級

トップページの基本テンプレート

Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。

📁 liquid·MIT·7
📄 ページテンプレート初級

固定ページのテンプレート

Shopify 管理画面で作成した固定ページ(利用規約、プライバシーポリシーなど)を表示するテンプレート。ページタイトルと本文コンテンツを描画する。

📁 mcliquid-theme·MIT·8
📄 ページテンプレート初級

ページの基本テンプレート

固定ページ(About など)の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。

📁 liquid·MIT·9
📄 ページテンプレート初級

固定ページのテンプレート

固定ページ(ポリシー、会社概要、利用規約など)の基本レイアウト。ページタイトルと本文を中央揃えで表示する。

📁 ks-bootshop·MIT·10