条件抽出・検索サンプルコード
Clipkitで構築するWEBサイトのフロントエンドをコーディングするためのLiquidテンプレート言語のリファレンスです。記事一覧ページで使われる条件抽出、検索ページカスタマイズ時に利用できるコードのサンプルを記載しています。
Clipkitで構築するWEBサイトのフロントエンドをコーディングするためのLiquidテンプレート言語のリファレンスです。記事一覧ページで使われる条件抽出、検索ページカスタマイズ時に利用できるコードのサンプルを記載しています。
Clipkitの記事検索の仕組み
Clipkitには「標準検索」と「全文検索」の2種類の検索機能が存在します。特に指定がない場合は、標準検索が適用されます。
標準検索は、記事のタイトル・概要文・タグを対象にして検索を行い、該当する記事を新着順で表示します。タイトルと概要文は部分一致、キーワードは完全一致で判定します。記事に添付されたファイルに記載された文面は検索対象外です。記事が公開状態になると即時に検索対象となります。
全文検索は記事全体をインデックス化した上で、以下の項目に優先度（重み付け）を設定し、検索結果を関連度順で表示します。
- 見出し 5
- Permalink ID 5
- タグ 4
- 見出しアイテム 4
- カテゴリ名 3
- 記事概要 3
- 拡張項目 3
- ライター名 2
- 記事本文 1
全文検索では
・PDFファイル内のテキストも検索対象になります。
・記事を公開後、インデックス化の処理に時間が掛かるため即時には検索対象とならない場合があります。
・検索結果は最大1,000件です。
※全文検索を利用したいときはカスタマーサポートまでご相談ください。
キーワード入力欄
サンプルコード
<div>
<form action="/search">
<div>
<input type="text" placeholder="SEARCH" name="q" value="">
<button type="submit">
<span>検索</span>
</button>
</div>
</form>
</div>出力イメージ
検索結果一覧
サンプルコード
{% assign words = request.params["q"] | escape_once %}<br>
{% assign articles = site.articles | search: words %}<br>
{% assign articles_size = articles | size %}<br>
<div><br>
<div"><br>
<h1>{{ words }} の検索結果：{{ articles_size }} 件</h1><br>
</div><br>
{% if articles_size > 0 %}<br>
{% paginate articles per 10 %}<br>
<div><br>
{% for article in paginate.collection %}<br>
<article><br>
<a href="{{ article.path }}"><br>
<figure style="background-image: url({{ article.image_large_url }});"></figure><br>
{% assign new_icon_time = 'now' | date: '%s' | minus:259200 | plus:0 %}<br>
{% assign time_published = article.published_at | date: '%s' | plus:0 %}<br>
{% if time_published > new_icon_time %}<br>
<i>NEW</i><br>
{% endif %}<br>
<div><br>
<h2><span>{{ article.title }}</span></h2><br>
<div><br>
<p>{{ article.category.name }}</p><br>
<p>{{ article.published_at | date: '%Y.%m.%d' }}</p><br>
</div><br>
</div><br>
</a><br>
</article><br>
{% endfor %}<br>
</div><br>
<div class="theme-pagination"><br>
{% endpaginate %}<br>
</div><br>
{% else %}<br>
<div>お探しの記事は見つかりませんでした</div><br>
{% endif %}<br>
</div>出力イメージ
一般的な条件抽出（検索）
キーワードで検索する
{% comment %}
キーワード検索では、複数のキーワードが空白区切りで検索された時も対応しています。
ex） 沖縄 旅行記 → https://example.com/search?q=沖縄%20旅行記
{% endcomment %}
{% assign keywords = request.params["q"] | escape_once %}
{% assign articles = site.articles | search: keywords %}
{% comment %}
articlesには「沖縄」と「旅行記」を含む記事一覧が抽出されます。
{% endcomment %}タグで検索する
{% comment %}
タグ検索
備考：ルートパスから /tags/ の後にタグ名の文字列を追加する事で該当のタグ一覧ページになります。
ex） https://example.com/tags/旅行記
{% endcomment %}
{% assign articles = site.articles | search: 'tag:"旅行記"' %}{% comment %}
階層構造の子タグ一覧の取得
ex）「旅行記」タグの子階層にあたる「沖縄」タグがついた記事一覧を抽出
{% endcomment %}
{% assign articles = site.articles | search: 'tag:"旅行記/沖縄"' %}{% comment %}
複数のタグのAND検索
{% endcomment %}
{% assign articles = site.articles | search: 'tag:"旅行記/沖縄" tag:"猫"' %}{% comment %}
特定タグのついた記事を除外した記事一覧を取得する
{% endcomment %}
{% assign articles = site.articles | search: '-tag:"旅行記/沖縄"' %}{% comment %}
タグとキーワードでAND検索
{% endcomment %}
{% assign articles = site.articles | search: 'tag:"旅行記/沖縄" "阿嘉島"' %}特定のカテゴリーに属する記事を抽出する
カテゴリーテンプレートでは
{% assign articles = site.articles | search: 'category:"カテゴリー名"' %}
ではなく
{% assign articles = category.articles %}
を使用する事で該当のカテゴリー記事一覧が取得できます。
{% comment %}
階層構造のカテゴリー一覧の取得
ex）「旅行」カテゴリーの子カテゴリー「北海道」の記事一覧を取得
{% endcomment %}
{% assign articles = site.articles | search: 'category:"旅行/北海道"' %}{% comment %}
特定カテゴリーの除外検索
ex）「旅行」カテゴリーの記事一覧を取得する。ただし子カテゴリー「海外」の記事は除く。
{% endcomment %}
{% assign articles = site.articles | search: 'category:"旅行" -category:"旅行/海外"' %}{% comment %}
複数カテゴリーの除外検索
ex）「旅行」カテゴリーの記事一覧を取得する。ただし子カテゴリー「海外」「宇宙」の記事は除く。
{% endcomment %}
{% assign articles = site.articles | search: 'category:"旅行" -category:"旅行/海外" -category:"旅行/宇宙"' %}記事種別で検索する
{% comment %}
記事種類「1:おすすめ」がついた記事を最新2件抽出する
{% endcomment %}
{% assign articles = site.articles | search: 'article_kind:"1"' | limit: 2 %}{% comment %}
記事種類「2:ピックアップ」がついた記事は除外して記事一覧を取得する
{% endcomment %}
{% assign articles = site.articles | search: '-article_kind:"2"' %}拡張項目で検索する
{% comment %}
拡張項目「地域」（Name：place）が「沖縄諸島」と一致する記事を取得する
{% endcomment %}
{% assign articles = site.articles | search_by_attribute: 'place', '沖縄諸島', '= ?' %}{% comment %}
カテゴリーと拡張項目で検索する
ex）「旅行」カテゴリーの子カテゴリー「沖縄」の記事の中から拡張項目「地域」が「沖縄諸島」の記事を取得する
{% endcomment %}
{% assign articles = site.articles | search: 'category:"旅行/沖縄" place:沖縄諸島' %}エスケープ処理
クロスサイトスクリプティング対策として、ユーザー入力を表示する場合はエスケープ処理が必要です。Liquidのescape_onceフィルタを利用してください。
<!-- 例：https://example.com/search?q=東京 -->
{% assign keyword = request.params["q"] | escape_once %}
{% assign articles = site.articles | search: keyword %}
{% assign articles_size = articles | size %}
{% if articles_size > 0 %}
<!-- エスケープ済みの変数はそのまま表示可能 -->
<p>検索ワード：{{ keyword }} {{ articles_size }}件</p>
{% for article in articles %}
<!-- 記事出力処理 -->
{% endfor %}
{% else %}
<!-- 直接出力する場合も必ずエスケープ -->
<p>検索ワード：{{ request.params["q"] | escape_once }}は0件でした</p>
{% endif %}
Clipkitバージョン14.18.0（2025年10月29日反映）以降に作成したテナントは自動的にエスケープされる仕様に変更されました。エスケープを解除する場合はrawフィルタを利用してください。
