icon-check icon-sns-facebook icon-sns-twitter icon-sns-instagram icon-sns-line icon-sns-pinterest arrow icon__mail
GUIDE

記事一覧ページサンプルコード

Clipkitで構築するWEBサイトのフロントエンドをコーディングするためのLiquidテンプレート言語のリファレンスです。本項では、記事一覧ページ内でよく使用されるサンプルコードを紹介します。

サンプルコード

記事一覧ページで利用できるサンプルコードを用意しました。あわせて適切なCSSを適用することで、下記のような記事一覧ページを表示できます。

記事一覧ページ出力サンプル

横に3列、縦に2行の出力サンプルです。記事数が多いため、画面左下にページネーションが自動で出力されています。

<div>
{% assign articles = site.articles %}
{% assign articles_cnt = articles | size %}
{% if articles_cnt > 0 %}
  {% paginate articles per 6 %}
  {% selectfor (title, path, image_is_empty, image_medium_url, category, ordered_tags, published_at, updated_at, description, user, num_views, num_comments, num_favorites) in paginate.collection %}
  <div>
    <a href="{{ path }}">
      <div>
        <figure>
          <img src="{% if image_is_empty %}{{ site.logo_original_url }}{% else %}{{ image_medium_url }}{% endif %}" alt="{{ title }}">
        </figure>
      </div>
      <div>
        {% if category %}
        <p><a href="{{ category.url }}">{{ category.name }}</a></p>
        {% endif %}
        <p>{{ title }}</p>
        <p>{% for tag in ordered_tags %}<a href="{{ tag.path }}">#{{ tag.name }}</a>{% endfor %}</p>
        <p>公開:{{ published_at | date: '%Y.%m.%d' }} 更新:{{ updated_at | date: '%Y.%m.%d' }}</p>
        {% if description %}
        <p>{{ description | truncate: 100 }}</p>
        {% endif %}
        <p>written by <a href="{{ user.url }}">{{ user.nickname }}</a></p>
        <p>
          <i class="fa fa-eye"></i>{{ num_views }} view
          <i class="fa fa-fire"></i>{{ num_comments }} 件
          <i class="fa fa-heart"></i>{{ num_favorites }} いいね
        </p>
      </div>
    </a>
  </div>
  {% endselectfor %}
  {% endpaginate %}
{% else %}
  <p>記事はありません</p>
{% endif %}
</div>

TIPS

サンプルコードをベースに、カスタマイズするためのTIPSを以下に用意しました。

最新の記事一覧を取得したい

{% comment %}
このコードは、公開中の Article オブジェクトを
公開日の新しい順(降順)で取得します。
{% endcomment %}

{% assign articles = site.articles %}

特定のカテゴリーの記事一覧を取得したい

{% comment %}
このコードはカテゴリーテンプレート内で
現在のカテゴリーに紐づく記事一覧を公開日の新しい順(降順)で取得します。
{% endcommnet %}

{% assign articles = category.articles %}
{% comment %}
上記のコードと同じ結果を取得できます。
トップページ等でカテゴリー別の新着記事n件を表示する時に使用できます。
{% endcomment %}

{% assign articles = site.articles | search: 'category:"カテゴリー名または、カテゴリーキー"' | limit: 3 %}

記事種類1を設定した記事一覧を取得したい

{% comment %}
記事種別1を設定した記事一覧を公開日の新しい記事から取得します。記事種類を使用したピックアップ記事の表示などに使用できます。
{% endcomment %}

{% assign articles = site.articles | search: 'article_kind:"1"' | limit: 3 %}

記事種類2を設定した記事を除外した記事一覧を取得したい

{% comment %}
記事種別2を除外した記事一覧を公開日の新しい記事から取得します。
{% endcomment %}

{% assign articles = site.articles | search: '-article_kind:"2"' %}

指定のタグがついた記事一覧を取得したい

{% comment %}
NEWSタグがついた記事最新9件を並べる例です。
{% endcomment %}

{% assign tag = site.tags | find_by: 'name', 'NEWS' %}
{% if tag %}
  <ul>
{% selectfor (title, url) in tag.recent_articles %}
  {% if forloop.index > 9 %}
    {% break %}
  {% else %}
    <li><a href="{{ url }}">{{ title }}</a></li>
  {% endif %}
{% endselectfor %}
  </ul>
{% else %}
  <p>記事はありません。</p>
{% endif %}

カテゴリーオブジェクトを取得したい

{% comment %}
全てのカテゴリーから新着情報(Permalink ID:news)を取得します。
{% endcomment %}

{% assign category = site.all_categories | find_by: 'key' , 'news'  %}

特定のカテゴリー内で特定のタグがついた記事を取得したい

{% comment %}
カテゴリー「新着情報(Permalink ID:news)」からタグ「IR情報」が付いた記事一覧を取得します。
{% endcomment %}

{% assign articles = site.articles | search: 'category:"news" tag:"IR情報"' %}

複数のカテゴリーを除外した記事の一覧を取得したい

{% comment %}
カテゴリー「関東」「関西」を除外した記事一覧を取得します。
{% endcomment %}

{% assign articles = site.articles | search: '-category:"関東" -category:"関西"' %}

特定のカテゴリーで拡張項目の値がマッチする記事一覧を取得したい

{% comment %}
カテゴリーが「グルメ」であり、拡張項目「地域」の値が「東京」の記事一覧を取得する
{% endcomment %}

{% assign articles = site.articles | search: 'category:グルメ 地域:東京' %}

複数のタグが付けられた記事一覧を取得したい

{% comment %}
タグ「リファレンス」とタグ「ガイド」が付いた記事一覧を取得する
{% endcomment %}

{% assign articles = site.articles | search: 'tag:"リファレンス" tag:"ガイド"' %}

ページネーションを設置したい

{% comment %}
1ページあたり15件の記事を表示します
{% endcomment %}

{% assign articles = site.articles %}
{% assign articles_cnt = articles | size %}
{% if articles_cnt > 0 %}
  {% paginate articles per 15 %}
  <ol>
  {% selectfor (title, path) in paginate.collection %}
    <li><a href="{{ path }}">{{ title }}</a></li>
  {% endselectfor %}
  </ol>
  {% endpaginate %}
{% else %}
  <p>記事はありません</p>
{% endif %}

ページネーションをカスタマイズしたい

{% comment %}
カスタマイズ事例のサンプルコードです
{% endcomment %}

<div>
  {% if paginate.current_page > 1 %}
    <a href="?page=1"><< 最初の記事</a>
  {% else %}
    <span><< 最初の記事</span>
  {% endif %}

  {% if paginate.previous_page %}
    <a href="?page={{ paginate.previous_page }}"><< 新しい記事</a>
  {% else %}
    <span><< 新しい記事</span>
  {% endif %}

  <span>{{ paginate.current_page }} / {{ paginate.total_pages }} ページ</span>

  {% if paginate.next_page %}
    <a href="?page={{ paginate.next_page }}">古い記事 >></a>
  {% else %}
    <span>古い記事 >></span>
  {% endif %}

  {% if paginate.current_page < paginate.total_pages %}
    <a href="?page={{ paginate.total_pages }}">最後の記事 >></a>
  {% else %}
    <span>最後の記事 >></span>
  {% endif %}
</div>

<p>{{ total }} 件中、{{ start_index }}〜{{ end_index }} 件目を表示</p>

ページネーションカスタマイズ事例

CSSを適用する事により上記画像のような表示が可能です。

33 件

関連するガイド

Clipkit Liquidテンプレート言語リファレンス(タグ・フィルター)

Clipkit Liquidテンプレート言語リファレンス(タグ・フィルター)

Clipkit Liquidテンプレート言語リファレンス(オブジェクト・メソッド)

Clipkit Liquidテンプレート言語リファレンス(オブジェクト・メソッド)