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

jamstack固有地缺乏內(nèi)置的搜索功能。這需要仔細(xì)考慮和實(shí)施。雖然存在選項(xiàng)，例如Algolia的搜索服務(wù)（對(duì)免費(fèi)計(jì)劃的限制）或使用WPGRAPHQL和APOLLO客戶端利用WordPress的搜索，但本文側(cè)重于客戶端解決方案。

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

入門(mén)

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

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

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

通過(guò)Lunr.js實(shí)施倒立索引

Lunr采用了記錄級(jí)的倒置索引。這將站點(diǎn)上的每個(gè)單詞都映射到其位置（頁(yè)面路徑）。我們確定哪些字段（標(biāo)題，內(nèi)容，描述等）提供索引關(guān)鍵字。

對(duì)于我們的博客，我們將索引標(biāo)題和內(nèi)容。標(biāo)題很簡(jiǎn)單，但內(nèi)容需要清潔。最初，使用rawMarkdownBody由于Markdown語(yǔ)法而被證明是有問(wèn)題的。我們將使用html字段和striptags軟件包來(lái)刪除HTML標(biāo)簽。有關(guān)詳細(xì)信息，請(qǐng)參閱LUNR文檔。

這是LUNR索引創(chuàng)建和人口片段（以后在gatsby-node.js中使用）：

 const index = lunr（function（）{
  this.ref（'slug'）
  this.field（'title'）
  this.field（'content'）
  對(duì)于（文檔的const doc）{
    this.add（doc）
  }
}））

documents是一系列對(duì)象，每個(gè)對(duì)象都帶有slug ， title和content ：

 {
  slug：'/post-slug/'，，
  標(biāo)題：“帖子標(biāo)題”，
  內(nèi)容：“發(fā)布所有HTML標(biāo)簽的內(nèi)容。”
}

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

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

首先，安裝必要的庫(kù)：

紗線添加lunr graphql型json striptags

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

Gatsby的數(shù)據(jù)存儲(chǔ)和查詢功能通過(guò)GraphQL字段解析顯示。 getAllNodes檢索指定類型的節(jié)點(diǎn)：

 / * gatsby-node.js */
// ...（導(dǎo)入）

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

// ...（createIndex函數(shù)）

createIndex函數(shù)利用Lunr片段：

 / * gatsby-node.js */
// ...（導(dǎo)入）

const createIndex = async（blognodes，type，cache）=> {
  // ...（用于獲取和處理數(shù)據(jù)的實(shí)現(xiàn)，包括緩存）
};

（省略了完整的createIndex函數(shù)，包括數(shù)據(jù)獲取，處理和緩存，但對(duì)于簡(jiǎn)潔起見(jiàn)，但對(duì)于功能實(shí)現(xiàn)至關(guān)重要。原始響應(yīng)提供了此細(xì)節(jié)。）這確保僅在必要時(shí)重建索引。

添加搜索表格組件

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

 // ...（搜索表格組件實(shí)現(xiàn)）

（對(duì)于簡(jiǎn)潔而言，省略了完整的組件實(shí)現(xiàn)，但在原始響應(yīng)中已詳細(xì)介紹。）此組件處理表單提交和輸入更改，并用查詢參數(shù)導(dǎo)航到/search 。

創(chuàng)建搜索結(jié)果頁(yè)面

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

 // ...（搜索結(jié)果頁(yè)面實(shí)現(xiàn)）

（對(duì)于簡(jiǎn)潔而言，省略了完整的頁(yè)面實(shí)現(xiàn)，但在原始響應(yīng)中詳細(xì)介紹。）此頁(yè)面使用LunrIndex數(shù)據(jù)顯示搜索結(jié)果。

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

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

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

（對(duì)于簡(jiǎn)潔而言，省略了完整的實(shí)現(xiàn)，但在原始響應(yīng)中已詳細(xì)介紹。）關(guān)鍵區(qū)別是由輸入更改觸發(fā)的即時(shí)搜索功能，而不是表格提交。 useStaticQuery Hook用于數(shù)據(jù)獲取。

使小部件持續(xù)

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

 // gatsby-browser.js
// ...（包裝實(shí)現(xiàn)）

（在原始響應(yīng)中詳細(xì)介紹了完整的實(shí)現(xiàn)。）這將頁(yè)面內(nèi)容與搜索小部件包裝，以確保持久性。

自定義搜索查詢?cè)鰪?qiáng)功能

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

結(jié)論

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

以上是如何將LUNR搜索添加到您的Gatsby網(wǎng)站的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！