静态网页加一个静态的搜索框_在静态网站上搜索-优快云博客

本文探讨了如何在静态网站上添加搜索功能，从Google自定义搜索引擎的限制，到使用JSON文件和Elasticsearch的可行性，最终推荐并详细介绍了如何使用Algolia作为静态网站全文搜索的高效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态网页加一个静态的搜索框

当我将博客从WordPress移至Jekyll时，我遇到了让用户搜索其中内容的问题。我没有考虑太多，因此使用了Google自定义搜索引擎。在这篇文章中，我想回顾一下搜索静态站点的可能选项，并对每个站点进行回顾。

Google自定义搜索引擎

将Google自定义搜索引擎集成到静态网站是一个多步骤的过程：

创建一个搜索引擎项
通过Web界面进行配置

获取集成代码。就像是：

<script>
  (function(){
    varcx='012662830594289748271:sgyljeirh_k';
    vargcse=document.createElement('script');
    gcse.type='text/javascript';
    gcse.async=true;
    gcse.src='https://cse.google.com/cse.js?cx='+cx;
    vars=document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse,s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

嵌入网站

好的方面是，实现过程非常简单。但是，我在GCSE上遇到了一些问题：

最糟糕的是，集成选项非常有限。仅提供一组非常特定的布局。没有CSS定制，只有颜色。
无法配置要索引哪些数据以及如何对其进行索引。 Google是数据的所有者。

我想在首页上进行搜索，并像平常的帖子一样显示结果。是时候检查替代品了。

JSON文件

还有另一个有趣的概念：将内容存储在结构化的JSON文件中，然后对其进行查询。在Jekyll中，至少有一个插件实现了这个想法（即 Jekyll Search ）。

我没有选择此选项，因为此博客包含400多个帖子，超过3个月的文字。尽管我没有对该解决方案进行任何性能测试，但我认为它会很缓慢和/或随着时间的推移无法很好地扩展。

弹性搜索

作为一名后端工程师，我通常对Elastic堆栈非常熟悉，尤其是对ElasticSearch 。 ElasticSearch正是我要搜索的内容：我可以离线索引内容，然后使用网站上JavaScript发送JSON搜索请求。

不幸的是，我发现没有可用的ElasticSearch免费套餐。此外，查看令牌身份验证的工作原理使我确信，它应在服务器应用程序后面使用（不能从Web进行简单访问）。

阿尔及利亚

经过更多搜索后，我找到了Algolia 。

Algolia的工作方式与ElasticSearch相同：预先为文件建立索引，并提供用于搜索的REST API。但是，与后者相比，它被设计用于前端，并提供两种不同的身份验证令牌：一个专用于管理任务（例如索引），另一个用于搜索。

使用Algolia的其他好处包括：

自由

有免费套餐。尽管它非常有限，但它确实存在。而且，如果您正在从事与开源相关的项目，则可以从第二层中受益。

Jekyll插件

自己实现内容的索引编制可能是一项艰巨的任务。通过提供一个Jekyll插件，Algolia可以帮助您避免重新发明轮子。只需几个配置摘要和构建文件中的其他命令，您就可以开始了。

我必须承认我对插件的初次体验远非最佳。我感觉自己像是Beta测试员，也许是。但是，插件背后的开发人员React灵敏，非常有帮助。谢谢蒂姆！现在，该插件非常稳定（我想我在其中发挥了作用，尽管它可能很小）。

突出显示

搜索全文时，在返回的结果中突出显示术语搜索很重要。尽管可以手动完成，但这是一个繁琐的额外步骤，可以轻松地在服务器端进行处理。 Algolia允许通过在结果中搜索词之前和之后插入标签来实现。可以配置这些标签。

之后，只需要应用正确CSS来使视觉突出显示正确即可。

突出显示的搜索字词

建立

设置Algolia是一个多步骤过程：

在Algolia网站上注册
创建一个新的应用程序
在此应用程序的上下文中，创建一个新索引
写下与应用程序相关的API密钥

在您的Gemfile中配置插件gem：

宝石文件

group :jekyll_plugins do
  gem 'jekyll-asciidoc'
  gem 'jekyll-algolia'
end

添加：
```
bundleinstall
```

相应地配置gem：

_config.yml

algolia:
  application_id:<app_name>
  search_only_api_key:<search_only_api_key>
  index_name:<index_name>
  indexing_batch_size:500
  nodes_to_index:'p,blockquote,li,dd'
  extensions_to_index:
    -adoc

设置ALGOLIA_API_KEY环境变量：
```
export ALGOLIA_API_KEY= <admin_api_key>
```
显然，这应该是持续集成管道的一部分。对于此博客，我使用Gitlab CI。
索引内容：
```
jekyll algolia
```
现在应该用一些数据填充索引。让我们实现一些搜索。
Algolia提供了两个客户端库：一个高级库和一个低级库。根据所需的集成级别选择一个配件。

前者对我自己的口味太刻板，我决定去后者。

将以下代码段嵌入到页面中：

<script asyncsrc="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script asyncsrc="https://cdn.jsdelivr.net/npm/ [email protected] /dist/algoliasearchLite.min.js"></script>
<script asyncsrc="https://cdn.jsdelivr.net/npm/ [email protected] /dist/algoliasearch.helper.min.js"></script>

要发送搜索请求，请使用以下命令：

varclient=algoliasearch('{{ site.algolia.application_id }}','{{ algolia.search_only_api_key }}');
varhelper=algoliasearchHelper(client,'{{ site.algolia.index_name }}');
helper.setQuery(value);
helper.search();

结果通过回调返回。有一个回调用于何时返回结果（作为JSON负载），如果发生错误则进行回调：

helper.on('result',content=>{
  // Handle the content and manage DOM accordingly
});

helper.on('error',error=>{
  console.error(`A search error occured: ${error.message}`);
});