検索ページ（/search）のデザインを管理画面から変更できるようにする

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

検索ページの作り方

マイページ　＞　サイト管理　＞　ページ　　＞　追加を選択　＞　編集モードで新規にページを作成します。 パスに「search」を指定することで、オリジナルの検索結果ページにすることが可能です。

定義方法

下記のコードをカスタマイズすることで、独自のデザインを適用できます。

search.html

{% assign articles = site.articles | order: "last_published_at DESC" | search: request.params["q"] %}
{% assign active_class = 'active' %}

{% if request.params["days"] == "all" %}
    {% assign articles = articles %}
    {% assign active_class_all = 'active' %}
{% elsif request.params["days"] == "d" %}
    {% assign articles = articles | where: "last_published_at > now() - interval '1 day'" %}
    {% assign active_class_day = 'active' %}
{% elsif request.params["days"] == "w" %}
    {% assign articles = articles | where: "last_published_at > now() - interval '1 week'" %}
    {% assign active_class_week = 'active' %}
{% elsif request.params["days"] == "m" %}
    {% assign articles = articles | where: "last_published_at > now() - interval '1 month'" %}
    {% assign active_class_month = 'active' %}
{% elsif request.params["days"] == "y" %}
    {% assign articles = articles | where: "last_published_at > now() - interval '1 year'" %}
    {% assign active_class_year = 'active' %}
{% endif %}




<div class="content container search-page" >
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-sm-12">
          <div class="content">
              <div class="page-header">
                <div class="pull-right"></div>
                <h1>
                  <span class="page-title">{{ request.params["q"] | escape }} の検索結果</span>
                </h1>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="panel panel-default search-option">
                    <div class="panel-body">
                      <h4>並び順</h4>
                      <ul class="list-unstyled">
                        <li class="{{ active_class }}">
                        {% assign keyword = request.params["q"] | escape %}
                          <a href="{{ "/search?q=" | append: keyword | append: "&amp;sort=t" }}">更新日時順</a>
                        </li>
                      </ul>
                      <h4>期間</h4>
                      <ul class="list-unstyled">
                        <li class="{{ active_class_all }}">
                          <a href="{{ "/search?days=all&amp;q=" | append: keyword }}">期間指定なし</a>
                        </li>
                        <li class="{{ active_class_day }}">
                          <a href="{{ "/search?days=d&amp;q=" | append: keyword }}">1日以内</a>
                        </li>
                        <li class="{{ active_class_week }}">
                          <a href="{{ "/search?days=w&amp;q=" | append: keyword }}">1週間以内</a>
                        </li>
                        <li class="{{ active_class_month }}">
                          <a href="{{ "/search?days=m&amp;q=" | append: keyword }}">1ヶ月以内</a>
                        </li>
                        <li class="{{ active_class_year }}">
                          <a href="{{ "/search?days=y&amp;q=" | append: keyword }}">1年以内</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                  <div class="col-sm-8">
                    <div class="list-group articles-lg">
                    {% paginate articles per 15 %}
                     {% for article in paginate.collection %}
                      <div class="list-group-item clearfix article-{{ item.permalink }}">
                        <a href="{{ article.path }}">
                          <div class="pull-left">
                            <img src="{{ article.image_thumbnail_url }}" alt="{{ article.title }}">
                          </div>
                          <h4 class="list-group-item-heading">
                            {{ article.title }}
                          </h4>
                        </a>

                        <div class="list-group-item-text">
                          <div class="hidden-xs">{{ article.description }}</div>
                          <div class="curator">

                            {% if article.category.name.size > 0 %}
                              <span class="fa fa-folder"></span>
                              <a href="{{ article.category.path }}">{{ article.category.name }}</a>
                            {% endif %}
                            <span class="fa fa-user"></span>
                            <a href="{{ article.user.path }}">{{ article.user.name }}</a>
                          </div>
                        </div>
                      </div>

                     {% endfor %}
                    {% endpaginate %}
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
</div>

コード解説

下記のコードで記事検索機能を実装できます。
{% assign articles = site.articles | search: request.params["q"] %}

【注意】XSSを防ぐために、入力値を出力する際は必ずHTMLエスケープしてください。
{{ request.params["q"] | escape }}

記事更新日のソート機能の解説は下記のページを参照してください。
https://qiita.com/banrih/items/6ddf140857ae84ec86ed