GUIDE
記事一覧ページサンプルコード
Clipkitで構築するWEBサイトのフロントエンドをコーディングするためのLiquidテンプレート言語のリファレンスです。本項では、記事一覧ページ内でよく使用されるサンプルコードを紹介します。
サンプルコード
記事一覧ページで利用できるサンプルコードを用意しました。あわせて適切なCSSを適用することで、下記のような記事一覧ページを表示できます。
<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>
33 件