跳到內容

全文搜尋與快捷鍵使用

在查閱大量技術文件時,快速找到想要的設定項或參數至關重要。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 開啟建置結果。頁內查找不受此限制。