如何將LUNR搜索添加到您的Gatsby網站

Jamstack Architecture在網站開發方面獲得了重大吸引力。您是否探索過Gatsby，Nuxt或Grysome？它們的易用性和預先建造的功能通常令人印象深刻。但是，搜索功能並不總是一個內置功能，對內容豐富的網站提出了挑戰。我們可以在沒有服務器端組件的情況下實現強大的搜索嗎？

jamstack固有地缺乏內置的搜索功能。這需要仔細考慮和實施。雖然存在選項，例如Algolia的搜索服務（對免費計劃的限制）或使用WPGRAPHQL和APOLLO客戶端利用WordPress的搜索，但本文側重於客戶端解決方案。

我們將使用Lunr.js構建搜索索引，並將搜索集成到Gatsby站點中，Lunr.js是一個輕巧的JavaScript庫，可提供可擴展且可自定義的搜索，而無需外部服務器依賴關係。我們最近在tartanify.com上使用它來添加“按塔爾坦名稱搜索”功能，克服了與持續的實時搜索有關的挑戰。本文將詳細介紹這些挑戰和解決方案。

入門

為簡單起見，我們將使用官方的Gatsby博客入門者。這摘要靜態網站創建的許多方面。跟隨：

 Gatsby New Gatsby-Starter-Blog https://github.com/gatsbyjs/gatsby-starter-blog
CD Gatsby-Starter-Blog
蓋茨比發展

這將創建一個帶有三個帖子的小博客，可在http://localhost:8000/ 。檢查http://localhost:8000/__graphql顯示可用數據。

通過Lunr.js實施倒立索引

Lunr採用了記錄級的倒置索引。這將站點上的每個單詞都映射到其位置（頁面路徑）。我們確定哪些字段（標題，內容，描述等）提供索引關鍵字。

對於我們的博客，我們將索引標題和內容。標題很簡單，但內容需要清潔。最初，使用rawMarkdownBody由於Markdown語法而被證明是有問題的。我們將使用html字段和striptags軟件包來刪除HTML標籤。有關詳細信息，請參閱LUNR文檔。

這是LUNR索引創建和人口片段（以後在gatsby-node.js中使用）：

 const index = lunr（function（）{
  this.ref（'slug'）
  this.field（'title'）
  this.field（'content'）
  對於（文檔的const doc）{
    this.add（doc）
  }
}））

documents是一系列對象，每個對像都帶有slug ， title和content ：

 {
  slug：'/post-slug/'，，
  標題：“帖子標題”，
  內容：“發布所有HTML標籤的內容。”
}

我們定義一個唯一的文檔密鑰（ slug ）和兩個字段（ title和content ）。所有文檔都迭代添加。

在gatsby-node.js中創建索引

首先，安裝必要的庫：

紗線添加lunr graphql型json striptags

接下來，修改gatsby-node.js 。該文件在站點構建過程中執行，使我們可以添加索引創建。我們將使用Gatsby Api createResolvers創建一個新的根場LunrIndex 。

Gatsby的數據存儲和查詢功能通過GraphQL字段解析顯示。 getAllNodes檢索指定類型的節點：

 / * gatsby-node.js */
// ...（導入）

exports.CreateReSolvers =（{cache，createresolvers}）=> {
  createresolvers（{
    詢問： {
      lunrindex：{
        類型：GraphQljSonObject，
        分辨：（源，args，context，info）=> {
          cont blognodes = context.nodemodel.getAllNodes（{type：`markdownRemark`}）;
          const type = info.schema.getType（`markdownRemark`）;
          返回createIndex（blognodes，type，cache）;
        }，，
      }，，
    }，，
  }）;
};

// ...（createIndex函數）

createIndex函數利用Lunr片段：

 / * gatsby-node.js */
// ...（導入）

const createIndex = async（blognodes，type，cache）=> {
  // ...（用於獲取和處理數據的實現，包括緩存）
};

（省略了完整的createIndex函數，包括數據獲取，處理和緩存，但對於簡潔起見，但對於功能實現至關重要。原始響應提供了此細節。）這確保僅在必要時重建索引。

添加搜索表格組件

創建搜索表單組件（ src/components/search-form.js ）：

 // ...（搜索表格組件實現）

（對於簡潔而言，省略了完整的組件實現，但在原始響應中已詳細介紹。）此組件處理表單提交和輸入更改，並用查詢參數導航到/search 。

創建搜索結果頁面

創建一個搜索結果頁面（ src/pages/search.js ）：

 // ...（搜索結果頁面實現）

（對於簡潔而言，省略了完整的頁面實現，但在原始響應中詳細介紹。）此頁面使用LunrIndex數據顯示搜索結果。

持續的搜索小部件（tartanify.com示例）

tartanify.com示例演示了一個持久的即時搜索小部件。索引創建類似於博客示例，但更簡單：

 // ...（tartanify.com的索引​​創建）

（對於簡潔而言，省略了完整的實現，但在原始響應中已詳細介紹。）關鍵區別是由輸入更改觸發的即時搜索功能，而不是表格提交。 useStaticQuery Hook用於數據獲取。

使小部件持續

為了在頁面上維護搜索小部件，我們使用蓋茨比的wrapPageElement API：

 // gatsby-browser.js
// ...（包裝實現）

（在原始響應中詳細介紹了完整的實現。）這將頁面內容與搜索小部件包裝，以確保持久性。

自定義搜索查詢增強功能

原始響應詳細詳細介紹了使用Lunr query方法來改進搜索查詢的方法，以處理模糊匹配，通配符和布爾邏輯，以獲得更好的搜索結果。本節可顯著增強搜索體驗。

結論

在Jamstack網站中實施搜索功能是可以實現的，並且可以顯著改善用戶體驗。雖然似乎與Jamstack的無狀態性質不一致，但Lunr.js等客戶端解決方案提供了強大而靈活的替代方案。本文詳細介紹的仔細考慮和實施突出了通過周到的設計和開發創造出色的用戶體驗的潛力。

以上是如何將LUNR搜索添加到您的Gatsby網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！