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

ブログ記事一覧ページ

ブログの全記事を時系列で一覧表示し、20件ごとにページネーションする。各記事には公開日と本文が表示される。

用途
ストアのブログ一覧ページ(blog.liquid)として使用。訪問者が過去記事を遡って読めるようにする。
設置場所
templates/blog.liquid に配置。Shopify 管理画面で「ブログ」セクションのテンプレートとして指定されると、自動的に blog オブジェクトに該当ブログの記事データが渡される。
注意点
paginate タグで 20 件ごとのページネーションが有効になり、blog.articles は常にその分割単位でフィルタされるため、全記事を一度に取得したい場合は paginate を削除する。article.created_at は Shopify のタイムスタンプ形式(UTC)なので、ストアのタイムゾーン設定と時差がある場合は日付ズレの可能性がある。記事本文(article.content)に HTML タグが含まれている場合、そのまま出力されるため XSS リスクに対応する場合は `| strip_html` フィルタで適用する。
タグ:blogarticlepaginationtemplateloop

コード

42 行 / liquid
  <div id="page" class="innerpage clearfix">
    <div id="text-page">
      <h1>Post from our blog...</h1>
      {% paginate blog.articles by 20 %}
          {% for article in blog.articles  %}

          <div class="entry">
            <h1><span><a href="{{ article.url }}">{{ article.title }}</a></span></h1>
            <div class="entry-post">
              <div class="meta">{{ article.created_at | date: "%b %d" }}</div>
              {{ article.content }}
            </div>
          </div>

        {% endfor %}

        <div class="paginate clearfix">
            {{ paginate | default_pagination }}
        </div>

      {% endpaginate %}
    </div>

    <div id="three-reasons" class="clearfix">
      <h3>Why Shop With Us?</h3>
      <ul>
        <li class="two-a">
          <h4>24 Hours</h4>
          <p>We're always here to help.</p>
        </li>
        <li class="two-c">
          <h4>No Spam</h4>
          <p>We'll never share your info.</p>
        </li>
        <li class="two-d">
          <h4>Secure Servers</h4>
          <p>Checkout is 256bit encrypted.</p>
        </li>
      </ul>
    </div>
  </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