Craft CMS に検索フォームをつける

ほんとは他の検索システム的なことを試したいのだけど、まずはデフォルト機能で。

検索フォームを設置する

ドキュメントにあるのをそのまま使うので良さそう。

検索フォーム | Craft 3 ドキュメント
https://docs.craftcms.com/v3/ja/templating/examples/search-form.html
Search Form | Craft 3 Documentation
https://docs.craftcms.com/v3/templating/examples/search-form.html#app

フォーム部分を追加する。

<form class="form-inline my-2 my-lg-0" action="{{ url('search/results') }}">
	<input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="q">
	<button class="btn btn-secondary btn-sm my-2 my-sm-0" type="submit">Search</button>
</form>

my-2 my-lg-0 とかは bootstrap の余白設定なのね。

Spacing · Bootstrap
https://getbootstrap.com/docs/4.1/utilities/spacing/

検索結果ページ

search/results.html を作成する

{% set query = craft.request.getParam('q') %}
{% set entries = craft.entries.search(query).order('score') %}

order の score のところをあとで調べる

{% if entries|length %}
	{% for entry in entries %}
	<div class="post-preview">
	  <a href="{{ entry.url }}">
	    <h2 class="post-title">{{ entry.title }}</h2>
	  </a>
	  <p class="post-meta">Posted on {{ entry.postDate|date('Y/n/j') }} {% set tags = entry.contentTag %}
	      {% if tags|length %}Tag :
	          {% for tag in tags %}
	            <a href="/tag/{{ tag.title }}">{{ tag.title }}</a>
	          {% endfor %}
	      {% endif %}</p>
	</div>
	<hr>
	{% endfor %}
{% else %}
	<p>Your search for “{{ query }}” didn’t return any results.</p>
{% endif %}

あとはいずれpagerも必要になるだろうから実装する。