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

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