自定义 DocSearch 样式

非官方测试版翻译

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

DocSearch 默认采用灰底蓝高亮的配色方案。

配色方案

这套主题适配大多数网站，但我们鼓励您根据自身主题进行定制。您可以通过覆盖默认主题的 CSS 类来实现样式调整。

以下带注释的示例将帮助您定制每个部分：

/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
}

/* Main category (eg. Getting Started) */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
  color: darkgray;
  border: 1px solid gray;
}

/* Category (eg. Downloads) */
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  color: gray;
}

/* Title (eg. Bootstrap CDN) */
.algolia-autocomplete .algolia-docsearch-suggestion--title {
  font-weight: bold;
  color: black;
}

/* Description description (eg. Bootstrap currently works...) */
.algolia-autocomplete .algolia-docsearch-suggestion--text {
  font-size: 0.8rem;
  color: gray;
}

/* Highlighted text */
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: blue;
}

品牌标识

我们很高兴为任何文档网站免费提供 DocSearch 服务，您可自由定制样式以匹配网站主题。唯一要求是在搜索结果旁保留 "Search by Algolia" 标识及链接。

默认样式会自动在下拉框中添加该标识。这是我们让更多人了解 Algolia 服务的方式，展示如何为网站实现快速精准的搜索体验。

若您使用付费版 Algolia 账户并自行运行爬虫，则无需保留该标识。

调试技巧

要使用浏览器工具检查下拉框标记，请在调用 docsearch 时添加 debug: true 参数，防止检查时下拉框自动关闭。

docsearch({
  […],
  debug: true
});

其他注意事项

下拉框通过 .ds-cursor 类包装选中项。这意味着您可以使用 .ds-cursor .algolia-docsearch-suggestion--content 来定制选中建议的样式。

小屏设备上 DocSearch 会切换为单列布局，大屏则显示截图中所示的双列布局。您可添加媒体查询（例如 @media (min-width: 768px) {}）适配不同设备。

高级样式定制

如需深度定制样式，请参考 SCSS 源码。其中 _variables.scss 包含所有默认主题配置、尺寸和断点设置。

您可通过克隆仓库并运行 yarn run build:css 生成自定义 CSS 文件。生成文件位于 ./dist/cdn 目录，请使用这些文件替代默认样式。