hugo 使用 flexsearch 写一个搜索模板

很高兴为您提供搜索模板，使用 Hugo 和 FlexSearch。

首先，在 Hugo 中创建一个搜索页面。在您的 Hugo 站点中，创建一个名为 search.html 的新页面，并在该页面中添加以下代码：

{{ define "main" }}
  <div class="container">
    <form class="form-inline my-2 my-lg-0" id="search-form">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="search-input">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <div class="search-results"></div>
  </div>
{{ end }}

这将创建一个简单的搜索表单和一个用于显示搜索结果的容器。

接下来，将 FlexSearch 添加到您的站点中。您可以使用 FlexSearch 的 CDN，或将其下载到您的站点中。在这里，我们将使用 CDN。在 <head> 中添加以下代码：

<script src="https://unpkg.com/flexsearch/dist/flexsearch.min.js"></script>

然后，在 search.html 页面的底部，添加以下 JavaScript 代码：

<script>
  var index = new FlexSearch({
    encode: 'icase',
    tokenize: 'full',
    threshold: 0,
    resolution: 3,
    depth: 3,
    suggest: true,
    cache: true,
    doc: {
      id: 'id',
      field: [
        'title',
        'content'
      ]
    }
  });

  {{ range where .Site.RegularPages "Type" "in" site.Params.mainSections }}
    index.add({
      id: {{ .UniqueID }},
      title: {{ .Title | jsonify }},
      content: {{ .Plain | jsonify }}
    });
  {{ end }}

  var searchForm = document.getElementById('search-form');
  var searchInput = document.getElementById('search-input');
  var searchResults = document.querySelector('.search-results');

  searchForm.addEventListener('submit', function(e) {
    e.preventDefault();
    var query = searchInput.value;
    var results = index.search(query, 10);
    var output = '';
    if (results.length > 0) {
      results.forEach(function(item) {
        output += '<div><h3><a href="' + item.ref + '">' + item.doc.title + '</a></h3><p>' + item.doc.content + '</p></div>';
      });
    } else {
      output += '<p>No results found.</p>';
    }
    searchResults.innerHTML = output;
  });
</script>

这将：

创建一个新的 FlexSearch 索引。
添加站点的所有页面到索引中。
监听表单提交事件，并使用索引搜索查询，返回最多 10 个结果。
将结果呈现到页面上。

您可以根据需要更改 FlexSearch 的选项，如 depth 和 resolution，以获得更好的搜索结果。您还可以更改搜索结果的呈现方式，以使其适合您的站点设计。

希望这个搜索模板对您有所帮助！