VuePress2.0 配置Algolia文档搜索

Algolia配置步骤

注册

你可以通过官网进行注册。因为与Github有关联，你可以选择使用Github进行注册，这样可以更方便地管理你的账户，根据自己的业务场景选择注册方式。

• 注册登录之后，我们需要创建 Algolia 库名

默认index中是有一个仓库的，我们需要点击 Create Index 创建一个自己的仓库(仓库名尽量与项目相关，后续会使用)。

• 回到首页，找到 API keys，复制Admin API Key，Application ID我们需要填充到Github中。

Github配置步骤

进入Github项目仓库，进入Settings->Secrets and variables->Actions中，New repository secret 添加Repository secrets

添加Actions密钥

• API_KEY对应 algolia 的 Admin API Key
• APPLICATION_ID对应 algolia Application ID

项目步骤

配置Actions

根目录创建文件 .github->workflows->algolia.yml

# action名
name: algolia
on:
  push:
    branches:
      - master
jobs:
  algolia:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Get the content of algolia.json as config
        id: algolia_config
        run: echo "config=$(cat docsearch.json | jq -r tostring)" >> $GITHUB_OUTPUT
      - name: Push indices to Algolia
        uses: signcl/docsearch-scraper-action@master
        env:
          APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
          API_KEY: ${{ secrets.API_KEY }}
          CONFIG: ${{ steps.algolia_config.outputs.config }}

当你git push 提交时Github会检测.github->workflows的yml文件，并通过Actions执行。

配置docsearchPlugin插件

其他 docsearchPlugin配置，参考vuepress/docsearch

• Algolia相关配置

import { docsearchPlugin } from '@vuepress/plugin-docsearch'
export default docsearchPlugin({
  // Application ID
  appId: 'xxx',
  // Admin API Key
  apiKey: 'xxx',
  // algolia 仓库名
  indexName: '',
  // v2
  searchParameters: {
    facetFilters: ['tags:v2']
  },
  locales: {
      // ...
  }
})

• 引入

import docsearchPlugin from './configs/docsearchPlugin'
export default {
    // ...
    plugins: [docsearchPlugin]
    // ...
}

执行成功查看结果

Algolia 的菜单 Search -> index中能看到提交的菜单数据