定制docusaurus搜索栏v2

Question

我想在我的Docusaurus文档中定制Algolia搜索栏，更具体地说，我想在左侧侧边栏的顶部显示搜索栏，而不是在右上角，我认为这是默认的位置。

v2文档是难以捉摸的:https://v2.docusaurus.io/docs/search/

我找到了关于它的v1文档，并试图将其适应v2，但没有任何作用:https://docusaurus.io/docs/en/search docsNav

任何帮助都将不胜感激

Answer 1

看起来这在v1中是可能的，但在v2中不再是可能的。我相信您需要对导航栏组件进行微调并自己进行更改，因为搜索栏是硬编码为最右边的项:

<div className="navbar__items navbar__items--right">
{rightItems.map((item, i) =>
<NavbarItem {...item} key={i} />)} {!disableColorModeSwitch &&
<Toggle className={styles.displayOnlyInLargeViewport} aria-label="Dark mode toggle" checked={isDarkTheme} onChange={onToggleChange} />}
<SearchBar handleSearchBarToggle={setIsSearchBarExpanded} isSearchBarExpanded={isSearchBarExpanded} />
</div>

另一个选项可能是创建自己的导航栏搜索栏，并通过swizzling NavBarItem或以某种方式合并搜索栏主题将其作为新类型插入。这将允许你像在你想要的位置包含一个普通链接一样包含它，就像在v1中一样。我不确定这是否真的可能(我正在等待关于这个话题的答案)。

Answer 2

你应该混合DocSidebar组件，并在某处渲染SearchBar组件。