So erhalten Sie die aktuelle Seiten -URL in Gatsby

Diese scheinbar einfache Aufgabe ließ mich ein paar Stunden mit dem Kopf kratzten, während ich auf meiner Website arbeitete. Wie sich herausstellt, ist es nicht so einfach, die aktuelle Seiten -URL in Gatsby zu erhalten, wie Sie vielleicht denken, aber auch nicht so kompliziert zu verstehen.

Schauen wir uns einige Methoden an, um dies zu erreichen. Aber zuerst fragen Sie sich vielleicht, warum wir sogar so etwas tun wollen.

Warum Sie vielleicht die aktuelle URL benötigen

Bevor wir uns mit dem Wie eingehen, beantworten wir zunächst die größere Frage: Warum möchten Sie die URL der aktuellen Seite erhalten? Ich kann ein paar Anwendungsfälle anbieten.

Meta -Tags

Das erste Offensichtliche, für das Sie die aktuelle URL haben möchten, sind Meta -Tags im Dokumentkopf:

 <link rel="Canonical" href="%7Burl%7D">
<meta property="og: url" content="{url}">

Soziales Teilen

Ich habe es auf mehreren Websites gesehen, auf denen ein Link zur aktuellen Seite neben der Freigabe von Schaltflächen angezeigt wird. So etwas (gefunden auf dem kreativen Markt)

Styling

Dieser ist weniger offensichtlich, aber ich habe es ein paar Mal mit gestylerischen Komponenten verwendet. Sie können verschiedene Stile basierend auf bestimmten Bedingungen rendern. Eine dieser Bedingungen kann ein Seitenweg sein (dh ein Teil der URL nach dem Namen der Website). Hier ist ein kurzes Beispiel:

 Import reagieren aus "reagieren";
Import gestylt aus "Stilkomponenten";

const Layout = ({Pfad, Kinder}) => (
  <styledlayout path="{path}">
    {Kinder}
  </styledlayout>
);
    
const styledLayout = styled.main`
  Hintergrundfarbe: $ {({path}) => (path === '/'? '#fff': '#000')};
`;

Standardlayout exportieren;

Hier habe ich eine gestaltete Layoutkomponente erstellt, die auf dem Pfad eine andere Hintergrundfarbe hat.

Diese Liste von Beispielen zeigt nur die Idee und ist keineswegs umfassend. Ich bin sicher, dass es mehr Fälle gibt, in denen Sie die aktuelle Seiten -URL erhalten möchten. Wie bekommen wir es?

Verstehe Build Time vs. Laufzeit

Nicht so schnell! Bevor wir zu den tatsächlichen Methoden und Code -Snippets kommen, möchte ich einen letzten Stopp machen und kurz ein paar Kernkonzepte von Gatsby erklären.

Das erste, was wir verstehen müssen, ist, dass Gatsby unter anderem ein statischer Site -Generator ist. Das bedeutet, dass es statische Dateien erstellt (die normalerweise HTML und JavaScript sind). Es gibt keinen Server und keine Datenbank auf der Produktionswebsite. Alle Informationen (einschließlich der aktuellen Seiten -URL) müssen aus anderen Quellen gezogen oder während der Bauzeit oder Laufzeit generiert werden, bevor sie in das Markup einfügen.

Das führt uns zu dem zweiten wichtigen Konzept, das wir verstehen müssen: Zeit und Laufzeit erstellen. Ich ermutige Sie, die offizielle Dokumentation von Gatsby darüber zu lesen, aber hier ist meine Interpretation.

Die Laufzeit ist, wenn eine der statischen Seiten im Browser geöffnet wird. In diesem Fall hat die Seite Zugriff auf alle wunderbaren Browser -APIs, einschließlich der Fenster -API, die unter anderem die aktuelle Seiten -URL enthält.

Eine Sache, die leicht zu verwechseln ist, insbesondere wenn Sie mit Gatsby beginnen, ist, dass sich das Ausführen von Gatsby im Terminal im Entwicklungsmodus den Browser für Sie aufrückt. Das bedeutet, dass alle Verweise auf das Fensterobjekt funktionieren und keine Fehler auslösen.

Erstellen Sie die Zeit , wenn Sie sich entwickelt haben, und fordern Sie Gatsby auf, endgültige optimierte Assets mit dem Befehl gatsby build zu generieren. Während der Bauzeit existiert der Browser nicht. Dies bedeutet, dass Sie das Fensterobjekt nicht verwenden können.

Hier kommt der a-ha! Moment. Wenn Builds aus dem Browser isoliert sind und es keine Server oder Datenbank gibt, in der wir die URL erhalten können, wie soll Gatsby wissen, welcher Domain -Name verwendet wird? Das ist die Sache - es kann nicht! Sie können den Schnecken oder den Pfad der Seite erhalten, aber Sie können einfach nicht sagen, was die Basis -URL ist. Sie müssen es angeben.

Dies ist ein sehr grundlegendes Konzept, aber wenn Sie mit jahrelanger WordPress -Erfahrung frisch eingehen, kann es einige Zeit dauern, bis diese Informationen eintauchen. Sie wissen, dass Gatsby serverlos ist und alle Momente wie diese Sie erkennen: Es gibt keinen Server.

Jetzt, da wir das aussortiert haben, springen wir zu den tatsächlichen Methoden, um die URL der aktuellen Seite zu erhalten.

Methode 1: Verwenden Sie die HREF -Eigenschaft des Fensters.locationsobjekts

Diese erste Methode ist nicht spezifisch für Gatsby und kann in so ziemlich jeder JavaScript -Anwendung im Browser verwendet werden. Sehen Sie, Browser ist hier das Schlüsselwort.

Nehmen wir an, Sie erstellen eine dieser gemeinsamen Komponenten mit einem Eingabefeld, das die URL der aktuellen Seite enthalten muss. So können Sie das tun:

 Import reagieren aus "reagieren";

const foo = () => {
  const url = Typeof Fenster! == 'undefined'? window.location.href: '';

  zurückkehren (
    <eingabe type="text" readonly value="{url}"></eingabe>
  );
};

Standard foo exportieren;

Wenn das Fensterobjekt existiert, erhalten wir die HREF -Eigenschaft des Standortobjekts, das ein Kind des Fensters ist. Wenn nicht, geben wir der URL -Variablen einen leeren Zeichenfolgenwert an.

Wenn wir es ohne den Scheck machen und es so schreiben:

 const url = window.location.href;

… Der Build fällt mit einem Fehler fehl, der so etwas aussieht:

 Fehlgeschlagenes Gebäude statischer HTML für Seiten - 2,431s
Fehler #95312 
"Fenster" ist während des serverseitigen Renderings nicht verfügbar.

Wie ich bereits erwähnt habe, geschieht dies, weil der Browser während der Bauzeit nicht existiert. Das ist ein großer Nachteil dieser Methode. Sie können es nicht verwenden, wenn die URL auf der statischen Version der Seite vorhanden ist.

Aber es gibt auch einen großen Vorteil! Sie können auf das Fensterobjekt aus einer Komponente zugreifen, die tief in anderen Komponenten verschachtelt ist. Mit anderen Worten, Sie müssen die URL -Prop nicht von übergeordneten Komponenten bohren.

Methode 2: Holen Sie sich die HREF -Eigenschaft von Standortdaten aus Props

Jede Seite und Vorlagenkomponente in Gatsby verfügt über eine Standort -Requisite, die Informationen zur aktuellen Seite enthält. Im Gegensatz zu Window.Location ist diese Requisite auf allen Seiten jedoch vorhanden.

Zitieren von Gatsby Docs:

Das Tolle ist, dass Sie erwarten können, dass die Standort -Requisite auf jeder Seite Ihnen zur Verfügung steht.

Aber hier kann es einen Haken geben. Wenn Sie neu in Gatsby sind, protokollieren Sie diese Requisite an der Konsole und bemerken, dass sie so ziemlich identisch aussieht. Wie ist das möglich? Nun, das ist es nicht. Die HREF -Prop ist nur während der Laufzeit da.

Das Schlimmste daran ist, dass die Nutzung von location.reif direkt ohne zuerst zu überprüfen, ob es vorhanden ist, wenn er während der Bauzeit einen Fehler auslöst.

All dies bedeutet, dass wir uns darauf verlassen können, dass die Standort -Requisite auf jeder Seite ist, aber nicht erwarten kann, dass die HREF -Eigenschaft während der Bauzeit aufweist. Achten Sie darauf und verwenden Sie diese Methode nicht für kritische Fälle, in denen Sie die URL in der statischen Version der Seite im Markup befinden müssen.

Schreiben wir also das vorherige Beispiel mit dieser Methode neu:

 Import reagieren aus "reagieren";

const page = ({location}) => {
  const url = location.href? Ort.href: '';

  zurückkehren (
    <eingabe type="text" readonly value="{url}"></eingabe>
  );
};

Standardseite exportieren;

Dies muss eine Seite mit oberster Ebene oder Vorlagenkomponente sein. Sie können es nicht einfach nirgendwo importieren und erwarten, dass es funktioniert. Standort -Requisite wird undefiniert.

Wie Sie sehen können, ist diese Methode dem vorherigen ziemlich ähnlich. Verwenden Sie es für Fälle, in denen die URL nur während der Laufzeit benötigt wird.

Aber was ist, wenn Sie eine vollständige URL im Aufmerksamkeit einer statischen Seite haben müssen? Gehen wir mit der dritten Methode fort.

Methode 3: Generieren Sie die aktuelle Seiten -URL mit der Pfadname -Eigenschaft aus Standortdaten

Wie wir zu Beginn dieses Beitrags besprochen haben, müssen Sie die Basis -URL für die Website irgendwo angeben, wenn Sie die vollständige URL in die statischen Seiten angeben und irgendwie während der Bauzeit erhalten. Ich werde dir zeigen, wie das geht.

Beispielsweise erstelle ich ein tag im Header. Es ist wichtig, die vollständige URL der Seite zu haben, bevor die Seite den Browser trifft. Andernfalls sehen Suchmaschinen und Site -Scrapers das leere HREF -Attribut, das inakzeptabel ist.

Hier ist der Plan:

1. Fügen Sie die SiteUrl-Eigenschaft in Sitemetadata in gatsby-config.js hinzu.
2. Erstellen Sie einen statischen Abfragehaken, um Sitemetadata in jeder Komponente abzurufen.
3. Verwenden Sie diesen Haken, um Siteurl zu erhalten.
4. Kombinieren Sie es mit dem Pfad der Seite und fügen Sie es dem Markup hinzu.

Lassen Sie uns jeden Schritt nach unten brechen.

Fügen Sie die SiteUrl-Eigenschaft in Sitemetadata in gatsby-config.js hinzu

Gatsby verfügt über eine Konfigurationsdatei namens Gatsby-config.js, mit der globale Informationen über die Website im Sitemetadata-Objekt gespeichert werden können. Das funktioniert für uns, also werden wir diesem Objekt Siteurl hinzufügen:

 module.exports = {
  Sitemetadata: {
    Titel: 'Dmitry Mayorov',
    Beschreibung: "Dmitry ist ein Front-End-Entwickler, der coole Websites baut."
    Autor: '@dmtrmrv',
    SiteUrl: 'https://dmtrmrv.com',
  }
};

Erstellen Sie einen statischen Abfragehaken, um Sitemetadata in jeder Komponente abzurufen

Als nächstes brauchen wir eine Möglichkeit, Sitemetadata in unseren Komponenten zu verwenden. Zum Glück hat Gatsby eine statische API, die es uns ermöglicht, genau das zu tun. Sie können den UsestaticQuery -Hook direkt in Ihren Komponenten verwenden, aber ich bevorzuge es, eine separate Datei für jede statische Abfrage zu erstellen, die ich auf der Website verwende. Dies erleichtert den Code leichter zu lesen.

Erstellen Sie dazu eine Datei namens Use-site-metadata.js in einem Hooks-Ordner im SRC-Ordner Ihrer Website und kopieren und fügen Sie den folgenden Code ein.

 Import {usestaticQuery, GraphQl} aus 'Gatsby';

const useItemetadata = () => {
  const {Site} = usestaticQuery (
  GraphQl`
    Abfrage {
    Website {
      Sitemetadata {
      Titel
      Beschreibung
      Autor
      Siteurl
      }
    }
    }
  `,
  );
  Rückkehr Site.Sitemetadata;
};

Exportieren Sie Standard -useItemetadata;

Überprüfen Sie, ob alle Eigenschaften - wie Titel, Beschreibung, Autor und andere Eigenschaften, die Sie im Sitemetadata -Objekt haben, in der GraphQL -Abfrage angezeigt werden.

Verwenden Sie diesen Haken, um Siteurl zu erhalten

Hier ist der lustige Teil: Wir erhalten die Site -URL und verwenden sie in der Komponente.

 Import reagieren aus "reagieren";
Helm von 'React-Helmet' importieren;
Import useItemetadata von '../hooks/use-siite- metadata';

const page = ({location}) => {
  const {SiteUrl} = useItemetadata ();
  zurückkehren (
    <helm>
      <link rel="Canonical" href="%7B%60%24">
    </helm>
  );
};

Standardseite exportieren;

Lass es uns zusammenbrechen.

In Zeile 3 importieren wir den UseSitemetadata -Hook, den wir in die Komponente erstellt haben.

 Import useItemetadata von '../hooks/use-siite- metadata';

Dann, in Zeile 6, zerstören wir die daraus resultierenden Daten und erstellen die SiteUrl -Variable. Jetzt haben wir die Site -URL, die uns während der Bau- und Laufzeit für uns verfügbar ist. Süß!

 const {SiteUrl} = useItemetadata ();

Kombinieren Sie die Site -URL mit dem Pfad der Seite und fügen Sie sie dem Markup hinzu

Erinnern Sie sich nun an die Standortpropie aus der zweiten Methode? Das Tolle daran ist, dass es die Pfadname -Eigenschaft sowohl während der Build als auch während der Laufzeit enthält. Sehen Sie, wohin es geht? Alles, was wir tun müssen, ist die beiden zu kombinieren:

 `$ {SiteUrl} $ {location.PathName}`

Dies ist wahrscheinlich die robusteste Lösung, die in den Browsern und während der Produktionsergebnisse funktioniert. Ich persönlich verwende diese Methode am meisten.

Ich verwende in diesem Beispiel React Helm. Wenn Sie noch nicht davon gehört haben, ist es ein Werkzeug, um den Kopfabschnitt in React -Anwendungen zu rendern. Darrell Hoffman hat hier auf CSS-Tricks eine nette Erklärung dafür geschrieben.

Methode 4: Generieren Sie die aktuelle Seiten -URL auf der Serverseite

Was?! Hast du nur Server gesagt? Ist Gatsby nicht ein statischer Site -Generator? Ja, ich habe Server gesagt. Aber es ist kein Server im traditionellen Sinne.

Wie wir bereits wissen, generiert Gatsby während der Bauzeit (dh Server -Rendern) statische Seiten. Hier kommt der Name her. Was daran großartig ist, ist, dass wir mit mehreren APIs, die Gatsby bereits bietet, in diesen Prozess einbinden können.

Die API, die uns am meisten interessiert, heißt Onrenderbody. In den meisten Fällen wird es verwendet, um der Seite benutzerdefinierte Skripte und Stile zu injizieren. Aber was an diesem (und anderen serverseitigen APIs) aufregend ist, ist, dass es einen Parameter von PathName hat. Dies bedeutet, dass wir die aktuelle Seiten -URL „auf dem Server“ generieren können.

Ich würde diese Methode nicht persönlich verwenden, um dem Kopfabschnitt Meta -Tags hinzuzufügen, da die dritte Methode, die wir betrachten, dafür besser geeignet ist. Lassen Sie mich Ihnen jedoch zeigen, wie Sie den kanonischen Link mit Onrenderbody zur Website hinzufügen können.

Um eine serverseitige API zu verwenden, müssen Sie den Code in eine Datei namens Gatsby-Ssr.js schreiben, die sich im Stammordner Ihrer Website befindet. Um den Link zum Kopfabschnitt hinzuzufügen, schreiben Sie so etwas:

 const react = require ('react');
const config = required ('./ gatsby-config');

exports.onrenderbody = ({pathname, setheadcomponents}) => {
  setheadcomponents ([
    <link rel="Canonical" href="%7B%60%24">,,
  ]);
};

Lassen Sie uns diesen Code Stück für Stück brechen.

Wir müssen in Zeile 1 reagieren. Es ist erforderlich, dass die JSX -Syntax funktioniert. In Zeile 2 ziehen wir dann Daten aus der Datei gatsby-config.js in eine Konfigurationsvariable.

Als nächstes nennen wir die SetheadComponents -Methode innerhalb von Onrenderbody und geben ihr eine Reihe von Komponenten über, um den Site -Header hinzuzufügen. In unserem Fall ist es nur ein Link -Tag. Und für das HREF -Attribut des Links selbst kombinieren wir die SiteUrl und den Pfadnamen:

 `$ {config.Sitemetadata.Siteurl} $ {pathname}`

Wie ich bereits sagte, ist dies wahrscheinlich nicht die Anlaufstelle zum Hinzufügen von Tags zum Kopfabschnitt, aber es ist gut zu wissen, dass Gatsby serverseitige APIs hat, die es ermöglichen, während der Server-Rendering-Phase eine URL für eine bestimmte Seite zu generieren.

Wenn Sie mehr über das Server-Side-Rendering mit Gatsby erfahren möchten, empfehle ich Ihnen, ihre offizielle Dokumentation zu lesen.

Das war's!

Wie Sie sehen können, ist es nicht sehr kompliziert, die URL der aktuellen Seite in Gatsby zu erhalten, insbesondere wenn Sie die Kernkonzepte verstehen und die zur Verwendung verfügbaren Tools kennen. Wenn Sie andere Methoden kennen, lassen Sie es mich bitte in den Kommentaren wissen!

Ressourcen

• JavaScript -Fensterschnittstelle
• Überblick über den Gatsby Build -Prozess
• Standortdaten aus Requisiten
• Gatsby Server -Rendering -APIs
• Helm reagieren

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die aktuelle Seiten -URL in Gatsby. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!