📁

【Shopify.dev和訳】Themes/Architecture/Templates/article

2021/09/17に公開約3,000字

この記事について

この記事は、Themes/Architecture/Templates/articleの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

article

articleテンプレートは、記事ページをレンダリングします。記事ページには、記事の全コンテンツと、お客様のためのコメント欄(オプション)が含まれています。

article オブジェクト

リキッドの article オブジェクトにアクセスして、ブログ記事の詳細を表示することができます。

コメントフォーム

コメントフォームは、Liquid form タグとそれに付随する 'new_comment', article パラメータを使用して追加できます。フォームタグブロック内に、次の入力を含める必要があります。

Input type name
Name text comment[author]
Email email comment[email]
Comment textarea comment[body]

例:

{% form 'new_comment', article %}
  {{ form_errors | default_errors }}

  <div class="name">
    <label for="name">Name</label>
    <input type="text" name="customer[author]" value="{{ form.author }}">
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]" value="{{ form.email }}">
  </div>

  <div class="comment">
    <label for="comment">Comment</label>
    <textarea name="customer[body]">{{ form.body }}</textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Post">
  </div>
{% endform %}

記事のコメントをページングする

記事のコメントには、article オブジェクトからアクセスでき、1 ページあたり 50 の制限があります。このため、記事のコメントにページネーションして、すべてのコメントにアクセスできるようにする必要があります。

Example
{% paginate article.comments by 20 %}
  {% for comment in article.comments %}
    <!-- comment info -->
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます