テーマ

一つのテーマは WEB サイトのデザインに必要なテンプレート、画像ファイル、CSSやJavaScriptのファイル等から構成されます。
基本的には一つのテーマを作成して適用することで WEB サイトの構築が完成しますが、複数のテーマを作成して一部のページに適用することも可能です。
例えば、LP のページはまったく別なデザインにしたいときに便利です。

テンプレート

HTML とテンプレートタグを記述するための機能で、Clipkit のサイト管理画面上で編集を行うことができます。
編集後保存をすることで WEB サイトに即時反映されますので、公開中のサイトを改修するときはテスト環境で検証してから本番環境へ反映することを想定しています。
尚、変更履歴が記録されるようになっていますのでご安心ください。

既定テンプレート

デフォルトで備わっているテンプレートです。

  {% assign items = article.items %}
  {% for item in items %}
    {{ item.render }}
  {% endfor %}
        

記事アイテムテンプレート

ここでは例として見出し用の記事アイテムを紹介します。記事アイテムでは入力された値に応じて出力するHTMLを切り替えることができます。

下記の例では、記事アイテムのタグ設定値 item.tag を参照して見出しレベルを切り替えています。
item.tag が「h3」の場合は <h3>、「h4」の場合は <h4>、それ以外の場合は <h2> を出力します。
見出しテキストにはタイトル項目 item.title を利用しています。

    <div class="item-heading">
      {% case item.tag %}
      {% when 'h3' %}
        <div class="item-heading__h3">
          <h3>{{ item.title | newline_to_br }}</h3>
        </div>
      {% when 'h4' %}
        <div class="item-heading__h4">
          <h4>{{ item.title | newline_to_br }}</h4>
        </div>
      {% else %}
        <div class="item-heading__h2">
          <h2>{{ item.title | newline_to_br }}</h2>
        </div>
      {% endcase %}
    </div>
    

このように記事アイテムテンプレートでは、記事アイテムの各項目の値を利用して出力するHTMLやデザインを動的に変更できます。

パーシャルテンプレート

各ページで共通して表示するセクションの要素を記述するためのテンプレートです。

ヘッダー・フッター・グローバルナビ、サイドバー、記事カード、パンくず、ページネーション等です。
これにより同じマークアップを複数のページに繰り返しコーディングを行うといった作業が軽減でき、サイト改修などのメンテナンス性もよくなります。

パーシャルテンプレートを適用したい箇所に {% render "パーシャル名" %} を記述することで展開されます。

詳細な記述方法は Liquid リファレンスの render タグを参照してください。

ファイル

テーマに紐づく CSS、JavaScript、画像、フォントなど、サイトのデザインを形成するための静的アセットファイルを格納する公開ストレージです。
アップロードしたファイルはテンプレートにfileタグを記述して利用します。
（例）originalという名称のテーマの領域にアップロードしたファイルcss/style.cssをheadタグ内で読み込む場合
<link rel="stylesheet" media="screen" href="{% file '/theme/original/css/style.css' %}">

robots.txtなどのテーマに紐付かないファイルは領域「すべて」にアップロードすればサイトURL直下でアクセスできます。
https://example.com/robots.txt