Gatsby WebサイトにLUNR検索を追加する方法

Jamstackアーキテクチャは、Webサイト開発のために大きな牽引力を獲得しています。 Gatsby、Nuxt、またはGridsomeを探索しましたか？それらの使いやすさと事前に構築された機能は、しばしば印象的です。ただし、検索機能は常に組み込みの機能ではなく、コンテンツが豊富なサイトの課題を提示します。サーバー側のコンポーネントなしで堅牢な検索を実装できますか？

Jamstackには本質的に組み込みの検索機能がありません。これには、慎重な検討と実装が必要です。 Algoliaのサービスとしての検索（無料プランの制限がある）やWPGRAPHQLおよびApolloクライアントとの検索の活用など、オプションが存在しますが、この記事はクライアント側のソリューションに焦点を当てています。

検索インデックスを構築し、外部サーバーの依存関係なしで拡張可能でカスタマイズ可能な検索を提供する軽量JavaScriptライブラリであるLunr.JSを使用して、Gatsbyサイトに検索を統合します。最近、Tartanify.comで「Tartan Nameによる検索」機能を追加し、永続的なリアルタイム検索に関連する課題を克服しました。この記事では、これらの課題と解決策について説明します。

はじめる

簡単にするために、Gatsbyの公式ブログのスターターを使用します。これは、静的なWebサイトの作成の多くの側面を抽象化します。従うには：

Gatsby New Gatsby-Starter-Blog https://github.com/gatsbyjs/gatsby-starter-blog
CD Gatsby-Starter-blog
ギャツビーが発展します

これによりhttp://localhost:8000/でアクセス可能な3つの投稿がある小さなブログが作成されます。 http://localhost:8000/__graphqlを検査すると、利用可能なデータが明らかになります。

lunr.jsで倒立インデックスを実装します

LUNRは、レコードレベルの反転インデックスを採用しています。これは、サイト上の各単語をその場所（ページパス）にマッピングします。インデックス作成キーワードを提供するフィールド（タイトル、コンテンツ、説明など）を決定します。

ブログでは、タイトルとコンテンツをインデックス化します。タイトルは簡単ですが、コンテンツにはクリーニングが必要です。最初にrawMarkdownBodyを使用することは、MarkDown Syntaxのために問題があることが判明しました。 htmlフィールドとstriptagsパッケージを使用して、HTMLタグを削除します。詳細については、LUNRドキュメントを参照してください。

LUNRインデックスの作成と人口スニペット（後にgatsby-node.jsで使用）は次のとおりです。

const index = lunr（function（）{
  this.ref（ 'slug'）
  this.field（ 'title'）
  this.field（ 'content'）
  for（const doc of documents）{
    this.add（doc）
  }
}）

documents 、それぞれがslug 、 title 、 contentを備えた一連のオブジェクトです。

{
  ナメクジ： '/ポストスラグ/'、
  タイトル：「投稿タイトル」、
  コンテンツ：「すべてのHTMLタグが削除されたコンテンツを投稿します。」
}

一意のドキュメントキー（ slug ）と2つのフィールド（ titleとcontent ）を定義します。すべてのドキュメントが繰り返し追加されます。

gatsby-node.jsでインデックスを作成します

まず、必要なライブラリをインストールします。

Yarnはlunr graphql-type-json striptagsを追加します

次に、 gatsby-node.jsを変更します。このファイルはサイトビルド中に実行され、インデックス作成を追加できます。 Gatsby API createResolversを使用して、新しいルートフィールドLunrIndex作成します。

Gatsbyのデータストアとクエリ機能は、GraphQLフィールドリゾルバーを介して公開されます。 getAllNodes指定されたタイプのノードを取得します。

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

exports.createresolvers =（{cache、createresolvers}）=> {
  Createresolvers（{
    クエリ：{
      lunrindex：{
        タイプ：graphqljsonObject、
        Resolve ：（ソース、args、context、info）=> {
          const blognodes = context.nodemodel.getallnodes（{type： `markdownremark`}）;
          const type = info.schema.getType（ `markdownremark`）;
          return createIndex（blognodes、type、cache）;
        }、
      }、
    }、
  }）;
};

// ...（createIndex関数）

createIndex関数は、lunrスニペットを使用します。

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

const createindex = async（blognodes、type、cache）=> {
  // ...（キャッシュを含むデータを取得して処理するための実装）
};

（データの取得、処理、キャッシュを含む完全なcreateIndex関数は、簡潔にするために省略されていますが、機能的な実装には重要です。元の応答はこの詳細を提供します。）これにより、インデックスが必要な場合にのみ再構築されるようになります。

検索フォームコンポーネントを追加します

検索フォームコンポーネント（ src/components/search-form.js ）を作成します。

// ...（フォームコンポーネントの実装を検索）

（Brevityのために完全なコンポーネントの実装は省略されていますが、元の応答で詳しく説明されています。）このコンポーネントは、フォームの送信と入力の変更を処理し、クエリパラメーターで/searchます。

検索結果の作成ページ

検索結果ページ（ src/pages/search.js ）を作成します。

// ...（[結果]ページの実装）

（Brevityのために完全なページの実装は省略されていますが、元の応答で詳しく説明されています。）このページでは、 LunrIndexデータを使用して検索結果を表示します。

永続的な検索ウィジェット（tartanify.comの例）

Tartanify.comの例は、永続的なインスタント検索ウィジェットを示しています。インデックス作成はブログの例に似ていますが、よりシンプルです。

// ...（tartanify.comのインデックス作成）

（Brevityのために完全な実装は省略されていますが、元の応答で詳しく説明されています。）重要な違いは、フォームの提出ではなく、入力変更によってトリガーされるインスタント検索機能です。 useStaticQueryフックは、データフェッチに使用されます。

ウィジェットを永続化します

ページの変更全体で検索ウィジェットを維持するために、GatsbyのwrapPageElement APIを使用します。

// gatsby-browser.js
// ...（wrappageElementの実装）

（完全な実装は、元の応答で詳細に説明されています。）これにより、ページコンテンツを検索ウィジェットで包み、永続性を確保します。

カスタム検索クエリの拡張機能

元の応答では、Lunrのqueryメソッドを使用して検索クエリの改善が、ファジーマッチ、ワイルドカード、およびブールロジックを処理して、より良い検索結果を得るための検索クエリの改善を詳述します。このセクションは、検索エクスペリエンスを大幅に強化します。

結論

Jamstack Webサイトで検索機能を実装することは達成可能であり、ユーザーエクスペリエンスを大幅に改善できます。 Jamstackのステートレスの性質と一見対立しているように見えますが、Lunr.JSのようなクライアント側のソリューションは、強力で柔軟な代替品を提供します。この記事で詳述されている慎重な検討と実装は、思慮深い設計と開発を通じて優れたユーザーエクスペリエンスを作成する可能性を強調しています。

以上がGatsby WebサイトにLUNR検索を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。