lunr moduleのダウンロード - lunr moduleソースコードのダウンロード

lunr module

その他のソースコード

1.0.0

ダウンロード

lunr.jsモジュール

lunr.js を使用した Nuxt.js の事前構築インデックスによる全文検索

Nuxt.js のビルドフェーズ中に、nuxt フックlunr:document呼び出すことで、検索インデックスビルダーにドキュメントを追加できます。サポートされているロケールをドキュメントに設定して渡している場合、指定した言語の lunr ステマーを使用してインデックスが構築されます。 lunr 検索インデックスはドキュメントへの参照のみを保持するため、必要に応じて、検索インデックスにも追加されるドキュメントとともにメタプロップを渡すことができます。

リリースノート

設定

@nuxtjs/lunr-module依存関係をプロジェクトに追加します

$ yarn add @nuxtjs/lunr-module # or npm install @nuxtjs/lunr-module

@nuxtjs/lunr-moduleをnuxt.config.jsのmodulesセクションに追加します

 {
  modules : [
    // Simple usage
    '@nuxtjs/lunr-module' ,

    // With options
    {
      src : '@nuxtjs/lunr-module' ,
      // These are the default options:
      /*
      options: {
        includeComponent: true,
        globalComponent: false,
        css: true,
        defaultLanguage: 'en',
        languages: false,
        path: 'search-index',
        ref: 'id',
        fields: [
          'title',
          'body'
        ]
      } */
    }
  ]
}

ドキュメント

検索インデックスへのドキュメントの追加

次のように nuxt フックlunr:documents呼び出してドキュメントを追加します。

 const document = {
  id : 1 ,
  title : 'My Title' ,
  body : 'The body'
}

const meta = {
  href : '/link/to/page' ,
  title : document . title
}

nuxt . callHook ( 'lunr:document' , ( {
  locale : 'af' , // optional, default en
  document ,
  meta // optional
} )

ロケールのサポート

ロケールオプションを構成することにより、サポートされている言語に対して検索インデックスを作成する必要があることを指定できます。ドキュメントで他のロケールを渡すと、 defaultLanguage検索インデックスに追加されます (警告が出力されます)。

複数の言語は複数の検索インデックスに相当します

Lunr では英語がデフォルトでサポートされており、英語のドキュメントのみがある場合は、ロケールを設定したり渡したりする必要はありません。

言語とロケール

ロケールは言語のみで構成することも、地域を含めることもでき、どちらかを使用できます。したがって、言語のみ (例: nl ) と地域を含むもの (例: nl_NL ) の両方が機能します。

nuxt-i18n の統合

このモジュールがプロジェクトで nuxt-i18n を使用していることを検出した場合、nuxt-i18n 用に設定されたロケールが自動的に追加されます。検索インデックスに異なるロケール (たとえば、1 つだけ) を使用しない限り、使用するロケールを 2 回構成する必要はありません。

Web サイトに検索コンポーネントを追加する

このモジュールには、Web サイトで使用できる検索コンポーネントが含まれています。デフォルトのスロットを使用して、meta prop で渡されたプロパティを使用して検索結果を表示します。

< template >
  < lunr-search : lang = " lang " >
    < template v-slot : default = " { result, index, maxScore, meta } " >
      < nuxt-link : to = " meta . href " >
        {{ meta . title }}
        < span >score: {{ Math . round ( 100 * result . score / maxScore) }}%</ span >
      </ nuxt-link >
    </ template >
  </ lunr-search >
</ template >

< script >
export default {
  components : {
    // Note: 'lunr-module' below is a custom webpack alias and
    // does NOT refer to the folder in node_modules
    LunrSearch : () => import ( ' lunr-module/search ' )
  }
}
</ script >

パフォーマンスに関する考慮事項

ドキュメント参照として整数を使用する

文書参照 (option.ref で定義) は、語幹で抽出されたすべての単語セグメントをリンクするために検索インデックスで使用されます。たとえば、ページパスをドキュメント参照として使用する場合、パス/en/offices/emea/nl/contactを持つページでは、その文字列値がすべての語幹付き単語セグメントのリンクに使用されます。これにより、検索インデックスのサイズが大幅に増加する可能性があるため、数値ドキュメント参照を作成し、 metaプロパティを使用してそのドキュメント参照のページパスを検索インデックスに 1 回だけ追加することをお勧めします。

検索コンポーネントを動的にロードする

Lunr は ES6 モジュールをエクスポートしないため、ツリーシェイクすることはできません。このモジュールを使用すると、バンドル (gzip 形式) に英語以外の他の言語ごとに~8.5KB + ~2KBが追加されます。 Lunr インポートがベンダーバンドルに含まれていないことを確認する動的インポートについては、上記の例を参照してください。

一般に検索インデックスのサイズに注意してください

検索インデックスは json ファイルとして保存されるため、クライアントで解析する必要があります。検索インデックスの json が非常に大きくなると、(モバイル) クライアントで問題が発生する可能性があります。たとえば、iOS 上の Safari では、各トップレベルのエントリポイントの実行時間が最大 10 秒に制限されます。考えられる回避策については、この Lunr.js の問題を参照してください。

参照

オプション

includeコンポーネント

Boolean型
デフォルトのtrue

true の場合、デフォルトの検索コンポーネントが Nuxt プロジェクトに追加されます。

Webpack エイリアスlunr-module/search使用してコンポーネントをインポートできます。

グローバルコンポーネント

Boolean型、 String型
デフォルトはfalse

真実であれば、検索コンポーネントをグローバルにインストールするプラグインがプロジェクトに追加されます

このオプションを設定すると、 includeComponent: trueが意味されます。

デフォルトでは、検索コンポーネントはlunr-searchとして登録されます。この名前を使用したい場合は、このオプションを使用したい名前の文字列に設定できます。

  globalComponent : 'my-global-lunr-search'
. . .
< template >
  < my-global-lunr-search : lang = "lang" class = "my-search" / >
< / template >

css

Boolean型
デフォルトのtrue

検索コンポーネントが含まれている場合、このオプションはデフォルトの CSS スタイルを含めるかどうかを決定します。

デフォルト言語

String列型
デフォルトの'en'

使用するデフォルトの言語。これは、サポートされていないロケールのドキュメントを渡した場合のフォールバック言語でもあります。

言語

型String 、 Array
デフォルトはundefined

検索インデックスを作成する必要がある言語の文字列または配列。

このオプションは冗長に見えるかもしれませんが (つまり、渡されるすべての言語に対して検索インデックスを作成すればよいだけではないでしょうか)、「不正な」ドキュメントが別のインデックスにインデックス付けされるのを防ぐためのチェックを提供します。

言語ステマーマップ

Object型
デフォルト{}

サポートされていない言語からサポートされているステミング言語へのマップ (lunr による) を含むオブジェクト。これを使用して、lunr で (まだ) サポートされていない言語の検索インデックスを構築する場合に、どのステミング言語を使用するかを指定します。

パス

String列型
デフォルトのsearch-index

プロジェクトのビルド時に、作成された検索インデックスが Webpack アセットとして出力されます。このオプションは、 nuxt.publicPathの下のパスを使用するかを決定します。

Nuxt.js とこのモジュールのデフォルト設定では、英語の検索インデックスは/_nuxt/search-index/en.jsonで利用できます。

参照

String列型
デフォルトid

検索インデックス内でこのドキュメントの何を参照として使用するかを指定するドキュメント内のプロパティの名前

フィールド

Array型
デフォルト['title', 'body']

インデックスが作成されるドキュメント内のプロパティ名

プレースホルダーテキスト

String列型
デフォルトのSearch

検索入力フィールドのプレースホルダーに配置されるテキスト。 nuxt-i18n を使用している場合は、キーlunr-module.placeholderTextを使用して翻訳を提供することもできます

ステータスメッセージ

配列Array<String>
デフォルト{ fetching: 'Fetching search index', loading: 'Loading search index', searching: 'Searching...', noresults: 'No results found' }

検索ライフサイクル中に表示されるステータスメッセージ。 nuxt-i18n を使用している場合は、キーlunr-module.${key}を使用して翻訳を提供することもできます。たとえば、 lunr-module.noresultsを使用して、結果が見つからないステータスの翻訳を提供します。