印记中文 - 通过 DocSearch 实现文档搜索

[QC-L]

DocSearch 由 algolia 社区提供，为众多知名项目提供了文档搜索功能。

最近翻看了很多中文文档，发现其中并未包含文档搜索功能，即使包含也是使用的原文档的搜索功能。这样对于广大查阅中文文档的开发者及其不友好，因此，个人对 docsearch 进行了研究。并同时为 Babel，React，Vuefe，webpack 等中文网添加了搜索功能。此篇文章会针对文档添加搜索功能进行详细讲解。

集成 docsearch

docsearch 为文档搜索提供了强有力的支持，因此，使得文档搜索变得非常容易。以下是官方在 github 中对该项目的描述:

Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free.

具体集成步骤如下:

• 第一步: 在 docsearch 上提交表格信息，其中包括 Website 和 E-mail 两部分
  
  

• 第二步: 等待官方回复邮件，回复的邮件中会询问你是否是 Website 的维护者，因为可能需要你添加部分 js 代码和 css 样式。回复时间大约在半天到一天左右，具体要看你申请的时间(毕竟有时差)

  官方回复基本如下:

  Thank you for your interest in Algolia DocSearch! We would love to help your project with the search but we'll need to inject a small JavaScript snippet in the page: are you able to do that? Are you a maintainer of the website?

  只要回复官方，说你是维护者即可。

• 第三步: 申请成功后，大约一天左右，官方会将你所需要的 API Key 及你所需以邮件的形式通知你，按照步骤集成即可。
  
  js 部分代码如下:

  <!-- at the end of the HEAD -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
  <!-- at the end of the BODY -->
  <script type="text/javascript" 
  src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
  <script type="text/javascript"> docsearch({
        apiKey: 'xxxx',
        indexName: 'xxxxx',
        inputSelector: '### REPLACE ME ####',
        debug: false // Set debug to true if you want to inspect the dropdown
  });
  </script>
  

• 第四步: 大功告成，测试即可。

整个过程下来大约在两天左右，其中有一天是他们的服务器在对你网站的文档进行爬取操作。并且该爬取操作会每隔 24 小时进行一次。

总结

添加文档搜索功能，是为了更好的服务大家。使得大家有更好的中文文档体验，后续我们还会为大家提供更多更好的服务。欢迎更多关注我们的小伙伴参与进来，还有更多的文档需要我们去搞定。

印记中文希望有更多好的项目进驻，无论是前端、后台、客户端、AI等等，我们尊崇谁推动、谁负责、谁主导的原则，印记中文会作为你强大的服务器资源及工程化流程支持，助你更好地进行技术文档的翻译或者社区的搭建。