沒有搜索引擎或嗯搜索功能的字典是什么！？
在基本詞典的實現過程中，我創建了這些靜態搜索表單（一個位于主頁上，另一個位于用于單詞布局的導航欄上），為這一特定功能做準備。
我只需要從那里接起并讓它工作，輕松的工作 – 要是這是真的就好了。
過去的事
重要的是要重申，我最初的計劃是使用 Nextra 構建 jargons.dev，正如我在最初的提交中承認的那樣：
…Nextra（這實際上是我穿著閃亮盔甲的騎士，我想用 Nextra 來建造）。
我是一個 React ?? 粉絲，非常喜歡 Next.js； Nextra 是一個基于 Next.js 構建的以內容為中心的 Web 框架。所以我想你應該能理解為什么 Nextra 聽起來像個騎士。在我最初探索 Nextra 的過程中，有一個功能對我來說很突出：全文搜索——我對這個流口水了?（我必須承認）。
該功能由 Flexsearch 提供支持——一個零深度的全文搜索庫；天哪，我是輕量級和無/低依賴性的忠實粉絲。我深入研究了 Nextra 如何使用它在構建時索引內容以進行搜索；很有趣。
所以！？
在我早期接觸 Astro 的過程中，我發現自己正在使用 Flexsearch 進行黑客攻擊；當我遵循 astro 文檔的構建博客教程時，我更進一步，非常輕松地實現了搜索功能。
所以，這次實施的經驗；我向搜索引擎傳遞了 jargons.dev.
搜索引擎
任務非常簡單，我需要..
獲取單詞字典目錄內所有文件的訪問或調用它的引用 – 此時它是 src/pages/word 目錄
使用 Flexsearch 索引這些文件內容
插入搜索表單并繁榮?
看起來很簡單！也許對于搜索索引和實際搜索來說，它是；但到達那里有很多東西。
在 jargons.dev 中集成第一個“島”
Astro 默認情況下采用服務器優先的方法，這意味著它會在服務器上構建網站的 HTML/CSS，自動刪除所有客戶端 javascript (JS)（除非您另有說明）。去掉所有 JS 可以保證性能提升，但沒有 JS 就意味著沒有交互性；但如果您想要互動，阿斯特羅島是您的最佳選擇之一。我需要搜索引擎的交互性，所以它就是島嶼！
什么是“島”！？
我簡單地說，島嶼是網頁上一個獨立的交互式組件，其 HTML/CSS 在服務器端呈現和/但它的客戶端 javaScript 也與其捆綁在一起 – 未刪除.
我在 TILConf’24 上發表了關于 Island 的演講，請查看以了解更多信息。
Astro 的產品
Astro 提供了將 Island 與我最喜歡的 UI 庫（是的，你猜對了，React）集成的支持。這使我能夠將靜態搜索表單構建為功能性的東西。
我做過的事
我首先為我需要集成的島嶼添加集成模塊（@astrojs/react）；使用 npx astro add React 命令很容易完成
我將所有靜態搜索表單轉移到單個 React 組件中（這是兩個不同大小的表單）；配置組件以根據給定的 props 以所需的大小渲染它們。
我還實現了一些子組件，這些子組件僅在同一搜索組件中本地使用，這些是……
SearchDialog – 執行搜索操作的主要組件
SearchResult 組件等…
我實現了一些自定義鍵盤快捷鍵和按鍵綁定，可以與搜索組件進行交互（從現在起我想將其稱為“搜索島”），這些是……
CTRL+K 或 ?K 開始搜索
ESC 關閉搜索
…以及在搜索結果中導航所需的基本導航按鈕
我還添加了一些自定義鉤子，以便搜索島的工作順利進行，這些是……
useLockBody – 打開搜索對話框后禁用滾動的鉤子
useRouter – 我作為一些 window.location 方法的包裝器制作的鉤子，使它們感覺像 React 中已知的路由器庫，這是我特別在搜索結果組件上的導航按鈕鍵綁定中的 ENTER 按鈕單擊處理程序上使用的鉤子在搜索島上。
和 useIsMacOS – 檢查機器是否為 MacOS，以確定在搜索表單觸發器上呈現的適當描述文本；即 CTRL+K 或 ?K
我添加了命令式模塊——flexsearch；
我使用 Astro.glob() 函數非常輕松地檢索了對單詞目錄文件的訪問（太糟糕了，我無法談論這個函數有多么強大；我很高興它在 Astro 中開箱即用，以及如何它使這個搜索引擎的啟動和運行流程變得非常容易）并將返回的單詞對象數組插入由nanostore（另一個漂亮的東西）提供支持的 $dictionary 狀態（也許我應該稱其為商店）
然后使用 Flexsearch 為這個 $dictionary 建立索引，為以后的搜索做好準備。
另一個重要功能：最近的搜索
這是我必須談論的另一個必要功能；此功能跟蹤搜索到的項目并將其存儲在本地存儲中，以便在頁面重新加載時保留它們；然后，這些商店搜索的項目將呈現在詞典主頁上的列表中。
它還將集成作為一個島嶼，并將價值保存在由 Nanostore 驅動的 $recentSearches 狀態中。
我對此功能的實現并不完全完美，這里列出了一些需要修復的問題（在撰寫本文時），以使其沿著這條路線更進一步（盡管我們永遠無法達到完美，但肯定是的） )
將加載組件添加到最近的搜索島 – https://github.com/devjargons/jargons.dev/issues/31
錯誤：在導航欄中使用搜索表單執行的搜索操作會覆蓋 LocalStorage – https://github.com/devjargons/jargons.dev/issues/10
增強功能：Word 編輯器 – 第二次迭代功能 – https://github.com/devjargons/jargons.dev/issues/9
公關
這是一篇很長的文章，我希望保持簡短…這是 PR
壯舉：實現字典搜索引擎
#5
巴布爾貝
發布于2024年3月25日
此 Pull Request 為字典項目實現了搜索功能。它使用@astro/react集成為Islands提供動力，并結合nanostore進行狀態管理和flexsearch作為文本搜索庫。
做出的改變
添加了以下文本搜索所需的 astrojs 集成和庫
@astrojs/react
@nanostores/react
靈活搜索
實現了搜索島（一個反應組件），其中實現了其他子組件以供內部使用
實現了 SearchTrigger 組件，該組件呈現兩種不同大小的搜索字段并在網頁上的兩個不同位置使用……
size md – 在網絡應用程序的主頁上使用
size sm – 用于詞典單詞布局導航部分
實現了SearchDialog組件，只有點擊SearchTrigger時才渲染
實現了SearchInfo組件，當表單字段中沒有輸入搜索詞時呈現為默認占位符
實現了 SearchResult 組件，呈現搜索結果或未找到搜索結果的消息
在搜索島中實現了按鍵綁定，以允許使用指定的鍵盤快捷鍵進行以下操作
CTRL+K 或 ?K 打開搜索對話框，無需單擊搜索觸發器
ArrowUp、ArrowDown 和 Enter 允許在搜索結果列表上導航
ESC 允許關閉搜索對話框
新增搜索島消費自定義掛鉤
useIsMacOS – 檢查當前用戶是否正在使用 MacOS 計算機瀏覽 Web 應用程序；這用于確定在搜索觸發器上呈現的適當的短；即 CTRL+K 或 ?K
useLockBody – 用于在打開搜索對話框時禁用當前視口滾動
useRouter – （而不是將react-router添加到deps中）這個鉤子環繞window.location并使用分配對象作為推送；主要用在 SearchResult 組件中，路由到選定/點擊的結果頁面
在搜索島上實現了 searchIndexing，并以 flexsearch 的 Document 方法為首選
添加了一個新的搜索存儲，用于通過 nanostores 和 @nanostores/react 集成管理搜索相關狀態
添加了以下存儲值和操作
$isSearchOpen – 用于管理 SearchDialog 狀態的全局狀態
$recentSearches – 用于跟蹤最近搜索的單詞的狀態；它與 localStorage 協同工作，即使在選項卡重新加載后也能保留其值
$addToRecentSearchesFn – 將新項目添加到 $recentSearches 存儲值的存儲操作
添加了 $dictionary 存儲來管理整個字典條目；使其可供客戶端訪問并用作搜索島中 searchIndex 的值
使用 Astro.glob() 方法索引整個字典目錄，盡早從布局/基礎計算字典存儲的值
添加了RecentSearches島，它從$recentSearches存儲中讀取值并將其呈現在主頁上
截屏
完整演示
截屏視頻-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.25-13_32_30.webm
?
在 GitHub 上查看
