HUGOに全文検索機能を実装する方法

{{ define "escape" }}
  {{- trim (replace . "\n" " ") " " | replaceRE " +" " " | jsonify -}}
{{ end }}

var data = [
{{- range $index, $page := where .Site.Pages "Params.type" "post" }}
  {
    url: {{ $page.Permalink | jsonify }},
    title: {{ $page.Title | jsonify }},
    date: {{ $page.Date | jsonify }},
    body: {{ template "escape" (printf "%s %s" $page.Title $page.Plain) }}
  },
{{- end }}
];

+++
type = "js"
url = "index.js"
+++

{{ define "main" }}

<div class="entry-content">
    <p><h1 id="ブログ インクリメンタルサーチ">ブログ インクリメンタルサーチ</h1>
      <div class="ulist">
        <ul>
          <li>複数キーワードで検索したい場合は、右のGoogle検索をお使い下さい。</li>
          <li>キーワードにメタ文字を含む場合、エスケープが必要です。</li>
        </ul>
      </div>
  
      <script src="/index.js"></script>
  
      <div id="searchbox">
        <input onkeyup="search(this.value)" size="15" autocomplete="off" autofocus placeholder="検索ワードを入力" />
        <span id="inputWord"></span> <span id="resultCount"></span>
        <div id="result"></div>
      </div>
  
      <script>
        function search(query) {
          var result = searchData(query);
          var html = createHtml(result);
          showResult(html);
          showResultCount(result.length, data.length);
        }
  
        function searchData(query) {
          var result = [];
  
          query = query.trim();
          if (query.length < 1) {
            return result;
          }
          var re = new RegExp(query, 'i');
          for (var i = 0; i < data.length; ++i) {
            var pos = data[i].body.search(re);
            if (pos != -1) {
              result.push([i, pos, pos + query.length]);
            }
          }
          return result;
        }
  
        function createHtml(result) {
          var htmls = [];
          for (var i = 0; i < result.length; ++i) {
            var dataIndex = result[i][0];
            var startPos = result[i][1];
            var endPos = result[i][2];
            var url = data[dataIndex].url;
            var title = data[dataIndex].title;
            var body = data[dataIndex].body;
            htmls.push(createEntry(url, title, body, startPos, endPos));
          }
          return htmls.join('');
        }
  
        function createEntry(url, title, body, startPos, endPos) {
          return '<div class="item">' +
            '<a class="item_title" href="' + url + '">' + title + '</a>' +
            '<div class="item_excerpt">' + excerpt(body, startPos, endPos) + '</div>' +
            '</div>';
        }
  
        function excerpt(body, startPos, endPos) {
          return [
            body.substring(startPos - 30, startPos),
            '<b>', body.substring(startPos, endPos), '</b>',
            body.substring(endPos, endPos + 200)
          ].join('');
        }
  
        function showResult(html) {
          var el = document.getElementById('result');
          el.innerHTML = html;
        }
  
        function showResultCount(count, total) {
          var el = document.getElementById('resultCount');
          el.innerHTML = '<b>' + count + '</b> 件見つかりました（' + total + '件中）';
        }
        </script>
  
      <noscript><p class="notice">注意: この検索機能は JavaScript を使用しています。</p></noscript>
    </p>
  </div>

  {{ end }}

type = "search"
url = "search"
title = "サイト内検索"

<!-- 取得データの部分 -->
{{- range $index, $page := where .Site.Pages "Params.type" "post" }}
  {
    url: {{ $page.Permalink | jsonify }},
    title: {{ $page.Title | jsonify }},
    image: {{ $page.Params.image | jsonify }},
    lastmod: {{ $page.Lastmod.Format "2006-01-02" | jsonify }},
    date: {{ $page.Date.Format "2006-01-02" | jsonify }},
    body: {{ template "escape" (printf "%s %s" $page.Title $page.Plain) }}
  },
{{- end }}

<!-- 表示項目の部分 -->
function createEntry(url, title, image, date, lastmod,body, startPos, endPos) {
return '<div class="search-item-wrap">' +'<a href="' + url + '">' + '<div class="search-item-head">' + '<div class="search-item-image">' + '<img src="' + image + '">' + '</div>' + '<div class="search-item-info">' + '<span class="search-item-title">'+ title + '</span>' + '<span class="search-item-date">' + '<br>' + '更新日:' + lastmod + ' 公開日:' + date + '</a>' + '</div>' + '</div>' + '<div class="search-item-excerpt">' + '<p class="search-item-text">' + excerpt(body, startPos, endPos) + '</p>' +'</div>'+'</div>';
}

#searchbox {
  margin: 1rem;
}

#searchbox>input {
  color: #444;
  font-size: 1.2rem;
  font-weight: bolder;
  border: solid;
  border-color: #ccc;
  border-width: 0.1rem;
  padding: 0.5rem;
}

input::-webkit-input-placeholder {
  color: #777;
}

#result {
  margin: 1rem;
}

.search-item-wrap{
  border-radius: 1rem;
  box-shadow: 3px 3px 7px #a7a7a7, -3px -3px 7px #f7f7f7;
  margin-bottom: 1rem;
}

.search-item-wrap a{
  text-decoration: none;
  color: #444;
}

.search-item-head{
  display: flex;
  flex: wrap;
}

.search-item-image{
  max-width: 50%;
}

.search-item-info{
  min-width: 40%;
  padding: 0.5rem;
}

.search-item-title{
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
}

.search-item-date{
  font-size: 1.2rem;
}

.search-item-text{
  font-size: 1.4rem;
  padding: 0 0.5rem;
  margin: 0;
  line-height: 1.4;
}

.search-item-text b{
  font-weight: bold;
  background: linear-gradient(transparent 50%, #ff6 50%);
}

@media screen and (min-width:900px) {
  .search-item-title{
    font-size: 1.8rem;
    font-weight: bold;
  }

  .search-item-date{
    font-size: 1.4rem;
  }
}