lunr module

lunr.js-Modul

Volltextsuche mit vorgefertigten Indizes für Nuxt.js unter Verwendung von lunr.js

Während der Build-Phase von Nuxt.js können Sie Dokumente zum Suchindex-Builder hinzufügen, indem Sie den Nuxt-Hook lunr:document aufrufen. Wenn Sie ein unterstütztes Gebietsschema konfiguriert und im Dokument übergeben haben, wird der Index mithilfe des lunr-Stemmers für die angegebene Sprache erstellt. Da der lunr-Suchindex nur Verweise auf Ihre Dokumente enthält, können Sie optional eine Meta-Requisite zusammen mit dem Dokument übergeben, die ebenfalls dem Suchindex hinzugefügt wird.

Versionshinweise

Aufstellen

1. Fügen Sie Ihrem Projekt die @nuxtjs/lunr-module Abhängigkeit hinzu

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

2. Fügen Sie @nuxtjs/lunr-module zum Abschnitt modules von nuxt.config.js hinzu

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

Dokumentation

Dokumente zum Suchindex hinzufügen

Fügen Sie Dokumente hinzu, indem Sie den Nuxt-Hook lunr:documents wie folgt aufrufen:

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

Lokale Unterstützung

Durch die Konfiguration der Gebietsschemaoptionen können Sie angeben, für welche unterstützten Sprachen ein Suchindex erstellt werden soll. Wenn Sie mit einem Dokument ein anderes Gebietsschema übergeben, wird es zum Suchindex defaultLanguage hinzugefügt (und es wird eine Warnung ausgegeben).

Mehrere Sprachen bedeuten mehrere Suchindizes

Englisch wird in Lunr standardmäßig unterstützt. Wenn Sie nur über englische Dokumente verfügen, müssen Sie kein Gebietsschema konfigurieren oder übergeben.

Sprache vs. Gebietsschema

Ein Gebietsschema kann nur aus einer Sprache bestehen oder ein Gebiet umfassen. Sie können beides verwenden. Es funktioniert also sowohl nur die Sprache (z. B. nl ) als auch das Einbeziehen des Gebiets (z. B. nl_NL ).

nuxt-i18n-Integration

Wenn dieses Modul erkennt, dass Ihr Projekt nuxt-i18n verwendet, werden die konfigurierten Gebietsschemas für nuxt-i18n automatisch hinzugefügt. Sie müssen die von Ihnen verwendeten Gebietsschemas nicht zweimal konfigurieren, es sei denn, Sie möchten unterschiedliche Gebietsschemas (z. B. nur eines) für den Suchindex verwenden.

Fügen Sie Ihrer Website eine Suchkomponente hinzu

Dieses Modul enthält eine Suchkomponente, die Sie auf Ihrer Website verwenden können. Verwenden Sie den Standard-Slot, um Ihre Suchergebnisse mithilfe der in der Meta-Requisite übergebenen Eigenschaften anzuzeigen

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

Leistungsüberlegungen

Verwenden Sie eine Ganzzahl als Dokumentreferenz

Die Dokumentreferenz (definiert durch option.ref) wird im Suchindex verwendet, um alle Wortstammsegmente zu verknüpfen. Wenn Sie beispielsweise den Seitenpfad als Dokumentreferenz verwenden würden, wird dieser Zeichenfolgenwert für eine Seite mit dem Pfad /en/offices/emea/nl/contact verwendet, um alle Wortstammsegmente zu verknüpfen. Dadurch könnte sich die Größe des Suchindex erheblich erhöhen. Daher wird empfohlen, einen numerischen Dokumentverweis zu erstellen und die meta Eigenschaft zu verwenden, um den Seitenpfad für diesen Dokumentverweis nur einmal zum Suchindex hinzuzufügen.

Suchkomponente dynamisch laden

Lunr exportiert keine ES6-Module und kann nicht im Tree-Shake-Modus ausgeführt werden. Durch die Verwendung dieses Moduls werden ~8.5KB + ~2KB für jede andere Sprache außer Englisch zu Ihrem Paket hinzugefügt (gzippt). Sehen Sie sich das obige Beispiel für einen dynamischen Import an, der sicherstellt, dass die LUNR-Importe nicht in Ihrem Anbieterpaket enthalten sind

Behalten Sie die Größe des Suchindex im Allgemeinen im Auge

Der Suchindex wird als JSON-Datei gespeichert und muss daher auf dem Client geparst werden. Wenn der JSON-Wert Ihres Suchindex sehr groß wird, könnte dies auf (mobilen) Clients ein Problem darstellen. Beispielsweise beschränkt Safari unter iOS die Ausführung jedes Einstiegspunkts der obersten Ebene auf maximal 10 Sekunden. Eine mögliche Problemumgehung finden Sie in diesem Lunr.js-Problem.

Referenz

Optionen

includeComponent

• Geben Sie Boolean
• Standardmäßig true

Wenn „true“, wird die Standardsuchkomponente zu Ihrem Nuxt-Projekt hinzugefügt

Sie können die Komponente mit dem Webpack-Alias lunr-module/search importieren

globaleKomponente

• Typ Boolean , String
• Standardmäßig false

Wenn dies der Fall ist, wird Ihrem Projekt ein Plugin hinzugefügt, das die Suchkomponente global installiert

Das Festlegen dieser Option impliziert includeComponent: true

Standardmäßig wird die Suchkomponente als lunr-search registriert. Wenn Sie diesen Namen wünschen, können Sie diese Option auf eine Zeichenfolge mit dem Namen setzen, den Sie verwenden möchten

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

CSS

• Geben Sie Boolean
• Standardmäßig true

Wenn die Suchkomponente enthalten ist, bestimmt diese Option, ob die Standard-CSS-Stile enthalten sein sollen oder nicht

Standardsprache

• Typ String
• 'en'

Die zu verwendende Standardsprache. Dies ist auch die Ersatzsprache, wenn Sie ein Dokument mit einem nicht unterstützten Gebietsschema übergeben

Sprachen

• Typ String , Array
• Standardmäßig undefined

Eine Zeichenfolge oder ein Array der Sprachen, für die ein Suchindex erstellt werden muss.

Auch wenn diese Option möglicherweise überflüssig erscheint (z. B. warum nicht einfach einen Suchindex für jede übergebene Sprache erstellen), bietet sie eine Prüfung, um zu verhindern, dass „unerlaubte“ Dokumente in einem separaten Index indiziert werden.

languageStemmerMap

• Geben Sie Object
• Standard {}

Ein Objekt, das eine Zuordnung nicht unterstützter Sprachen zu unterstützten Wortstammsprachen (von lunr) enthält. Geben Sie hiermit an, welche Stammsprache verwendet werden soll, wenn Sie einen Suchindex für eine Sprache erstellen möchten, die von lunr (noch) nicht unterstützt wird.

Weg

• Typ String
• search-index

Beim Erstellen Ihres Projekts werden die erstellten Suchindizes als Webpack-Assets ausgegeben. Diese Option bestimmt den Pfad unter nuxt.publicPath der verwendet werden soll.

Mit Standardkonfigurationen für Nuxt.js und dieses Modul ist der englische Suchindex unter /_nuxt/search-index/en.json verfügbar

ref

• Typ String
• Standard id

Der Name der Eigenschaft in Ihrem Dokument, die angibt, was als Referenz für dieses Dokument im Suchindex verwendet werden soll

Felder

• Geben Sie Array
• default ['title', 'body']

Die Eigenschaftsnamen in Ihrem Dokument, die indiziert werden

PlatzhalterText

• Typ String
• Search

Der Text, der in den Platzhalter des Sucheingabefelds eingefügt wird. Wenn Sie nuxt-i18n verwenden, können Sie auch eine Übersetzung mit dem Schlüssel lunr-module.placeholderText bereitstellen

statusMessages

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

Die Statusmeldungen, die während des Suchlebenszyklus angezeigt werden. Wenn Sie nuxt-i18n verwenden, können Sie auch eine Übersetzung mit dem Schlüssel lunr-module.${key} bereitstellen. Verwenden Sie beispielsweise lunr-module.noresults um eine Übersetzung für den Status „Keine Ergebnisse gefunden“ bereitzustellen.

Hooks (Hören)

Verwenden Sie nuxt.callHook(<name>, <arg>) wenn Sie diese Hooks verwenden möchten

lunr:Dokument

• arg: ({ locale?, document, meta? })

Der Haupt-Hook, der zum Hinzufügen von Dokumenten zum Suchindex verwendet wird. Sie müssen ein Objekt wie beschrieben übergeben. Sowohl das Gebietsschema als auch das Meta sind optional. Wenn kein Gebietsschema übergeben wird, wird die defaultLanguage verwendet

Haken (Emittierend)

Verwenden Sie nuxt.hook(<name>, <callback>) wenn Sie diese Hooks verwenden möchten. Die Callback-Funktion empfängt die aufgelisteten Argumente

lunr:index:beforeCreate

• arg: ({ locale, builder })

Verwenden Sie diesen Hook, wenn Sie beispielsweise benutzerdefinierte LUNR-Plugins registrieren möchten

Dieser Hook wird aufgerufen, nachdem der Lunr-Builder instanziiert wurde, aber bevor Sprach-Plugins hinzugefügt oder Referenzen und Felder festgelegt wurden

lunr:index:erstellt

• arg: ({ locale, builder })

Verwenden Sie diesen Hook, wenn Sie beispielsweise zusätzliche Dokumente zu einem Index hinzufügen möchten

Dieser Hook wird aufgerufen, wenn der Lunr-Builder eingerichtet wurde, unmittelbar bevor die Dokumente zum Index hinzugefügt werden.

lunr:index:fertig

• arg: ({ locale, builder, index })

Verwenden Sie diesen Hook, wenn Sie vor dem Exportieren mit dem Index interagieren möchten

Dieser Hook wird aufgerufen, unmittelbar bevor der Index als JSON-Objekt exportiert wird

lunr:asset

• arg: ({ locale, json })

Verwenden Sie diesen Hook, wenn Sie den JSON bearbeiten möchten, der als Suchindex für das Gebietsschema ausgegeben wird

Dieser Hook wird während der Webpack-Kompilierung aufgerufen, kurz bevor der Suchindex für die Ausgabe als Asset vorbereitet wird

Entwicklung

1. Klonen Sie dieses Repository
2. Installieren Sie Abhängigkeiten mit yarn install oder npm install
3. Starten Sie den Entwicklungsserver mit npm run dev

Lizenz

MIT-Lizenz

Copyright (c) pimlie