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!