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

1. algolia: {
2.       appId: 'XQC8CUNYC9',
3.       apiKey: '1fe23b551c6d578e296aeb91ef858c2e',
4.       indexName: 'deploy-gulpjs',
5.       contextualSearch: true,
6.       searchParameters: {
7.         facetFilters: ['language:zh-CN']
8.       }
9.     }

复制代码

这里的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",就是我设置爬取后生成的索引名称，还有一点是站点语言，一般

1. new Crawler({
2.   appId: "xxxxxx",
3.   indexPrefix: "",
4.   rateLimit: 8,
5.   maxUrls: null,
6.   schedule: "on the 12 day of the month",
7.   startUrls: ["https://gulpjs.uihtm.com"],
8.   renderJavaScript: false,
9.   sitemaps: ["https://gulpjs.uihtm.com/sitemap.xml"],
10.   ignoreCanonicalTo: true,
11.   discoveryPatterns: ["https://gulpjs.uihtm.com/**"],
12.   actions: [
13.     {
14.       indexName: "deploy-gulpjs",
15.       pathsToMatch: ["https://gulpjs.uihtm.com/**"],
16.       recordExtractor: ({ $, helpers }) => {
17.         const lvl0 =
18.           $(
19.             ".menu__link.menu__link--sublist.menu__link--active, .navbar__item.navbar__link--active",
20.           )
21.             .last()
22.             .text() || "Documentation";
24.         const records = helpers.docsearch({
25.           recordProps: {
26.             lvl0: {
27.               selectors: "",
28.               defaultValue: "gulpjs",
29.             },
30.             lvl1: ["header h1", "article h1"],
31.             lvl2: "article h2",
32.             lvl3: "article h3",
33.             lvl4: "article h4",
34.             lvl5: "article h5, article td:first-child",
35.             lvl6: "article h6",
36.             content: "article p, article li, article td:last-child",
37.           },
38.           aggregateContent: true,
39.           recordVersion: "v3",
40.         });
41.         // 设置中文
42.         records.forEach((record) => {
43.           record.lang = "zh-CN";
44.         });
45.         return records;
46.       },
47.     },
48.   ],
49.   safetyChecks: { beforeIndexPublishing: { maxLostRecordsPercentage: 30 } },
50.   initialIndexSettings: {
51.     deployGulpjs: {
52.       attributesForFaceting: [
53.         "type",
54.         "lang",
55.         "language",
56.         "version",
57.         "docusaurus_tag",
58.       ],
59.       attributesToRetrieve: [
60.         "hierarchy",
61.         "content",
62.         "anchor",
63.         "url",
64.         "url_without_anchor",
65.         "type",
66.       ],
67.       attributesToHighlight: ["hierarchy", "content"],
68.       attributesToSnippet: ["content:10"],
69.       camelCaseAttributes: ["hierarchy", "content"],
70.       searchableAttributes: [
71.         "unordered(hierarchy.lvl0)",
72.         "unordered(hierarchy.lvl1)",
73.         "unordered(hierarchy.lvl2)",
74.         "unordered(hierarchy.lvl3)",
75.         "unordered(hierarchy.lvl4)",
76.         "unordered(hierarchy.lvl5)",
77.         "unordered(hierarchy.lvl6)",
78.         "content",
79.       ],
80.       distinct: true,
81.       attributeForDistinct: "url",
82.       customRanking: [
83.         "desc(weight.pageRank)",
84.         "desc(weight.level)",
85.         "asc(weight.position)",
86.       ],
87.       ranking: [
88.         "words",
89.         "filters",
90.         "typo",
91.         "attribute",
92.         "proximity",
93.         "exact",
94.         "custom",
95.       ],
96.       highlightPreTag: '',
97.       highlightPostTag: "",
98.       minWordSizefor1Typo: 3,
99.       minWordSizefor2Typos: 7,
100.       allowTyposOnNumericTokens: false,
101.       minProximity: 1,
102.       ignorePlurals: true,
103.       advancedSyntax: true,
104.       attributeCriteriaComputedByMinProximity: true,
105.       removeWordsIfNoResults: "allOptional",
106.     },
107.   },
108.   apiKey: "xxxxxxx",
109. });

复制代码

看你的静态站点html是设置什么语言，lang="zh-CN",那对应要json参数设置爬取

1. // 设置中文
2. records.forEach((record) => {
3.   record.lang = "zh-CN";
4. });

复制代码

重点，索引设置

索引设置里的Searchable attributes 、Facets、Language

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！