📄 ページテンプレート中級
ブログ記事の表示とコメント機能
ブログ記事のタイトル、本文、作成者、投稿日時を表示し、コメント機能を備えたテンプレート。ブログのコメント有効化設定に応じて、既存コメント一覧とコメント投稿フォームを条件付きで出す。
用途
ブログ機能を持つストアで、記事の詳細ページを表示するときに使う。読者からのコメント投稿と管理者による承認フロー(モデレーション)に対応。
設置場所
templates/article.liquid に配置し、Shopify 管理画面のオンラインストア設定でブログのコメント有効化を ON にすると、記事ページでコメント一覧とフォームが表示される。
注意点
コメント投稿フォームは `{% form article %}` タグで blog.moderated? の値に基づいて投稿直後の表示メッセージが自動切り替わるため、管理画面のブログ設定が前提となる。メールアドレスフィールドのバリデーションは Shopify 側で自動実施されるので、カスタムバリデーションが必要な場合は JavaScript を別途追加する。古いテンプレート形式のため、Online Store 2.0 テーマに統合する際はセクション化と CSS クラス名の更新が必要。
コード
75 行 / liquid<div class="article">
<h2 class="article-title">{{ article.title }}</h2>
<p class="article-details">posted <span class="article-time">{{ article.created_at | date: "%Y %h" }}</span> by <span class="article-author">{{ article.author }}</span></p>
<div class="article-body textile">
{{ article.content }}
</div>
</div>
<!-- Comments -->
{% if blog.comments_enabled? %}
<div id="comments">
<h3>Comments</h3>
<!-- List all comments -->
<ul id="comment-list">
{% for comment in article.comments %}
<li>
<div class="comment-details">
<span class="comment-author">{{ comment.author }}</span> said on <span class="comment-date">{{ comment.created_at | date: "%B %d, %Y" }}</span>:
</div>
<div class="comment">
{{ comment.content }}
</div>
</li>
{% endfor %}
</ul>
<!-- Comment Form -->
<div id="comment-form">
{% form article %}
<h3>Leave a comment</h3>
<!-- 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 -->
出典・ライセンス
- Repository:
- https://github.com/Shopify/liquid
- 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 行