So fügen Sie Lunr -Suche zu Ihrer Gatsby -Website hinzu

Die Jamstack -Architektur gewinnt erhebliche Antrieb für die Website -Entwicklung. Haben Sie Gatsby, Nuxt oder Gridsome erkundet? Ihre Benutzerfreundlichkeit und vorgefertigte Funktionen sind oft beeindruckend. Suchfunktionalität ist jedoch nicht immer eine integrierte Funktion, die eine Herausforderung für inhaltsreiche Websites darstellt. Können wir robuste Suche ohne serverseitige Komponenten implementieren?

Jamstack fehlt von Natur aus integrierte Suchfunktionen. Dies erfordert sorgfältige Berücksichtigung und Implementierung. Während Optionen vorhanden sind, wie beispielsweise die Such-AS-Service von Algolia (mit Einschränkungen für freie Pläne) oder die Suche von WordPress mit WPGraphQL und Apollo Client nutzen, konzentriert sich dieser Artikel auf eine clientseitige Lösung.

Wir erstellen einen Suchindex und integrieren die Suche in eine Gatsby -Site mit Lunr.js, einer leichten JavaScript -Bibliothek, die eine erweiterbare und anpassbare Suche ohne externe Serverabhängigkeiten bietet. Wir haben es kürzlich auf Tartanify.com verwendet, um eine Funktion "Suche nach Tartan-Namen" hinzuzufügen und Herausforderungen im Zusammenhang mit persistierender Echtzeit-Suche zu überwinden. In diesem Artikel werden diese Herausforderungen und Lösungen beschrieben.

Erste Schritte

Der Einfachheit halber werden wir den offiziellen Gatsby -Blog -Starter verwenden. Dies stellt viele Aspekte der Erstellung der statischen Website ab. Mit folgen:

 Gatsby New Gatsby-Starter-blog https://github.com/gatsbyjs/gatsbystarter-blog
CD Gatsby-Starter-Blog
Gatsby entwickelt sich

Dies erstellt einen kleinen Blog mit drei Beiträgen, die unter http://localhost:8000/ zugänglich sind. Inspizieren http://localhost:8000/__graphql enthüllt die verfügbaren Daten.

Implementierung eines umgekehrten Index mit Lunr.js

Lunr verwendet einen invertierten Index auf Rekordebene. Dadurch werden jedes Wort auf der Website zu seinem Standort (Seitenpfade) geordnet. Wir bestimmen, welche Felder (Titel, Inhalt, Beschreibung usw.) Indizierungsschlüsselwörter bereitstellen.

Für unseren Blog werden wir Titel und Inhalte indexieren. Die Titel sind unkompliziert, aber der Inhalt erfordert die Reinigung. Die Verwendung von rawMarkdownBody war zunächst aufgrund der Markdown -Syntax als problematisch. Wir verwenden das html -Feld und das striptags -Paket, um HTML -Tags zu entfernen. Weitere Informationen finden Sie in der Lunr -Dokumentation.

Hier ist der Lunr-Indexerstellung und der Bevölkerungsausschnitt (später in gatsby-node.js ):

 const index = lunr (function () {
  this.ref ('Slug')
  this.field ('title')
  this.field ('Inhalt')
  für (const doc of dokumente) {
    this.add (doc)
  }
})

documents sind eine Reihe von Objekten, die jeweils slug , title und content haben:

 {
  Slug: '/Post-Slug/',
  Titel: 'Beitrag Titel',
  Inhalt: 'Inhalt mit allen HTML -Tags ausgestattet posten.'
}

Wir definieren einen eindeutigen Dokumentschlüssel ( slug ) und zwei Felder ( title und content ). Alle Dokumente werden iterativ hinzugefügt.

Erstellen des Index in gatsby-node.js

Installieren Sie zunächst die erforderlichen Bibliotheken:

 Garn Fügen Sie Lunr Graphql-Typ-Json-Striptags hinzu

Ändern Sie als nächstes gatsby-node.js . Diese Datei wird während des Erstellens von Site ausgeführt, sodass wir die Indexerstellung hinzufügen können. Wir werden die Gatsby -API createResolvers verwenden, um ein neues Root -Feld, LunrIndex , zu erstellen.

Die Datenspeicher- und Abfragefunktionen von Gatsby werden über GraphQL -Feld Resolver freigelegt. getAllNodes ruft Knoten eines bestimmten Typs ab:

 / * gatsby-node.js */
// ... (Importe)

exports.createSolvers = ({cache, createResolvers}) => {
  CreateResolvers ({{
    Abfrage: {
      Lunrindex: {
        Typ: GraphQljsonObject,
        Auflösung: (Quelle, Argumente, Kontext, Info) => {
          const blogodes = context.nodemodel.getAllnodes ({type: `markdownremark`});
          const type = info.schema.gettype (`markdownremark`);
          return createIndex (Blognodes, Typ, Cache);
        },
      },
    },
  });
};

// ... (Erstellen SieDex -Funktion)

Die Funktion createIndex verwendet den Lunr -Snippet:

 / * gatsby-node.js */
// ... (Importe)

const createIndex = async (blogdes, type, cache) => {
  // ... (Implementierung zum Abrufen und Prozessdaten, einschließlich Caching)
};

(Die vollständige Erstellung createIndex , einschließlich Datenabrufen, Verarbeitung und Caching, wird für die Kürze weggelassen, ist jedoch für eine funktionale Implementierung von entscheidender Bedeutung. Die ursprüngliche Antwort liefert dieses Detail.) Aus diesem Grund wird sichergestellt, dass der Index nur bei Bedarf wieder aufgebaut wird.

Hinzufügen der Suchformularkomponente

Erstellen Sie eine Suchformularkomponente ( src/components/search-form.js ):

 // ... (Implementierung von Suchformularkomponenten)

(Die vollständige Komponenten -Implementierung wird für die Kürze weggelassen, ist jedoch in der ursprünglichen Antwort aufgeführt.) Diese Komponente übernimmt Formulareingabe und Eingabedändere und navigiert mit dem Parameter /search .

Erstellen der Suchergebnisseite

Erstellen Sie eine Suchergebnisseite ( src/pages/search.js ):

 // ... (Implementierung der Suchergebnisse)

(Die vollständige Seitenimplementierung wird für die Kürze weggelassen, ist jedoch in der ursprünglichen Antwort aufgeführt.) Diese Seite verwendet die LunrIndex -Daten, um Suchergebnisse anzuzeigen.

Persistenter Such -Widget (Tartanify.com Beispiel)

Das Beispiel tartanify.com zeigt ein anhaltendes Sofort -Such -Widget. Die Indexerstellung ähnelt dem Blog -Beispiel, aber einfacher:

 // ... (Indexerstellung für tartanify.com)

(Die vollständige Implementierung wird für die Kürze weggelassen, ist jedoch in der ursprünglichen Antwort aufgeführt.) Der Schlüsselunterschied ist die sofortige Suchfunktion, die durch Eingabeänderungen und nicht die Einreichung von Formularen ausgelöst wird. Der useStaticQuery -Haken wird zum Abheben von Daten verwendet.

Das Widget anhaltend machen

Um das Such -Widget über Seitenänderungen hinweg aufrechtzuerhalten, verwenden wir Gatsbys wrapPageElement -API:

 // gatsby-browser.js
// ... (WrappageElement -Implementierung)

(Die vollständige Implementierung ist in der ursprünglichen Antwort aufgeführt.) Dadurch wird der Seiteninhalt mit dem Such -Widget verarbeitet, um die Beharrlichkeit zu gewährleisten.

Benutzerdefinierte Suchanfragen Verbesserungen

Die ursprünglichen Antwortdetails verbessert die Suchabfrage mithilfe der query von Lunr, um Fuzzy -Übereinstimmungen, Wildcards und Boolesche Logik für bessere Suchergebnisse zu verarbeiten. Dieser Abschnitt verbessert die Sucherfahrung erheblich.

Abschluss

Das Implementieren von Suchfunktionen in Jamstack -Websites ist erreichbar und kann die Benutzererfahrung erheblich verbessern. Während der kundenseitigen Lösungen wie Lunr.js scheinbar im Widerspruch zu den staatenlosen Natur von Jamstack leistungsstarke und flexible Alternativen bieten. Die in diesem Artikel beschriebene sorgfältige Überlegung und Implementierung unterstreichen das Potenzial, durch nachdenkliches Design und Entwicklung eine überlegene Benutzererfahrung zu schaffen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Lunr -Suche zu Ihrer Gatsby -Website hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!