Liquid拡張タグ一覧

ブロック内の出力をキャッシュすることで高速に表示します。

引数にはキャッシュキーとしてオブジェクトや文字列を指定します。カンマ区切りで複数指定できます。max_ttl オプションで最大の有効時間（分）を指定できます。

例）キャッシュキーに固定の文字列を指定することで、常にキャッシュされた結果を出力します。この例では600秒（10分）でキャッシュはリセットされ、最新の結果が出力されます。

{% cache "cache-key", max_ttl: 600 %}
    〜
{% endcache %}

cache

例）人気のタグ一覧をキャッシュして出力します。キャッシュキーとしてsiteオブジェクトを指定しているので、記事が追加、更新されるのなどサイト情報が更新されるとキャッシュは自動的にリセットされ最新情報が出力されます。

{% cache site, "site-popular-tags" %}
    {% assign tags = site.popular_tags | limit: 20 %}
    {% for t in tags %}
    <a href="{{ t.path }}" class="btn btn-default btn-sm">
    <span class="fa fa-tag fa-lg text-muted"></span>
    {{ t.name }} ({{ t.num_articles | format_number }})</a>
    {% endfor %}
{% endcache %}

cache

collection

コレクションを読み込みます。コレクションのデータにて動的にHTMLが出力されます。デザイン調整をする場合は、cssにて対応が必要になります。

{% collection "collection_name" %}

collection

file

ファイルのURLを出力します。

<img src="{% file "/logo.png" %}" alt="Logo">

file

form

フォームを読み込みます。

{% form "vote1" %}

form

widget

ウィジェットを読み込みます。2つ目以降の引数でローカル変数を引き渡すことができます。

{% widget "google_analytics" %}
{% widget "article_ad1", permalink: article.url %}

widget

render

パーシャルテンプレートを読み込みます。2つ目以降の引数でローカル変数を引き渡すことができます。

{% assign ranking_articles = site.weekly_popular_articles | limit: 5 %}
{% render "ranking", articles: ranking_articles %}

render

フィルタ

format_number

数字3桁ごとにカンマを挿入します。

{{ 12345 | format_number }}

format_number

render_markdown

MarkdownをHTMLに変換します。

{{ user.bio | render_markdown }}

render_markdown

choose_random

配列からランダムに1件または複数件取得します。

例）新着記事10件からランダムに1件を取得：

{% assign article = site.articles | limit: 10 | choose_random %}

choose_random

例）新着記事10件からランダムに3件を配列で取得：

{% assign articles = site.articles | limit: 10 | choose_random: 3 %}

choose_random

shuffle

配列の要素をランダムに並べ替えます。

{% assign articles = site.articles | limit: 10 | shuffle %}

shuffle

match

正規表現とのパターンマッチを行います。マッチしたときは、マッチした部分の位置を整数で返します。マッチしなかったら、nilを返します。

{% assign secured = item.url | match: '^https:' %}

match

replace_regexp

文字列の中で正規表現のパターンにマッチした部分をすべて指定の文字列に置換します。

{% assign domain = item.url | replace_regexp: '^https?://(.*?)/', '\1' %}

replace_regexp

auto_link

文字列中のURLをHTMLのリンクに変換します。

{{ user.bio | auto_link }}

auto_link

unescape

文字列中のHTML実体参照を元の文字列に置換します。

where

Relationオブジェクトを指定の条件で検索して絞り込みます。

例）記事種別=1の記事を取得：

{% assign articles = site.articles | where: "article_kinds.code = '1'" %}

where

変数を与える場合はプレースホルダを使用してください。

{% assign articles = site.articles | where: "article_kinds.code = ?", kind_code %}

where

or

Relationオブジェクトの検索条件を結合します。

例）カテゴリ「hoge」または「fuga」の記事を取得：

{% assign hoge_articles = site.articles | where: "categories.name = 'hoge'" %}
{% assign fuga_articles = site.articles | where: "categories.name = 'fuga'" %}
{% assign articles = hoge_articles | or: fuga_articles %}

or

find_by

Relationオブジェクトから指定のフィールド値に該当する1件のオブジェクトを取得します。

例）key=xxxxxの記事を取得：

{% assign article = site.articles | find_by: 'key', 'xxxxx' %}

find_by

limit

Relationオブジェクトの先頭から指定数を取得します。

{% assign articles = site.articles | limit: 10 %}

limit

offset

Relationオブジェクトの先頭から指定数より後ろを取得します。

{% assign articles = site.articles | offset: 10 %}

offset

order

Relationオブジェクトの並び順を変更します。

例）公開記事を更新日時の降順で取得：

{% assign articles = site.articles | order: 'last_published_at DESC' %}

order

next_to

指定オブジェクトのRelationオブジェクト内における次のオブジェクトを取得します。（現在は記事オブジェクトのみ対応しています）

例）記事詳細ページでカテゴリ内公開日時降順での1つ古い記事へのリンク：

{% assign next_article = article.category.articles | next_to: article %}
<a href="{{ next_article.path }}">前の記事</a>

next_to

prev_to

指定オブジェクトのRelationオブジェクト内における前のオブジェクトを取得します。（現在は記事オブジェクトのみ対応しています）

例）記事詳細ページでカテゴリ内公開日時降順で1つ新しい記事へのリンク：

{% assign previous_article = article.category.articles | prev_to: article %}
<a href="{{ previous_article.path }}">次の記事</a>

prev_to

to_array

Relationオブジェクトを明示的に配列に変換します。
200件以上ある場合、200件に切り詰められます。

attribute

記事の拡張項目に登録されている情報を返します。

例）拡張項目「会場」の内容を表示：

{{ article | attribute: "会場" }}

attribute

search_by_attribute

記事のRelationから拡張項目の情報を検索して絞り込みます。

例）拡張項目の完全一致で検索：

{% assign articles = site.articles | search_by_attribute: "会場", "東京都" %}

search_by_attribute

第三引数で検索式を指定できます。

{% assign articles = site.articles | search_by_attribute: "開催日", "2019-01-01", ">= ?" %}

search_by_attribute

order_by_attribute

記事の拡張項目の情報で並び順を変更します。

例）拡張項目の降順で取得：

{% assign articles = site.articles | order_by_attribute: "開催日", "DESC" %}

order_by_attribute

search

記事のRelationからキーワード検索します。

{% assign articles = site.articles | search: request.params["q"] %}

search

例）指定カテゴリの記事一覧:

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

search

例）指定カテゴリかつ、指定タグの記事一覧:

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

search

※キーワードを空白で区切るとAND検索となります。

例）複数カテゴリを除外した記事一覧:

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

search

※以外の検索は、-をつける必要があります。

例）指定カテゴリーかつ、指定拡張項目の記事一覧:

{% assign articles  = site.articles | search: 'category:"カテゴリ名または、カテゴリキー" 拡張項目名:検索ワード %}

search

例）指定拡張項目（テキスト）かつ、指定拡張項目（日付）の記事一覧:

{% assign articles  = site.articles | search: '拡張項目名（テキスト）:検索ワード 拡張項目名（日付）:"2021/03/15" %}

search

検索クエリの詳細についてはこちらをご確認ください。

headings_per_page

表示する目次の情報を取得します。

例）目次表示

{% assign headings = article.items | headings_per_page %}
{% if headings.size > 0 %}
  <div class="toc">
    <h3>目次</h3>
    <ul>
      {% for heading in headings %}
        <li class="lv{{ heading['level'] }}">
          <a href="{{ heading['path'] }}">{{ heading['title'] }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

headings_per_page

例）1ページあたりの件数を明示的に指定している場合（1ページ 15件）:

{% assign headings = article.items | headings_per_page: 15 %}
{% if headings.size > 0 %}
  <div class="toc">
    <h3>目次</h3>
    <ul>
      {% for heading in headings %}
        <li class="lv{{ heading['level'] }}">
          <a href="{{ heading['path'] }}">{{ heading['title'] }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

{% paginate article.items per 15 %}
  {% for item in paginate.collection %}
    ...
  {% endfor %}
{% endpaginate %}

headings_per_page

resize

アスペクト比を維持したまま幅を100pxにする

{{ article.image_original_url | resize: "width:100" }}

resize

アスペクト比を維持したまま高さを100pxにする

{{ article.image_original_url | resize: "height:100" }}

Explain

アスペクト比を維持したまま長辺を100pxにする

{{ article.image_original_url | resize: "size:100" }}

Explain

100x100pxにして長辺を切り取る

{{ article.image_original_url | resize: "width:100, height:100" }}

Explain

▼注意点
画像により変換に失敗した場合はオリジナル画像を返します。
目的のサイズに変換されなくても表示が崩れないように実装してください。

各種オリジナル画像を取得できるようにしました。（article.image_original_url など）
largeでは解像度が足りない場合に、resizeフィルタと組み合わせて利用してください。

WEBサイト構築CMS

Liquid拡張タグ一覧

INDEX

タグ

paginate

cache

collection

file

form

widget

render

フィルタ

format_number

render_markdown

choose_random

shuffle

match

replace_regexp

auto_link

unescape

where

or

find_by

limit

offset

order

next_to

prev_to

to_array

attribute

search_by_attribute

order_by_attribute

search

headings_per_page

resize