Téléchargement lunr module - Téléchargement du code source lunr module

lunr module

Autre code source

1.0.0

Télécharger

module lunr.js

Recherche en texte intégral avec index pré-construits pour Nuxt.js à l'aide de lunr.js

Pendant la phase de construction de Nuxt.js, vous pouvez ajouter des documents au générateur d'index de recherche en appelant le hook nuxt lunr:document . Si vous avez configuré et transmis des paramètres régionaux pris en charge dans le document, l'index sera construit à l'aide du stemmer Lunr pour la langue spécifiée. Comme l'index de recherche lunr ne contient que des références à vos documents, vous pouvez éventuellement transmettre un méta-accessoire avec le document qui sera également ajouté à l'index de recherche.

Notes de version

Installation

Ajoutez la dépendance @nuxtjs/lunr-module à votre projet

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

Ajoutez @nuxtjs/lunr-module à la section modules de nuxt.config.js

 {
  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'
        ]
      } */
    }
  ]
}

Documentation

Ajout de documents à l'index de recherche

Ajoutez des documents en appelant le hook nuxt lunr:documents comme suit :

 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
} )

Prise en charge des paramètres régionaux

En configurant les options locales, vous pouvez indiquer pour quelles langues prises en charge un index de recherche doit être créé. Si vous transmettez un autre paramètre régional avec un document, il sera ajouté à l'index de recherche defaultLanguage (et un avertissement sera imprimé).

Plusieurs langues équivalent à plusieurs index de recherche

L'anglais est pris en charge par défaut dans Lunr, lorsque vous n'avez que des documents en anglais, vous n'avez pas besoin de configurer ou de transmettre de paramètres régionaux.

Langue et paramètres régionaux

Un paramètre régional peut consister uniquement en une langue ou inclure un territoire, vous pouvez utiliser l'un ou l'autre. Ainsi, la langue (par exemple nl ) et l'inclusion du territoire (par exemple nl_NL ) fonctionneront

intégration nuxt-i18n

Si ce module détecte que votre projet utilise nuxt-i18n, les paramètres régionaux configurés pour nuxt-i18n seront automatiquement ajoutés. Vous n'avez pas besoin de configurer les paramètres régionaux que vous utilisez deux fois, sauf si vous souhaitez utiliser des paramètres régionaux différents (par exemple un seul) pour l'index de recherche.

Ajoutez un composant de recherche à votre site Web

Ce module comprend un composant de recherche que vous pouvez utiliser sur votre site Web. Utilisez son emplacement par défaut pour afficher vos résultats de recherche en utilisant les propriétés transmises dans la méta-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 >

Considérations sur les performances

Utiliser un entier comme référence de document

La référence du document (définie par option.ref) est utilisée dans l'index de recherche pour relier tous les segments de mots à racine. Si vous utilisez par exemple le chemin de la page comme référence du document, alors pour une page avec le chemin /en/offices/emea/nl/contact cette valeur de chaîne sera utilisée pour lier tous les segments de mots à racine. Cela pourrait augmenter considérablement la taille de l'index de recherche, il est donc recommandé de créer une référence de document numérique et d'utiliser la propriété meta pour ajouter le chemin de page de cette référence de document une seule fois à l'index de recherche.

Charger le composant de recherche dynamiquement

Lunr n'exporte pas les modules ES6 et ne peut pas être secoué par une arborescence. L'utilisation de ce module ajoute ~8.5KB + ~2KB pour toutes les autres langues, puis l'anglais, à votre bundle (gzippé). Voir l'exemple ci-dessus pour une importation dynamique qui garantit que les importations Lunr ne sont pas incluses dans votre offre groupée de fournisseurs.

Gardez un œil sur la taille de l’index de recherche en général

L'index de recherche est enregistré sous forme de fichier json et doit donc être analysé sur le client. Si le json de votre index de recherche devient très volumineux, cela pourrait poser un problème sur les clients (mobiles). Par exemple, Safari sur iOS limite l'exécution de chaque point d'entrée de niveau supérieur pendant 10 secondes maximum. Consultez ce problème Lunr.js pour une solution de contournement possible.

Référence

Possibilités

inclure un composant

tapez Boolean
true par défaut

Si vrai, le composant de recherche par défaut sera ajouté à votre projet Nuxt

Vous pouvez importer le composant en utilisant l'alias webpack lunr-module/search

composant global

tapez Boolean , String
false par défaut

Si c'est vrai, un plugin sera ajouté à votre projet qui installera le composant de recherche globalement.

La définition de cette option implique includeComponent: true

Par défaut, le composant de recherche sera enregistré sous le nom lunr-search . Si vous souhaitez ce nom, vous pouvez définir cette option sur une chaîne avec le nom que vous souhaitez utiliser.

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

css

tapez Boolean
true par défaut

Si le composant de recherche est inclus, cette option détermine si les styles CSS par défaut doivent être inclus ou non.

langue par défaut

tapez String
par défaut 'en'

La langue par défaut à utiliser. C'est également la langue de secours si vous transmettez un document avec une langue non prise en charge.

langues

tapez String , Array
par défaut undefined

Une chaîne ou un tableau des langues pour lesquelles un index de recherche doit être créé.

Bien que cette option puisse paraître redondante (c'est-à-dire pourquoi ne pas simplement créer un index de recherche pour chaque langue transmise), elle fournit une vérification pour empêcher les documents « malveillants » d'être indexés dans un index séparé.

langueStemmerCarte

tapez Object
défaut {}

Un objet qui contient une carte des langues non prises en charge vers les langues dérivées prises en charge (par lunr). Utilisez ceci pour spécifier quelle langue radicale doit être utilisée si vous souhaitez créer un index de recherche pour une langue qui n'est pas (encore) prise en charge par lunr.

chemin

tapez String
search-index par défaut

Lors de la construction de votre projet, les index de recherche créés seront émis en tant qu'actifs Webpack. Cette option détermine le chemin sous nuxt.publicPath qui doit être utilisé.

Avec les configurations par défaut pour Nuxt.js et ce module, l'index de recherche en anglais est disponible sous /_nuxt/search-index/en.json

réf

tapez String
id par défaut

Le nom de la propriété de votre document qui précise quelle référence doit être utilisée pour ce document dans l'index de recherche

champs

tapez Array
par défaut ['title', 'body']

Les noms de propriétés dans votre document qui seront indexés

espace réservéTexte

tapez String
Search par défaut

Le texte qui est placé dans l'espace réservé du champ de saisie de recherche. Si vous utilisez nuxt-i18n, vous pouvez également fournir une traduction avec la clé lunr-module.placeholderText

Messages d'état

tapez Array<String>
default { fetching: 'Fetching search index', loading: 'Loading search index', searching: 'Searching...', noresults: 'No results found' }

Les messages d'état qui sont affichés pendant le cycle de vie de la recherche. Si vous utilisez nuxt-i18n, vous pouvez également fournir une traduction avec la clé lunr-module.${key} . Par exemple, utilisez lunr-module.noresults pour fournir une traduction du statut aucun résultat trouvé.

Crochets (écoute)

utilisez nuxt.callHook(<name>, <arg>) si vous souhaitez utiliser ces hooks

lundi:document

argument : ({ locale?, document, meta? })

Le hook principal utilisé pour ajouter des documents à l'index de recherche. Vous devez passer un objet comme décrit. Les deux paramètres régionaux et méta sont facultatifs. Si aucune locale n'est transmise, la defaultLanguage sera utilisée

Crochets (émetteurs)

utilisez nuxt.hook(<name>, <callback>) si vous souhaitez utiliser ces hooks. La fonction de rappel reçoit les arguments répertoriés

lundi: index: avantCréer

argument : ({ locale, builder })

Utilisez ce hook si vous souhaitez par exemple enregistrer des plugins Lunr personnalisés

Ce hook est appelé après l'instanciation du générateur lunr mais avant que les plugins de langage n'aient été ajoutés ou que des références et des champs ne soient définis