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

ブログ記事ページのテンプレート

ブログ記事の本文、メタ情報(投稿日)、コメント一覧、コメント投稿フォームを表示するテンプレート。ブログのコメント機能が有効な場合のみコメント欄をレンダリングする。

用途
Shopify のブログ機能を有効にしているストアで、記事詳細ページにコメント機能を統合したいとき。読者との交流やコンテンツマーケティング強化に活用できる。
設置場所
templates/article.liquid に配置する。管理画面でブログを作成・公開すると、このテンプレートが自動的に記事ページをレンダリングする。
注意点
ブログのコメント機能を有効にするには、Shopify 管理画面の「オンラインストア > ブログ」でそのブログを選択し、コメント機能を「オン」にする必要がある。コメント承認機能(blog.moderated?)が有効な場合、投稿後にストア管理者の承認待ちになる旨をユーザーに伝える。コメント投稿時のバリデーションエラー(author、email、body の入力漏れ)は form.errors に格納されるため、条件分岐で各フィールドに error クラスを付与する設計になっている。
タグ:blogarticlecommentformtemplate

コード

99 行 / liquid

  <div id="page" class="innerpage clearfix">
    <div id="text-page">

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

  <!-- Comments -->
{% if blog.comments_enabled? %}
<div id="comments">
  <h2>Comments</h2>

  <!-- List all comments -->
  <ul id="comment-list">
  {% for comment in article.comments %}
    <li>
      <div class="comment">
        {{ comment.content }}
      </div>

      <div class="comment-details">
        Posted by <span class="comment-author">{{ comment.author }}</span> on <span class="comment-date">{{ comment.created_at | date: "%B %d, %Y" }}</span>
      </div>
    </li>
  {% endfor %}
  </ul>

  <!-- Comment Form -->
  <div id="comment-form">
  {% form article %}
    <h2>Leave a comment</h2>

    <!-- Check if a comment has been submitted in the last request, and if yes display an appropriate message -->
    {% if form.posted_successfully? %}
      {% if blog.moderated? %}
        <div class="notice">
          Successfully posted your comment.<br />
          It will have to be approved by the blog owner first before showing up.
        </div>
      {% else %}
        <div class="notice">Successfully posted your comment.</div>
      {% endif %}
    {% endif %}

    {% if form.errors %}
      <div class="notice error">Not all the fields have been filled out correctly!</div>
    {% endif %}

    <dl>
      <dt class="{% if form.errors contains 'author' %}error{% endif %}"><label for="comment_author">Your name</label></dt>
      <dd><input type="text" id="comment_author" name="comment[author]" size="40" value="{{form.author}}" class="{% if form.errors contains 'author' %}input-error{% endif %}" /></dd>

      <dt class="{% if form.errors contains 'email' %}error{% endif %}"><label for="comment_email">Your email</label></dt>
      <dd><input type="text" id="comment_email" name="comment[email]" size="40" value="{{form.email}}" class="{% if form.errors contains 'email' %}input-error{% endif %}" /></dd>

      <dt class="{% if form.errors contains 'body' %}error{% endif %}"><label for="comment_body">Your comment</label></dt>
      <dd><textarea id="comment_body" name="comment[body]" cols="40" rows="5" class="{% if form.errors contains 'body' %}input-error{% endif %}">{{form.body}}</textarea></dd>
    </dl>

    {% if blog.moderated? %}
      <p class="hint">comments have to be approved before showing up</p>
    {% endif %}

    <input type="submit" value="Post comment" id="comment-submit" />
  {% endform %}
  </div>
  <!-- END Comment Form -->

</div>
{% endif %}
<!-- END Comments -->


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