Clipkitのキャッシュタグの使い方

＊この記事はclipkitをカスタマイズしたい方に向けての記事です。

キャッシュタグとは

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

引数にはキャッシュキーとしてオブジェクトや文字列を指定します。

またカンマ区切りで複数指定できます。

ClipkitCloudでは10分間CloudFrontでキャッシュしているため、

10分以上のキャッシュできる場所で対応するとサイトが高速化される場合があります。

キャッシュキーについて

cache-keyとは下記の部分のことです。

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

①変数格納済みの場合は、格納された変数の値がキーに設定されます。
下記の場合だと、変数の値がキーとして設定される。

{% assign key = "変数の値" %}
{% cache site, key %}
  〜
{% endcache %}

②ダブルクオーテーションで囲うと文字列として設定されます。
下記の場合だと、keyがキーとして設定される。

{% assign key = "変数の値" %}
{% cache site, "key" %}
  〜
{% endcache %}

max_ttl オプションで最大の有効時間を指定できます。

max_ttlのオプションで最大の有効時間を指定できます。
キャッシュ期限（単位:秒）. 600 = 10分

キャッシュはurlかつパラメータごとに、設定される。

①トップページ.liquid

url = https://sample.com/
template = トップページ

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

②カテゴリーA.liquid

url = https://sample.com/カテゴリ-A
template = カテゴリーページ

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

③カテゴリーB.liquid

url = https://sample.com/カテゴリ-B
template = カテゴリーページ

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

④カテゴリーBにパラメータ.liquid

url = https://sample.com/カテゴリ-BA?page=2
template = カテゴリーページ

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

上記は全て別々の、キャッシュとして設定されてます。
③と④に関してはurlにパラメータがついてるかどうかの違いですが、
この場合は別々のキャッシュが設定されます。

タグのキャッシュ例

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

人気タグの例

tag_sample.liquid

{% 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 %}

ランキングの例

ranking_sample.liquid

 {% cache site, "weekly-popular-articles", max_ttl: 6000 %}
      {% assign articles = site.weekly_popular_articles | limit: 5 %}
      {% for article in articles %}
        <article>
          <a class="image hv" href="{{ article.path }}"><img class="ofi" src="{{ article.image_large_url}}" alt="{{ article.title }}"></a>
          <div class="txt">
            <h3 class="title">
              <a href="{{ article.path }}">{{ article.title }}</a>
            </h3>
            <div class="cat_user">
              <a href="{{ article.category.path }}" class="cat_name">{{ article.category.name }}</a>
              <a class="user_name" href="{{ article.user.path }}">{{ article.user.name }}</a>
            </div>
            <span class="date">{{ article.published_at | date: '%Y年%-m月%-d日' }}</span>
          </div>
        </article>
      {% endfor %}
 {% endcache %}

コメントの例

comment_sample.liquid

{% cache article, "comments", max_ttl: 7200 %}
  <div class="list-group comments">
    {% for comment in article.comments | limit: 5 %}
      <div class="list-group-item comment">
        <p class="list-group-item-heading">
          <span class="sender">{{ comment.sender }}</span>
          <small>{{ comment.created_at | date: '%Y/%-m/%-d %H:%m' }}</small></p>
        <p class="list-group-item-text">{{ comment.body | newline_to_br }}</p>
      </div>
    {% endfor %}
  </div>
  <p class="pull-left">
    {% if article.num_comments > 0 %}
      <small><a href="{{ article.comments_path }}">すべてのコメントを見る ({{ article.num_comments | format_number }})</a></small>
    {% else %}
      <small>コメントはまだありません</small>
    {% endif %}
  </p>
  <p class="text-right">
    <a class="btn btn-sm btn-default" href="{{ article.new_comment_path }}">
      <span class="fa fa-pencil"></span> コメントを書く</a>
  </p>
{% endcache %}