algolia使用配置教程-为SSG静态站增加algolia搜索功能
要构建SSG静态站点时，一般为了方便增加algolia搜索框，但这里algolia配置使用时用很多的坑，折腾了我好几天，网上没有一个可用的教程。自己弄了几天，终于搞明白里面的道道了，现在分享出来给大家，避免踩坑。
前面注册的就不用了。
比如：用的docusaurus、vitepress构建SSG静态站点，安装algolia依赖的，都会有algolia的设置。此处不讲这些简单的。
先看效果图：
algolia设置步骤
[*]docusaurus、vitepress设置appid、key、抓取配置等
[*]algolia新建app
[*]创建爬虫
[*]设置索引
实操说明
下面以我自构建的一个gulp文档静态站点：https://gulpjs.uihtm.com 为演示，一步步怎么设置完成的。
静态站配置algolia密钥、索引名、appid
本站点是使用docusaurus来构建静态站点的，在docusaurus.config.js配置文件里有一个设置algolia的appId、apiKey、indexName
algolia: {
appId: 'XQC8CUNYC9',
apiKey: '1fe23b551c6d578e296aeb91ef858c2e',
indexName: 'deploy-gulpjs',
contextualSearch: true,
searchParameters: {
facetFilters: ['language:zh-CN']
}
}这里的appId、apiKey、indexName对应的是algolia后台：https://dashboard.algolia.com/ 面板里的。
先在后台创建应用才能得到appid、apikey，
创建应用
选择地域区，随便选一个
创建完点击应用就可以对相应应用设置
apikey在这里：Search API Key
algolia 索引index创建
点击这里的serach就会到index页面，
默认索引里的，records，record size是空的0，点击event data进去，再点Crawler爬取设置
设置爬虫
创建爬虫，爬虫可以创建多个的，其实只需要一个就够了。到时验证域名，点击爬虫名称，进入爬取设置
点击Resume crawling 会自动爬取域名里的网址，爬取前可以设置，爬取的开始域名，最有url数和爬取周期
这里就是爬取完的显示，这是有爬取完成的url数量，url里的记录数，
注意这里的Indices,
[*]这里有个名称为：deploy-gulpjs，的索引名。是填到静态站点配置里的，
[*]索引是可以有多个
[*]如果没设置edtor，爬取出来的索引是随机名，后面可以重命名
[*]注意索引有没有records记录
在爬取过程，有一个deploy-gulpjs.tmp的名称，在爬完后自动消失。
自定义爬虫设置
在这里点击editor,可以设置测试爬取内容等配置。
可以编辑里面的json参数设置爬取。代码里的indexName: "deploy-gulpjs",就是我设置爬取后生成的索引名称，还有一点是站点语言，一般
new Crawler({
appId: "xxxxxx",
indexPrefix: "",
rateLimit: 8,
maxUrls: null,
schedule: "on the 12 day of the month",
startUrls: ["https://gulpjs.uihtm.com"],
renderJavaScript: false,
sitemaps: ["https://gulpjs.uihtm.com/sitemap.xml"],
ignoreCanonicalTo: true,
discoveryPatterns: ["https://gulpjs.uihtm.com/**"],
actions: [
{
indexName: "deploy-gulpjs",
pathsToMatch: ["https://gulpjs.uihtm.com/**"],
recordExtractor: ({ $, helpers }) => {
const lvl0 =
$(
".menu__link.menu__link--sublist.menu__link--active, .navbar__item.navbar__link--active",
)
.last()
.text() || "Documentation";
const records = helpers.docsearch({
recordProps: {
lvl0: {
selectors: "",
defaultValue: "gulpjs",
},
lvl1: ["header h1", "article h1"],
lvl2: "article h2",
lvl3: "article h3",
lvl4: "article h4",
lvl5: "article h5, article td:first-child",
lvl6: "article h6",
content: "article p, article li, article td:last-child",
},
aggregateContent: true,
recordVersion: "v3",
});
// 设置中文
records.forEach((record) => {
record.lang = "zh-CN";
});
return records;
},
},
],
safetyChecks: { beforeIndexPublishing: { maxLostRecordsPercentage: 30 } },
initialIndexSettings: {
deployGulpjs: {
attributesForFaceting: [
"type",
"lang",
"language",
"version",
"docusaurus_tag",
],
attributesToRetrieve: [
"hierarchy",
"content",
"anchor",
"url",
"url_without_anchor",
"type",
],
attributesToHighlight: ["hierarchy", "content"],
attributesToSnippet: ["content:10"],
camelCaseAttributes: ["hierarchy", "content"],
searchableAttributes: [
"unordered(hierarchy.lvl0)",
"unordered(hierarchy.lvl1)",
"unordered(hierarchy.lvl2)",
"unordered(hierarchy.lvl3)",
"unordered(hierarchy.lvl4)",
"unordered(hierarchy.lvl5)",
"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: '',
highlightPostTag: "",
minWordSizefor1Typo: 3,
minWordSizefor2Typos: 7,
allowTyposOnNumericTokens: false,
minProximity: 1,
ignorePlurals: true,
advancedSyntax: true,
attributeCriteriaComputedByMinProximity: true,
removeWordsIfNoResults: "allOptional",
},
},
apiKey: "xxxxxxx",
});看你的静态站点html是设置什么语言，lang="zh-CN",那对应要json参数设置爬取
// 设置中文
records.forEach((record) => {
record.lang = "zh-CN";
});
重点，索引设置
索引设置里的Searchable attributes 、Facets、Language
最后有这样的数据出来就大功告成了。
https://img2024.cnblogs.com/blog/356003/202505/356003-20250527140900000-1539135372.png
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]