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

ブログ一覧ページ

ブログの記事一覧を20件ずつ分割表示するテンプレート。各記事のタイトル、投稿日、著者、本文抜粋、コメント数を表示する。

用途
ストアのブログページで、全記事を一覧表示しながらページ遷移で管理したいとき。記事の概要を確認してから詳細ページへ遷移する導線に使う。
設置場所
templates/blog.liquid に配置するか、sections/main-blog.liquid 内に組み込む。管理画面の「ブログ」メニューから自動的に呼び出される。
注意点
`blog.comments_enabled?` でコメント機能の有無を判定しているため、Shopify 管理画面でそのブログのコメント設定を有効化しておく必要がある。記事本文は `truncate: 250` で250文字に切り詰めているので、より短い抜粋が必要なら数値を調整する。ページネーションは `default_pagination` という Liquid ビルトインフィルターを使うため、Shopify のデフォルト UI に依存する。独自デザインのページネーションを実装したい場合は `paginate` オブジェクトのプロパティ(`previous`, `next`, `parts` など)を直接ハンドルする。
タグ:blogpaginationarticlelooptruncate

コード

34 行 / liquid
<div id="page">
  <h2>{{page.title}}</h2>

  {% paginate blog.articles by 20 %}

    {% for article in blog.articles  %}

    <div class="article">
      <div class="headline">
      <h3 class="title">
        <a href="{{article.url}}">{{ article.title }}</a>
      </h3>
      <h4 class="date">Posted on {{ article.created_at | date: "%B %d, '%y" }} by {{ article.author }}.</h4>
      </div>

      <div class="article-body textile">
        {{ article.content | strip_html | truncate: 250 }}
      </div>

      {% if blog.comments_enabled? %}
        <p style="text-align: right"><a href="{{article.url}}#comments">{{ article.comments_count }} comments</a></p>
      {% endif %}
    </div>

    {% endfor %}

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

  {% endpaginate %}

</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