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

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

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

入門

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

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

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

通過Lunr.js實施倒立索引

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

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

這是LUNR索引創(chuàng)建和人口片段（以後在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/'，，
  標題：“帖子標題”，
  內容：“發(fā)布所有HTML標籤的內容?！?}

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

在gatsby-node.js中創(chuàng)建索引

首先，安裝必要的庫：

紗線添加lunr graphql型json striptags

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

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

 / * 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函數，包括數據獲取，處理和緩存，但對於簡潔起見，但對於功能實現至關重要。原始響應提供了此細節(jié)。）這確保僅在必要時重建索引。

添加搜索表格組件

創(chuàng)建搜索表單組件（ src/components/search-form.js ）：

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

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

創(chuàng)建搜索結果頁面

創(chuàng)建一個搜索結果頁面（ src/pages/search.js ）：

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

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

持續(xù)的搜索小部件（tartanify.com示例）

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

 // ...（tartanify.com的索引??創(chuàng)建）

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

使小部件持續(xù)

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

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

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

自定義搜索查詢增強功能

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

結論

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

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