位置：首页>> 网络编程>> JavaScript>> VuePress使用Algolia实现全文搜索

VuePress使用Algolia实现全文搜索

作者：Gaby　　发布时间：2024-04-28 09:29:56　

标签：VuePress,Algolia,全文搜索

引言

Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务。Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。

VuePress 官方文档就有 Algolia 搜索插件，可以直接安装使用，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 授权服务，在网站上添加一些代码，就可以像添加统计代码一样，实现一个全文搜索功能了。

为了给网站再加点灵魂实现一个这样的全文搜索功能，刚好今天有空且申请的Algolia也已通过，官网已经将 AppID 等信息发邮件通知了，那说干就干吧，还得是撸起袖子加油干！

确认眼神

好不好用，那得上图，有图有真相，实实在在的效果出来了，坑还是有的但是帮大家走一下，避免了好些冤枉路，具体我也会在文中加以说明的。

先看导航图

再看搜索图

申请授权

已经确认过眼神👁了，那么这就是你要用的，那怎么用呢，不可能直接网上一搜代码一找就能用的，但凡商业的东西，多少还是会有些限制的。

第一步先申请授权，申请地址：docsearch

打开后填写网站地址、邮箱和仓库地址等信息，然后勾选上下面三项，并提交。之后就静待邮件，一般两三天就都会有回复的。

注意： 如果你没有注册过账号，这里官网会用这个邮箱帮你注册账号，且网站需要是公开可访问的如果你网站不是他们要求的类型的，可以先搭建个文档类型的再进行申请。

如果申请通过，我们就会收到邮件，内容如下：

官方邮箱地址：support@algolia.com

根据文中内容，回复确认你是站长网站的维护者并可以更改代码并简单说明要用 DocSearch 产品即可，之后就会得到官方发送的 AppID 等信息，内容如下：

通过文中的邀请链接，就可以设置密码，然后用你的邮箱登录就可以了。algolia 登录页

实施部署

vuepress 官方有 docsearch 插件相关的文档，☞ 文档传送门，有文档不见得就能不踩坑的一次成功！有些东西还需要特别说明下的。

安装方法:

// 安装
npm i -D @vuepress/plugin-docsearch@next

// 配置 vuepress/docs/.vuepress/config.js
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')

module.exports = {
plugins: [
docsearchPlugin({
// 配置项配置上申请下来的 apiKey、indexName、appId
apiKey: '',
indexName: '',
appId: '',
placeholder: '搜索文档',
translations: {
button: {
buttonText: '搜索文档',
},
}
}),
],
}

注意：安装的插件版本，要同使用的 vuepress 版本保持一致，否则会报错不能用。尤其是早期创建的项目，现在直接按照文档安装最新版本的插件，就可能会存在问题。

就这么简单么，so easy ！当你以为一切顺利万事大吉的时候，然而，很可能你的全文搜索还不可以用。可能一搜还都是找不到结果，那这是为何呢，文章还未结束，配置还在进行，且往下看！

调试爬取

如果你搜任何数据，都显示搜索不到数据，那很可能是爬取的数据有问题，我们登陆 www.algolia.com/ 打开管理后台，点击左侧选项栏里的 Search，查看对应的 index 数据，如果 Browse 这里没有显示数据，那说明爬取的数据可能有问题，导致没有生成对应的 Records：

这个时候要使用官方工具进行调试，调试工具地址,打开调试台，打开 Overview 菜单。如果显示成功爬取，也有 Monitoring Success 的数据，但 Records 为 0，那大概是爬虫提取数据的逻辑有问题，点击左侧选项栏中的 Editor，查看具体的爬虫逻辑：

打开 Editor 菜单，可以看到调试爬虫代码的界面。这里可以根据 vuepress 官方提供的模版，看着调整。

vuepress 官方爬虫配置示例:

主要代码贴出来，具体详细的，大家直接转到 docsearch 插件文档

new Crawler({
rateLimit: 8,
// 这是 Algolia 开始抓取网站的初始地址
// 如果你的网站被分为数个独立部分，你可能需要在此设置多个入口链接
startUrls: ["https://docs.ycsnews.com/"],
renderJavaScript: false,
// 如果你在使用 Sitemap 插件 (如: vuepress-plugin-sitemap2)，你可以提供 Sitemap 链接
sitemaps: ["https://docs.ycsnews.com/sitemap.xml"],
ignoreCanonicalTo: true,
// 这是 Algolia 抓取 URL 的范围没有特殊要求就全站抓取
discoveryPatterns: ["https://docs.ycsnews.com/**"],
// 爬虫执行的计划时间，可根据文档更新频率设置
schedule: "at 11:50 every 1 day",
actions: [
{
// 使用适当的名称为索引命名申请授权的时候就会有的
indexName: "ycsnews", // 默认会填好不是自己的可以修改下
// 索引生效的路径
pathsToMatch: ["https://docs.ycsnews.com/**"],
// 控制 Algolia 如何抓取你的站点
recordExtractor: ({ helpers }) => {
return helpers.docsearch({
// Algolia 初次默认的可能都存在问题，所以这个还是根据 vuepress 官方提供的，或者自己审查元素查找匹配节点进行修改
recordProps: {
lvl1: ".theme-default-content h1",
content:
".theme-default-content .theme-default-content div .theme-default-content p .theme-default-content li",
lvl0: {
selectors: ".sidebar-heading.active",
defaultValue: "Documentation",
},
lvl2: ".theme-default-content h2",
lvl3: ".theme-default-content h3",
lvl4: ".theme-default-content h4",
lvl5: ".theme-default-content h5",
lvl6: ".theme-default-content h6",
lang: "",
tags: {
defaultValue: ["v1"],
},
},
indexHeadings: true,
aggregateContent: true,
});
},
},
],
// 下面的配置基本不用修改大致看下即可
initialIndexSettings: {
ycsnews: {
attributesForFaceting: ["type", "lang", "language", "version"],
attributesToRetrieve: [
"hierarchy",
"content",
"anchor",
"url",
"url_without_anchor",
"type",
],
attributesToHighlight: ["hierarchy", "hierarchy_camel", "content"],
attributesToSnippet: ["content:10"],
camelCaseAttributes: ["hierarchy", "hierarchy_radio", "content"],
searchableAttributes: [
"unordered(hierarchy_radio_camel.lvl0)",
"unordered(hierarchy_radio.lvl0)",
"unordered(hierarchy_radio_camel.lvl1)",
"unordered(hierarchy_radio.lvl1)",
"unordered(hierarchy_radio_camel.lvl2)",
"unordered(hierarchy_radio.lvl2)",
"unordered(hierarchy_radio_camel.lvl3)",
"unordered(hierarchy_radio.lvl3)",
"unordered(hierarchy_radio_camel.lvl4)",
"unordered(hierarchy_radio.lvl4)",
"unordered(hierarchy_radio_camel.lvl5)",
"unordered(hierarchy_radio.lvl5)",
"unordered(hierarchy_radio_camel.lvl6)",
"unordered(hierarchy_radio.lvl6)",
"unordered(hierarchy_camel.lvl0)",
"unordered(hierarchy.lvl0)",
"unordered(hierarchy_camel.lvl1)",
"unordered(hierarchy.lvl1)",
"unordered(hierarchy_camel.lvl2)",
"unordered(hierarchy.lvl2)",
"unordered(hierarchy_camel.lvl3)",
"unordered(hierarchy.lvl3)",
"unordered(hierarchy_camel.lvl4)",
"unordered(hierarchy.lvl4)",
"unordered(hierarchy_camel.lvl5)",
"unordered(hierarchy.lvl5)",
"unordered(hierarchy_camel.lvl6)",
"unordered(hierarchy.lvl6)",
"content",
],
distinct: true,
attributeForDistinct: "url",
customRanking: [
"desc(weight.pageRank)",
"desc(weight.level)",
"asc(weight.position)",
],
ranking: [
"words",
"filters",
"typo",
"attribute",
"proximity",
"exact",
"custom",
],
highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
highlightPostTag: "</span>",
minWordSizefor1Typo: 3,
minWordSizefor2Typos: 7,
allowTyposOnNumericTokens: false,
minProximity: 1,
ignorePlurals: true,
advancedSyntax: true,
attributeCriteriaComputedByMinProximity: true,
removeWordsIfNoResults: "allOptional",
},
},
appId: "",// 默认会填好不是自己的可以修改下
apiKey: "", // 默认会填好不是自己的可以修改下
});