Comment obtenir l'URL de la page actuelle à Gatsby

Cette tâche apparemment simple m'a fait gratter la tête pendant quelques heures pendant que je travaillais sur mon site Web. Il s'avère que l'obtention de l'URL de page actuelle à Gatsby n'est pas aussi simple que vous le pensez, mais pas aussi compliqué à comprendre.

Regardons quelques méthodes pour y arriver. Mais d'abord, vous vous demandez peut-être pourquoi diable nous voudrions même faire quelque chose comme ça.

Pourquoi pourriez-vous avoir besoin de l'URL actuelle

Donc, avant d'entrer dans le comment , répondons d'abord à la plus grande question: pourquoi voudriez-vous obtenir l'URL de la page actuelle? Je peux offrir quelques cas d'utilisation.

Meta Tags

La première chose évidente pour laquelle vous voudriez que l'URL actuelle est Meta Tags dans la tête de document:

 <link rel="canonical" href="%7Burl%7D">
<m propri url contenu="{url}"></m>

Partage social

Je l'ai vu sur plusieurs sites Web où un lien vers la page actuelle s'affiche à côté des boutons de partage. Quelque chose comme ça (trouvé sur le marché créatif)

Coiffage

Celui-ci est moins évident mais je l'ai utilisé plusieurs fois avec des composants stylisés. Vous pouvez rendre différents styles en fonction de certaines conditions. L'une de ces conditions peut être un chemin de page (c'est-à-dire une partie de l'URL après le nom du site). Voici un exemple rapide:

 importer réagir à partir de «réagir»;
importer stylisé à partir de «composants stylisés»;

constance constance = ({path, enfants}) => (
  <styledlayout path="{path}">
    {enfants}
   StyledLayout>
));
    
const StyledLayout = Styled.main`
  Background-Color: $ {({path}) => (path === '/'? '#fff': '# 000')};
`;

Exporter la disposition par défaut;</styledlayout>

Ici, j'ai créé un composant de mise en page stylé qui, basé sur le chemin, a une couleur d'arrière-plan différente.

Cette liste d'exemples illustre uniquement l'idée et n'est en aucun cas complet. Je suis sûr qu'il y a plus de cas où vous voudrez peut-être obtenir l'URL de la page actuelle. Alors, comment pouvons-nous l'obtenir?

Comprendre le temps de construction par rapport à l'exécution

Pas si vite! Avant d'arriver aux méthodes réelles et aux extraits de code, j'aimerais faire un dernier arrêt et expliquer brièvement quelques concepts de base de Gatsby.

La première chose que nous devons comprendre est que Gatsby, entre autres choses, est un générateur de sites statique. Cela signifie qu'il crée des fichiers statiques (qui sont généralement HTML et JavaScript). Il n'y a pas de serveur et pas de base de données sur le site Web de production. Toutes les informations (y compris l'URL de la page actuelle) doivent être extraites d'autres sources ou générées pendant le temps de construction ou le temps d'exécution avant de l'insérer dans le balisage.

Cela nous amène au deuxième concept important que nous devons comprendre: construire du temps par rapport à l'exécution. Je vous encourage à lire la documentation officielle de Gatsby à ce sujet, mais voici mon interprétation.

L'exécution est lorsque l'une des pages statiques est ouverte dans le navigateur . Dans ce cas, la page a accès à toutes les merveilleuses API du navigateur, y compris l'API Windows qui, entre autres choses, contient l'URL de la page actuelle.

Une chose qui est facile à confondre, surtout en commençant avec Gatsby, c'est que l'exécution de Gatsby se développe dans le terminal en mode de développement tourne le navigateur pour vous. Cela signifie que toutes les références à l'objet de fenêtre fonctionnent et ne déclenchent aucune erreur.

Le temps de construction se produit lorsque vous avez terminé de développer et dire à Gatsby de générer des actifs optimisés finaux à l'aide de la commande Gatsby Build. Pendant le temps de construction, le navigateur n'existe pas. Cela signifie que vous ne pouvez pas utiliser l'objet Window.

Voici le A-HA! moment. Si les versions sont isolées du navigateur et qu'il n'y a pas de serveur ou de base de données où nous pouvons obtenir l'URL, comment Gatsby est-il censé savoir quel nom de domaine est utilisé? C'est la chose - ça ne peut pas! Vous pouvez obtenir la limace ou le chemin de la page, mais vous ne pouvez tout simplement pas dire quelle est l'URL de base. Vous devez le spécifier.

Il s'agit d'un concept très basique, mais si vous venez avec des années d'expérience WordPress, il peut prendre un certain temps pour que cette information s'enfonce. Vous savez que Gatsby est sans serveur et que des moments comme celui-ci vous réalisent: il n'y a pas de serveur.

Maintenant que nous avons trié, passons aux méthodes réelles pour obtenir l'URL de la page actuelle.

Méthode 1: Utilisez la propriété HREF de la fenêtre.

Cette première méthode n'est pas spécifique à Gatsby et peut être utilisée dans à peu près toutes les applications JavaScript dans le navigateur. Voir, le navigateur est le mot clé ici.

Disons que vous construisez l'un de ces composants de partage avec un champ de saisie qui doit contenir l'URL de la page actuelle. Voici comment vous pourriez faire cela:

 importer réagir à partir de «réagir»;

const foo = () => {
  const url = typeof window! == 'Undefined'? window.location.href: '';

  retour (
    <input type="text" readonly value="{url}">
  ));
};

Exporter par défaut foo;

Si l'objet Window existe, nous obtenons la propriété HREF de l'objet de localisation qui est un enfant de la fenêtre. Sinon, nous donnons à la variable URL une valeur de chaîne vide.

Si nous le faisons sans chèque et l'écrivons comme ceci:

 const url = window.location.href;

… La construction échouera avec une erreur qui ressemble à quelque chose comme ceci:

 Échec du HTML statique pour les pages - 2,431
Erreur n ° 95312 
"Window" n'est pas disponible lors du rendu côté serveur.

Comme je l'ai mentionné plus tôt, cela se produit parce que le navigateur n'existe pas pendant la durée de construction . C'est un énorme inconvénient de cette méthode. Vous ne pouvez pas l'utiliser si vous avez besoin de l'URL pour être présent sur la version statique de la page.

Mais il y a aussi un gros avantage! Vous pouvez accéder à l'objet de fenêtre à partir d'un composant imbriqué profondément à l'intérieur d'autres composants. En d'autres termes, vous n'avez pas à percer l'accessoire URL des composants parents.

Méthode 2: Obtenez la propriété HREF des données de localisation des accessoires

Chaque composant de page et modèle de Gatsby a un accessoire de localisation qui contient des informations sur la page actuelle. Cependant, contrairement à Window.Location, cet accessoire est présent sur toutes les pages.

Citant Gatsby Docs:

La grande chose est que vous pouvez vous attendre à ce que l'hélice de localisation soit disponible à chaque page.

Mais il peut y avoir une prise ici. Si vous êtes nouveau sur GATSBY, vous enregistrerez cet accessoire à la console et remarquerez qu'il semble à peu près identique à la fenêtre. Location (mais ce n'est pas la même chose) et contient également l'attribut HREF. Comment est-ce possible? Eh bien, ce n'est pas le cas. Le HREF Prop est là que pendant l'exécution.

La pire chose à ce sujet est que l'utilisation de l'emplacement.href directement sans d'abord vérifier si elle existe ne déclenchera pas une erreur pendant la construction.

Tout cela signifie que nous pouvons compter sur l'hélice de l'emplacement pour être sur chaque page, mais nous ne pouvons pas s'attendre à ce qu'il ait la propriété HREF pendant le temps de construction. Soyez conscient de cela et n'utilisez pas cette méthode pour les cas critiques où vous avez besoin que l'URL soit dans le balisage sur la version statique de la page.

Alors réécrivons l'exemple précédent en utilisant cette méthode:

 importer réagir à partir de «réagir»;

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

  retour (
    <input type="text" readonly value="{url}">
  ));
};

Exporter la page par défaut;

Il doit s'agir d'une page de haut niveau ou d'un composant de modèle. Vous ne pouvez pas simplement l'importer n'importe où et vous attendre à ce que cela fonctionne. L'hélice de localisation ne sera pas définie.

Comme vous pouvez le voir, cette méthode est assez similaire à la précédente. Utilisez-le pour les cas où l'URL n'est nécessaire que pendant l'exécution.

Mais que se passe-t-il si vous avez besoin d'avoir une URL complète dans le balisage d'une page statique? Passons à la troisième méthode.

Méthode 3: Générez l'URL de la page actuelle avec la propriété PathName à partir des données de localisation

Comme nous l'avons discuté au début de cet article, si vous devez inclure l'URL complète aux pages statiques, vous devez spécifier l'URL de base du site Web quelque part et l'obtenir en quelque sorte pendant la construction. Je vais vous montrer comment faire ça.

À titre d'exemple, je vais créer une balise dans l'en-tête. Il est important d'avoir l'URL pleine page avant que la page n'arrive le navigateur. Sinon, les moteurs de recherche et les grattoirs de site verront l'attribut HREF vide, qui est inacceptable.

Voici le plan:

1. Ajoutez la propriété SITEURL à Sitemetadata dans Gatsby-Config.js.
2. Créez un crochet de requête statique pour récupérer Sitemetadata dans n'importe quel composant.
3. Utilisez ce crochet pour obtenir SITEURL.
4. Combinez-le avec le chemin de la page et ajoutez-le au balisage.

Brilons chaque pas.

Ajoutez la propriété SITEURL à Sitemetadata dans Gatsby-Config.js

Gatsby a un fichier de configuration appelé gatsby-config.js qui peut être utilisé pour stocker des informations globales sur le site à l'intérieur de l'objet Sitemetadata. Cela fonctionne pour nous, nous allons donc ajouter SITEURL à cet objet:

 module.exports = {
  Sitemetadata: {
    Titre: «Dmitry Mayorov»,
    Description: «Dmitry est un développeur frontal qui construit des sites sympas.»,
    Auteur: '@dmtrmrv',
    SITEURL: «https://dmtrmrv.com»,
  }
};

Créez un crochet de requête statique pour récupérer Sitemetadata dans n'importe quel composant

Ensuite, nous avons besoin d'un moyen d'utiliser Sitemetadata dans nos composants. Heureusement, Gatsby a une API StaticQuery qui nous permet de faire exactement cela. Vous pouvez utiliser le crochet USESTATICQUERY directement à l'intérieur de vos composants, mais je préfère créer un fichier séparé pour chaque requête statique que j'utilise sur le site Web. Cela rend le code plus facile à lire.

Pour ce faire, créez un fichier appelé use use-site-metadata.js à l'intérieur d'un dossier Hooks à l'intérieur du dossier SRC de votre site et copiez et codez le code suivant.

 import {UsestaticQuery, graphQL} de 'gatsby';

const usureMetadata = () => {
  const {site} = usestaticquery (
  GraphQL`
    requête {
    site {
      Sitemetadata {
      titre
      description
      auteur
      siteurl
      }
    }
    }
  `,
  ));
  return Site.SiteMetAdata;
};

Exportation par défaut useTiteMetAdata;

Assurez-vous de vérifier que toutes les propriétés - comme le titre, la description, l'auteur et toutes les autres propriétés que vous avez dans l'objet SiteMetadata - apparaissent dans la requête GraphQL.

Utilisez ce crochet pour obtenir SITEURL

Voici la partie amusante: nous obtenons l'URL du site et l'utilisons à l'intérieur du composant.

 importer réagir à partir de «réagir»;
Casque d'importation de «React-helmet»;
importer useTiteMetadata de '../hooks/use-site-metadata';

const page = ({emplacement}) => {
  const {sItEUrl} = usageIteMetAdata ();
  retour (
    <casque>
      <link rel="canonical" href="%7B%60%24">
     HELMET>
  ));
};

Exporter la page par défaut;</casque>

Décomposons-le.

Sur la ligne 3, nous importons le crochet USETITEMETADATA que nous avons créé dans le composant.

 importer useTiteMetadata de '../hooks/use-site-metadata';

Ensuite, sur la ligne 6, nous déstructons les données qui en découlent, créant la variable SITEURL. Nous avons maintenant l'URL du site qui est disponible pour nous pendant la construction et l'exécution. Doux!

 const {sItEUrl} = usageIteMetAdata ();

Combinez l'URL du site avec le chemin de la page et ajoutez-le au balisage

Maintenant, n'oubliez pas l'hélice de l'emplacement de la deuxième méthode? La grande chose à ce sujet est qu'il contient la propriété PathName pendant la construction et l'exécution. Voyez où ça va? Tout ce que nous avons à faire est de combiner les deux:

 `$ {sItEurl} $ {location.pathname}`

Il s'agit probablement de la solution la plus robuste qui fonctionnera dans les navigateurs et pendant les constructions de production. J'utilise personnellement cette méthode le plus.

J'utilise le casque React dans cet exemple. Si vous ne l'avez pas entendu parler, c'est un outil pour rendre la section Head dans les applications React. Darrell Hoffman a écrit une belle explication ici sur CSS-Tricks.

Méthode 4: Générez l'URL de la page actuelle du côté serveur

Quoi?! Vous venez de dire serveur? Gatsby n'est-il pas un générateur de sites statique? Oui, j'ai dit le serveur. Mais ce n'est pas un serveur au sens traditionnel.

Comme nous le savons déjà, Gatsby génère (IE Server rend des pages statiques pendant la durée de construction. C'est de là que vient le nom. Ce qui est génial à ce sujet, c'est que nous pouvons nous connecter à ce processus en utilisant plusieurs API que Gatsby fournit déjà.

L'API qui nous intéresse le plus s'appelle Onrenderbody. La plupart du temps, il est utilisé pour injecter des scripts et des styles personnalisés sur la page. Mais ce qui est passionnant à ce sujet (et d'autres API côté serveur), c'est qu'il a un paramètre PathName. Cela signifie que nous pouvons générer l'URL de page actuelle «sur le serveur».

Je n'utiliserais pas personnellement cette méthode pour ajouter des balises Meta à la section Head car la troisième méthode que nous avons examinée est plus adaptée à cela. Mais par exemple, permettez-moi de vous montrer comment vous pouvez ajouter le lien canonique au site à l'aide d'Onrenderbody.

Pour utiliser n'importe quelle API côté serveur, vous devez écrire le code dans un fichier appelé gatsby-ssr.js situé dans le dossier racine de votre site. Pour ajouter le lien à la section Head, vous écririez quelque chose comme ceci:

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

exports.onrenderBody = ({pathName, setheadComponents}) => {
  SetheadComponents ([[
    <link rel="canonical" href="%7B%60%24">,
  ]));
};

Breaknons ce code petit à petit.

Nous avons besoin de réagir à la ligne 1. Il est nécessaire de faire fonctionner la syntaxe JSX. Ensuite, sur la ligne 2, nous tirons des données du fichier gatsby config.js dans une variable de configuration.

Ensuite, nous appelons la méthode SetheadComponents à l'intérieur d'onrenderBody et la passons un tableau de composants à ajouter à l'en-tête du site. Dans notre cas, ce n'est qu'une balise de lien. Et pour l'attribut HREF du lien lui-même, nous combinons le SITEURL et le PathName:

 `$ {config.sitemetadata.siteUrl} $ {pathname}`

Comme je l'ai dit plus tôt, ce n'est probablement pas la méthode incontournable pour ajouter des balises à la section Head, mais il est bon de savoir que Gatsby possède des API côté serveur qui permettent de générer une URL pour une page donnée pendant la scène de rendu du serveur.

Si vous souhaitez en savoir plus sur le rendu côté serveur avec Gatsby, je vous encourage à lire leur documentation officielle.

C'est ça!

Comme vous pouvez le voir, l'obtention de l'URL de la page actuelle de Gatsby n'est pas très compliquée, surtout une fois que vous comprenez les concepts de base et que vous connaissez les outils disponibles à utiliser. Si vous connaissez d'autres méthodes, faites-le moi savoir dans les commentaires!

Ressources

• Interface de fenêtre JavaScript
• Aperçu du processus de construction de Gatsby
• Données de localisation des accessoires
• API de rendu de serveur Gatsby
• Casque réagi

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!