目次
どうやって検索をつけるか
Hugoは静的なページを生成するので、ダイナミックに変化する検索のような機能をつけることは工夫なしにはできない。 逆に、ダイナミックに変化しないもの、コンテンツからわかるものはできます。例えばカテゴリ一覧とかタグ一覧とか。
検索をつけるにはいくつかの方法が考えられる。例えば…
- Elasticsearchのような検索エンジンと、そのAPIを用意する。
- 自前の検索を諦める。
- JSに書き出してブラウザ上で検索する。
検索エンジンとAPIを用意する
ElasticsearchとかSolrとかそういう。
- Free and Open Search: The Creators of Elasticsearch, ELK & Kibana | Elastic
- Welcome to Apache Solr - Apache Solr
作っているWebサイトがどの程度の規模になるかにもよって、大抵の場合はオーバーキルというか、面倒。
検索エンジンの運用、メンテも必要になって、例えば、コンテンツをどうやって更新するか、APIの運用したり。なので、プロダクションでがっつり運用！の候補にはあんまりならないんじゃないだろうか…？
自前の検索を諦める
例えばGoogleカスタム検索とか、Algoliaとかそういった検索APIをホストするものを使ったりするのが候補になりそう。
特に Algolia は大きなフレームワークなんかのドキュメントでもよく見かけるような気がするけれど、これはオープンソースサポートするよ！というところからかな。
JSに書き出してブラウザ上で検索
- Hugoで全記事の情報をJavascriptに書き出す
- Javascript上でシュッと検索する
という、それはそう、みたいな実装でできる。
欠点としては、あいまいな検索が弱く、全記事だすとデータ量がちょっと大きくなる。が、ブラウザキャッシュも効かせられるので、そんなに気にしなくてもいいかもしれない。大きなサイトならデータを絞ったり、Javascriptを分割したりすると良いかもしれない。 例えば、頻繁に記事がかかれるのであれば、年ごとのデータファイルを用意して、順番にフェッチして検索していく、とか。
このブログでは500kbくらいとそんなに大きくなかったので、まあいいか、とそのままにしている。
こんな感じで記事データを書き出していて、
{{ define "escape" }}
{{- .
| replaceRE "[。、]" " "
| replaceRE "[[:space:]]+" " "
| replaceRE "[[:space:]]+,|,[[:space:]]" ","
| replaceRE ",,+" ","
}}
{{ end }}
{{ define "showBody" }}
{{- $tags := "" }}
{{- range .Params.Tags }}
{{- $tags = printf "%s %s" $tags .}}
{{- end }}
{{- template "escape" (printf "%s %s %s" .Title $tags .Plain) }}
{{ end }}
{{ define "showTags" }}
[
{{- range .Params.Tags }}
{
url: {{- relURL (printf "tags/%s/" (. | urlize)) }},
name: {{- template "escape" . }},
},
{{- end }}
]
{{ end }}
{{ define "scripts" }}
const data = [
{{- range $index, $page := .Site.Pages }}
{{- if eq $page.Type "archives" }}
{{- if ne $page.Draft }}
{{- if findRE "archives/\\d+/\\d+/.+" $page.Permalink }}
{
url: {{- $page.Permalink }},
title: {{- $page.Title }},
date: {{- $page.Date.Format "2006/01/02" }},
tags: {{- template "showTags" . }},
body: {{- template "showBody" . }},
},
{{- end }}
{{- end }}
{{- end }}
{{- end }}
];
{{ end }}
こんな感じで、愚直な実装をしている。
const result = [];
data.forEach((d) => {
if (d.body.match(word) === null) {
return;
}
result.push({
data: d,
point: d.body.split(word).length,
})
});
result.sort((a, b) => { return b.point - a.point; });
ここでpointを計算するロジックを調整すると、いい感じになりそうな雰囲気がある。