Algolia

安装组件

npx nuxi@latest module add algolia
pnpm add @docsearch/js @docsearch/css

nuxt.config.ts 配置

  modules: ['@nuxtjs/algolia'],
  algolia: {
    apiKey: 'xxxxxx',
    applicationId: 'xxxxxx',
    // DocSearch key is used to configure DocSearch extension.
    docSearch: {
      indexName: 'xxxxx',
      placeholder: '搜索 VPS 类目（英文）、文档相关信息...',
      searchParameters: {
        hitsPerPage: 100 // 增加返回的结果数量
      }
    }
  },

页面使用

      <div class="scale-75">
        <AlgoliaDocSearch
          :search-parameters="{ hitsPerPage: 100 }"
          :translations="{
            button: {
              buttonText: '搜索' // 这里修改默认占位符
            },
            modal: {
              searchBox: {
                resetButtonTitle: '清除',
                cancelButtonText: '取消'
              },
              startScreen: {
                recentSearchesTitle: '最近搜索',
                noRecentSearchesText: '搜起来～如果要精准筛选，请使用本站的探查工具。',
                saveRecentSearchButtonTitle: '保存到最近搜索',
                removeRecentSearchButtonTitle: '从最近搜索中移除',
                favoriteSearchesTitle: '收藏的搜索',
                removeFavoriteSearchButtonTitle: '从收藏移除'
              },
              errorScreen: {
                titleText: '无法获取结果',
                helpText: '请检查你的网络连接'
              },
              footer: {
                selectText: '选择',
                selectKeyAriaLabel: '回车键',
                navigateText: '导航',
                navigateUpKeyAriaLabel: '向上箭头',
                navigateDownKeyAriaLabel: '向下箭头',
                closeText: '关闭',
                closeKeyAriaLabel: 'Esc 键',
                searchByText: '搜索服务商'
              },
              noResultsScreen: {
                noResultsText: '未找到匹配结果',
                suggestedQueryText: '尝试搜索',
                reportMissingResultsText: '你认为这个查询应该有结果？',
                reportMissingResultsLinkText: '点击反馈'
              }
            }
          }"
        />
      </div>