如何使用 Algolia

Alex Sun2023年2月23日大约 2 分钟

介绍如何使用 Algolia 来优化博客的搜索引擎。

1. 申请加入 DocSearch 项目

可以在加入 DocSearch 页面提交，DocSearch 团队会将 apiKey 和 indexName 发送到你的邮箱。

收到邮件后配置爬虫，选择你的应用，你将下面的配置界面。

在 Editor 可以编辑爬虫设置，我们主要用这个功能来自定义我们的爬虫设置。

我们主要设置 Actions。

默认主题

{
  indexName: "你的 Index",
  pathsToMatch: ["https://<你的网站>/**"],
  recordExtractor: ({ helpers }) => {
    return helpers.docsearch({
      recordProps: {
        lvl0: {
          selectors: ".sidebar-heading.active",
          defaultValue: "Documentation",
        },
        lvl1: ".theme-default-content h1",
        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",
        content: ".theme-default-content p, .theme-default-content li",
      },
      indexHeadings: true,
    });
  },
},

Hope 主题

{
  indexName: "你的 Index",
  pathsToMatch: ["https://<你的网站>/**"],
  recordExtractor: ({ helpers }) => {
    return helpers.docsearch({
      recordProps: {
        lvl0: {
          selectors: ".sidebar-heading.active",
          defaultValue: "Documentation",
        },
        lvl1: ".theme-hope-content h1",
        lvl2: ".theme-hope-content h2",
        lvl3: ".theme-hope-content h3",
        lvl4: ".theme-hope-content h4",
        lvl5: ".theme-hope-content h5",
        lvl6: ".theme-hope-content h6",
        content: ".theme-hope-content p, .theme-hope-content li",
      },
      indexHeadings: true,
    });
  },
},

其中 pathsToMatch 使用 micromatch 语法来匹配你的网站。

2. 安装到 VuePress 项目

pnpm add -D @algolia/client-search
pnpm add -D @vuepress/plugin-docsearch@next

如果你使用的是 VuePress 的默认主题，可参考官方文档来配置。

配置示例：

export default {
  plugins: [
    docsearchPlugin({
      appId: 'DF0MW*******',
      apiKey: '******************',
      indexName: 'alexsun_blog',
      placeholder: '搜索文档',
      translations: {
        button: {
          buttonText: '搜索文档',
          buttonAriaLabel: '搜索文档',
        },
        modal: {
          searchBox: {
            resetButtonTitle: '清除查询条件',
            resetButtonAriaLabel: '清除查询条件',
            cancelButtonText: '取消',
            cancelButtonAriaLabel: '取消',
          },
          startScreen: {
            recentSearchesTitle: '搜索历史',
            noRecentSearchesText: '没有搜索历史',
            saveRecentSearchButtonTitle: '保存至搜索历史',
            removeRecentSearchButtonTitle: '从搜索历史中移除',
            favoriteSearchesTitle: '收藏',
            removeFavoriteSearchButtonTitle: '从收藏中移除',
          },
          errorScreen: {
            titleText: '无法获取结果',
            helpText: '你可能需要检查你的网络连接',
          },
          footer: {
            selectText: '选择',
            navigateText: '切换',
            closeText: '关闭',
            searchByText: '搜索提供者',
          },
          noResultsScreen: {
            noResultsText: '无法找到相关结果',
            suggestedQueryText: '你可以尝试查询',
            reportMissingResultsText: '你认为该查询应该有结果？',
            reportMissingResultsLinkText: '点击反馈',
          },
        }
      }
    })
  ]
}

3. 配置多个站点

如图，点击 View in Algolia，然后登录。

选择正确的应用，然后点击 Search，即可看到下图的内容，选择上方的 Index，然后创建新的 Index，请保持每个应用的前缀一致以方便区分。

然后在不同的 Action 中指定你创建的 Index 名称即可。