开始使用 Sidepanel

非官方测试版翻译

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

信息

Sidepanel 从版本 >= 4.4 开始可用

简介

DocSearch Sidepanel 是一种独立于 DocSearch Modal 体验的新体验。Sidepanel 完全为配合 Ask AI 使用而构建，既可以完全独立使用，也可以与 Modal 通过混合模式协同工作。

安装

要开始使用 Sidepanel，首先需要安装必要的包：

npm

npm install @docsearch/react @docsearch/css

# Or if using JS based package

npm install @docsearch/sidepanel-js @docsearch/css

yarn

yarn add @docsearch/react @docsearch/css

# Or if using JS based package

yarn add @docsearch/sidepanel-js @docsearch/css

pnpm

pnpm add @docsearch/react @docsearch/css

# Or if using JS based package

pnpm add @docsearch/sidepanel-js @docsearch/css

bun

bun add @docsearch/react @docsearch/css

# Or if using JS based package

bun add @docsearch/sidepanel-js @docsearch/css

或使用您选择的包管理器

不使用包管理器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/sidepanel.css" />

<script src="https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js"></script>

实现

Sidepanel 的最简实现方式如下：

React

import { DocSearchSidepanel } from '@docsearch/react/sidepanel';

import '@docsearch/css/dist/style.css';
import '@docsearch/css/dist/sidepanel.css';

function App() {
  return (
    <DocSearchSidepanel
      appId='YOUR_APP_ID'
      apiKey='YOUR_SEARCH_API_KEY'
      assistantId='YOUR_ASSISTANT_ID'
      indexName='YOUR_INDEX_NAME'
    />
  );
}

JavaScript

You will need a container DOM node to render the Sidepanel into:

<div id="docsearch-sidepanel"></div>

import sidepanel from '@docsearch/sidepanel-js';

import '@docsearch/css/dist/style.css';
import '@docsearch/css/dist/sidepanel.css';

sidepanel({
  container: '#docsearch-sidepanel',
  indexName: 'YOUR_INDEX_NAME',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  assistantId: 'YOUR_ASSISTANT_ID',
});

这仅是最基础的实现形式。要了解其他实现方法，请参阅我们的高级用例。

要深入了解 Sidepanel 的各种配置选项，请查阅我们的 Sidepanel API 参考文档