博客搭建 — Algolia DocSearch 实现站点搜索

关于 Algolia DocSearch

Algolia DocSearch 帮助您在站点和应用程序上实现高效、灵活和有见地的搜索。为您的用户提供快速而丰富的搜索体验。

DocSearch 分为爬虫和前端库

• 爬网由 Algolia 爬虫处理，默认情况下计划每周运行一次，然后您可以自己触发新的爬网并直接从爬虫界面监控它们，该界面还提供了一个实时编辑器，您可以在其中维护您的配置。
• 前端库建立在 Algolia 自动完成之上，并通过其模式提供身临其境的搜索体验。

DocSearch 会定期爬取你网站的内容并分析，并对标题和内容建立索引，用户输入关键字查询，匹配站点内容然后将结果返回给客户端。

DocSearch 提供了一套精美的样式，以及完善的 api，只需要少量的代码就能实现一个强大的搜索功能。

快速开始

1、安装 Docsearch 的 js 库

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

2、封装一个 Search 组件

<div id="docsearch"></div>

import { onMounted } from "vue";

import docsearch from "@docsearch/js";
import "@docsearch/css";

onMounted(() => {
  docsearch({
    container: "#docsearch",
    appId: "YOUR_APP_ID",
    indexName: "YOUR_INDEX_NAME",
    apiKey: "YOUR_SEARCH_API_KEY",
  });
});

3、在页面上使用 Search 组件，已经能够看到基本的样式

申请 DocSearch 服务

1. 前往 DocSearch Apply，填写网站地址，邮箱，仓库地址，提交申请。
2. 提交申请之后会收到一封邮件，表示他们已经收到申请并很快会回复！
3. 等几分钟之后就会收到处理完成的邮件，里面有我们需要的 appId, apiKey, indexName，将它们填入组件中。
4. 前往 爬虫后台, 如果 Records 有数量，说明已经爬取成功了！
   如果没有也可以点击 Editor，进入查看自己的域名有没有填写正确。

最终效果