跳至主内容
版本：稳定版 (v4.x)

高级用例

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

简介​

本指南将介绍 Sidepanel 的一些高级实现和用例。以下示例假设您正在使用 Sidepanel React 包（可通过 @docsearch/sidepanel 获取）。您可以通过以下方式安装 @docsearch/sidepanel 包：

npm install @docsearch/sidepanel

或使用您选择的包管理器

复杂实现​

下面是一个更复杂的实现示例，包含 searchParameters、不同的 variant 以及本地化翻译。

import { DocSearch } from '@docsearch/core';
import { SidepanelButton, Sidepanel } from '@docsearch/sidepanel'

function App() {
  return (
    <DocSearch>
      <SidepanelButton
        translations={{
          buttonAriaLabel: 'Open Ask AI Sidepanel',
        }}
      />
      <Sidepanel
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_ASSISTANT_ID"
        variant="inline"
        searchParameters={{
          facetFilters: ['language:en'],
          distinct: false,
        }}
        translations={{
          header: {
            title: 'Ask our assistant',
          },
          promptForm: {
            promptPlaceholderText: 'e.g. How do I migrate my DB?',
          },
        }}
      />
    </DocSearch>
  );
}

动态导入​

Sidepanel 的设计支持动态导入组件以减少打包体积。以下是简要实现示例：

import { DocSearch } from '@docsearch/core';
import { SidepanelButton } from '@docsearch/sidepanel/button';
import type { Sidepanel as SidepanelType} from '@docsearch/sidepanel/sidepanel';
import { useState } from 'react';

let Sidepanel: typeof SidepanelType | null = null;

async function importSidepanelIfNeeded() {
  if (Sidepanel) {
    return;
  }

  const { Sidepanel: Panel } = await import('@docsearch/sidepanel/sidepanel');

  Sidepanel = Panel;
}

export default function DynamicSidepanel() {
  const [sidepanelLoaded, setSidepanelLoaded] = useState(false);

  const loadSidepanel = () => {
    importSidepanelIfNeeded().then(() => {
      setSidepanelLoaded(true);
    });
  };

  return (
    <DocSearch>
      <SidepanelButton onClick={loadSidepanel} />
      {sidepanelLoaded && Sidepanel && (
        <Sidepanel
          indexName="YOUR_INDEX_NAME"
          appId="YOUR_APP_ID"
          apiKey="YOUR_SEARCH_API_KEY"
          assistantId="YOUR_ASSISTANT_ID"
        />
      )}
    </DocSearch>
  );
}

混合模式​

混合模式允许您将 Sidepanel 与原生的 DocSearch 弹窗集成在统一体验中。

您可触发弹窗进行搜索，同时调用 Sidepanel 获取 AI 智能辅助。

更多细节请参阅混合模式指南。