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: '<span class="algolia-docsearch-suggestion--highlight">',       highlightPostTag: "</span>",       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

最后有这样的数据出来就大功告成了。