跳转到内容

全文搜索与快捷键使用

在查阅大量技术文档时,快速找到想要的配置项或参数至关重要。EpoCanvas Docs 内置了双模式搜索:顶栏搜索框负责在当前页面内快速定位,Ctrl+K 弹窗负责检索全站所有文档。两种搜索全部在浏览器本地完成,不需要任何后端服务,站点托管在无外网的内网环境同样可用。


两种搜索分别什么时候用?

场景用哪种怎么操作
记得某段话就在当前这篇文章里页内查找直接点击顶栏搜索框,输入关键词
不确定内容在哪篇文章,需要全站查找全站检索按下 Ctrl + K(Mac 为 Cmd + K)

页内查找:顶栏搜索框

点击页面顶部中间的搜索框(放大镜图标),直接输入关键词:

顶栏页内查找的标注图:① 输入框 ② 匹配计数 ③ 上下跳转 ④ 清除 ⑤ 页面高亮

图:在顶栏搜索框输入”部署”后的实际标注效果。① 顶栏输入框;② 匹配计数(如 1/26);③ 上一个 / 下一个跳转按钮;④ 清除按钮;⑤ 当前页面中所有匹配文字自动高亮。

输入关键词

支持中文词组(如”部署”、“组件”)、英文单词以及代码片段(如 pnpm、astro.config.mjs)。输入过程中,当前页面内所有匹配的文字立即加上高亮底色,页面自动滚动到第一处匹配。

在匹配结果之间跳转

  • 按 Enter 或点击向下箭头:跳到下一处匹配;
  • 按 Shift + Enter 或点击向上箭头:回到上一处匹配;
  • 搜索框内实时显示 N/M 形式的进度计数(如 3/9),随时掌握浏览进度。

清除搜索恢复页面

按 Esc 或点击 × 按钮,清除所有高亮并恢复页面原状。


全站检索:Ctrl+K 弹窗

无论你当前处于哪个页面,按下快捷键 Ctrl + K(Mac 为 Cmd + K),或点击搜索框右侧的 Ctrl K 徽标,屏幕中央会弹出全局检索窗口:

全站检索弹窗的标注图:① 触发徽标 ② 检索输入框 ③ 结果列表 ④ 快捷键栏

图:在弹窗中输入”部署”后的实际标注效果。① 搜索框右侧的 Ctrl K 徽标(点击同样可以呼出弹窗);② 检索输入框;③ 按文档分组的结果列表,命中关键词带高亮;④ 底部键盘快捷键提示栏。

输入关键词

支持中文词组(如”部署”、“组件”)、英文单词以及代码片段(如 pnpm、astro.config.mjs)。标题命中的结果会排在最前面。

浏览结果列表

结果按文档分组,每条展示文档标题、所在章节以及包含关键词的上下文预览,命中词高亮显示。点击分组标题可以展开或收起该文档的命中段落。

用键盘完成整个流程

  • ↑ ↓:在结果之间移动选择;
  • Enter:打开选中结果并定位到对应段落;
  • Esc:关闭弹窗。

全程不需要鼠标。


为什么搜索这么快?

EpoCanvas Docs 双模式搜索机制对比图:左侧顶栏页内查找(DOM 遍历高亮、实时计数与平滑滚动),右侧全站检索弹窗(Ctrl+K 唤起、Pagefind WASM 内存倒排索引秒级匹配)

图:双模式搜索工作机制对比。左为顶栏页内关键词快速定位,右为基于 Pagefind WASM 的全站静态索引检索,两者均完全在浏览器本地运行。

很多网站的文档搜索需要把请求发送到远端服务器的数据库查询,网络不好时只能一直转圈。

EpoCanvas Docs 使用 Pagefind 本地静态搜索方案:

  1. 打包时提取索引:执行 pnpm run build 时,系统自动抓取每篇文档的内容,生成一组经过压缩的静态索引分片文件。
  2. 按需轻量下载:在搜索框输入文字时,浏览器只拉取对应字符的索引分片(体积仅几 KB 到几十 KB)。
  3. 本地即时匹配:匹配与排序全部在浏览器本地完成,因此没有网络请求延迟,在无外网的内网环境中也能完整使用。

搜索使用小贴士

  • 词组拆分:想找更精确的内容,可以输入多个词并用空格分开(例如输入 Cloudflare 域名)。
  • 优先查标题:文档标题和章节标题在排序中的权重最高,标题命中关键词的结果会排在最前面。
  • 开发模式的限制:全站检索的索引只在构建时生成,pnpm run dev 启动的开发服务器里 Ctrl + K 弹窗不加载索引、无法使用;要验证搜索效果,先执行 pnpm run build,再运行 pnpm run preview 访问构建产物。页内查找不受此限制。