gatsby plugin breadcrumb
v12.3.2
Ce plugin devrait bien fonctionner sur Gatsby V2, V3 et V4.
yarn add gatsby-plugin-breadcrumbou
npm install gatsby-plugin-breadcrumb Il existe deux façons d'utiliser gatsby-plugin-breadcrumb pour ajouter de la chapelure à votre site Gatsby: cliquez sur le suivi et l'autogène.
Cliquez sur le suivi crée une chapelure du chemin emprunté (cliqué) par l'utilisateur. Les deux façons d'utiliser le suivi des clics sont:
Utilisation du composant <Breadcrumb /> :
Ajoutez le plugin gatsby-plugin-breadcrumb à votre gatsby-config.js
Importez et utilisez le composant <Breadcrumb /> , en passant les accessoires requis, sur les pages que vous souhaitez voir la chapelure.
Utilisation du crochet useBreadcrumb : Le crochet useBreadcrumb vous permet de contrôler vos propres chemins de pain, en appelant useBreadcrumb et en passant les propriétés objets requis. L'utilisation du crochet vous permet de passer la chapelure à votre propre composant de chapelure personnalisé, mais profite toujours de la logique de suivi de gatsby-plugin-breadcrumbs .
Ajoutez le plugin gatsby-plugin-breadcrumb à votre gatsby-config.js
Importez et utilisez le crochet useBreadcrumb , en passant les propriétés d'objet requises.
Autogen (généré automatiquement) générera du fil à fil pour chaque page et les injectera dans la page Gatsby pageContext Prop sous la propriété breadcrumb .
Ajoutez le plugin gatsby-plugin-breadcrumb à votre gatsby-config.js et définissez l'option Plugin useAutoGen à true
Obtenez le tableau crumbs à partir de l'objet breadcrumb dans pageContext
Importez et utilisez le composant <Breadcrumb /> , en passant les accessoires requis sur les pages que vous souhaitez voir
L'utilisation du composant
<Breadcrumb />n'est pas une exigence. Si vous souhaitez créer votre propre composant de chapelure et passez-le les données de chapelure à partir depageContext, c'est toujours une option.
Codesandbox.io démo
gatsby-config.js
{
// optional: if you are using path prefix, see plugin option below
pathPrefix : '/blog' ,
plugins : [
{
resolve : `gatsby-plugin-breadcrumb` ,
options : {
// defaultCrumb: optional To create a default crumb
// see Click Tracking default crumb example below
defaultCrumb : {
location : {
pathname : "/" ,
} ,
crumbLabel : "HomeCustom" ,
crumbSeparator : " / " ,
} ,
// usePathPrefix: optional, if you are using pathPrefix above
usePathPrefix : '/blog' ,
}
}
] ,
}/pages/aboutus.js
import React from 'react'
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'
export const AboutUs = ( { location } ) => {
...
return (
< div >
< Breadcrumb location = { location } crumbLabel = "About Us" />
...
</ div >
)
} Le composant <Breadcrumb /> fournit la chapelure par défaut, tout en vous permettant de personnaliser ces chapelure si vous le souhaitez.
| soutenir | taper | description | exemples | requis |
|---|---|---|---|---|
| emplacement | objet | Attein de l'emplacement du routeur | Voir l'emplacement de l'emplacement du routeur Reach, passé par Gatsby à chaque page. | requis |
| froisser | chaîne | Nom de la chapelure | "About Us" | requis |
| titre | chaîne | Titre précédant la chapelure | "Breadcrumbs: " , ">>>" | facultatif |
| froison | chaîne | Séparateur entre chaque chapelure | " / " | facultatif |
Au lieu d'ajouter le composant <Breadcrumb /> à chaque page, une autre option serait de l'ajouter à un composant de mise en page.
Codesandbox.io démo
/pages/aboutus.js
import React from 'react'
import Layout from './layout'
...
export const AboutUs = ( { location } ) => {
return (
< Layout location = { location } crumbLabel = "About Us" >
...
</ Layout >
}
}/pages/contact.js
import React from 'react'
import Layout from './layout'
export const Contact = ( { location } ) => {
return (
< Layout location = { location } crumbLabel = "Contact" >
...
</ Layout >
}
}/ components/layout.js
import React from 'react'
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'
export const Layout = ( { location , crumbLabel } ) => {
return (
< div >
< Header >
< main >
< Breadcrumb location = { location } crumbLabel = { crumbLabel } />
...
</ main >
</ Header >
</ div >
}
} Lors de l'utilisation de l'option de suivi de clic avec le composant <Breadcrumb /> , si un utilisateur va directement à une page, votre pain commencera par cette page. Vous voudrez peut-être toujours fournir une chapelure par défaut ou "à la maison". Vous pouvez le faire en ajoutant une option de plugin defaultCrumb . Nous devons structurer la chapelure de defaultCrumb que nous fournissons d'une manière que notre contexte attend, voir ci-dessous pour un exemple en utilisant toutes les options disponibles.
{
resolve : `gatsby-plugin-breadcrumb` ,
options : {
defaultCrumb : {
// location: required and must include the pathname property
location : {
pathname : "/" ,
} ,
// crumbLabel: required label for the default crumb
crumbLabel : "Home" ,
// all other properties optional
crumbSeparator : " / " ,
} ,
} ,
} , Pour utiliser les styles par défaut, veuillez importer le fichier gatsby-plugin-breadcrumb.css dans votre fichier gatsby-prowser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Si vous préférez styliser votre propre anche, voici une liste des classes utilisées avec le composant <Breadcrumb /> :
| classe | description |
|---|---|
breadcrumb__title | Appliqué au titre de la naissance ( <span> ) |
breadcrumb | Appliqué au récipient de chapelure ( <nav> ) |
breadcrumb__list | Appliqué à la liste ordonnée de la naissance du fil ( <ol> ) |
breadcrumb__list__item | Appliqué à chaque «miettes» ( <li> ) |
breadcrumb__link | Appliqué au lien de la chapelure ( <a> ) |
breadcrumb__link__active | Ajouté au lien actuel ( <a> ) |
breadcrumb__separator | Appliqué aux séparateurs de chapelure ( <span> ) |
gatsby-config.js
{
plugins : [
`gatsby-plugin-breadcrumb` ,
] ,
}/pages/about-us.js
import React from 'react'
import MyCustomBreadcrumb from './my-custom-breadcrumb'
import { useBreadcrumb } from 'gatsby-plugin-breadcrumb'
export const AboutUs = ( { location } ) => {
const { crumbs } = useBreadcrumb ( {
location ,
crumbLabel : 'About Us' ,
crumbSeparator : ' / ' ,
} )
return (
< div >
< MyCustomBreadcrumb crumbs = { crumbs } />
...
</ div >
)
} Le crochet useBreadcrumb prend un objet avec les propriétés suivantes:
| soutenir | taper | description | exemples | requis |
|---|---|---|---|---|
| emplacement | objet | Attein de l'emplacement du routeur | Voir l'emplacement de l'emplacement du routeur Reach, passé par Gatsby à chaque page. | requis |
| froisser | chaîne | Nom de la chapelure | "About Us" | requis |
| froison | chaîne | Séparateur entre chaque chapelure | " / " | facultatif |
useBreadcrumb renvoie ce qui suit:
| valeur | taper | description |
|---|---|---|
| miettes | tableau | Tableau de la chapelure actuelle |
Le crochet useBreadcrumb déterminera s'il doit ajouter, retirer ou ne rien faire avec la chapelure en fonction de l'emplacement que vous passez. Il vous suffit de le transmettre les accessoires requis ( location , crumbLabel ).
Codesandbox.io démo
Autogen (généré automatique, précédemment du site) utilisé pour s'appuyer sur gatsby-plugin-sitemap , qui crée un fichier XML SITMAP dans le dossier /public de votre site à la fin de la construction du site. Cela a causé des problèmes lors du déploiement de services comme Netlify, car le fichier XML n'a pas été créé lorsque nous devions essayer de le lire, ce qui fait échouer la construction. Autogène génère maintenant la chapelure à mesure que les pages sont créées. Nous n'avons pas non plus besoin du gatsby-plugin-remove-trailing-slashes .
Ajoutez ce qui suit à votre Gatsby-Config
gatsby-config.js
{
// optional: if you are using path prefix, see plugin option below
pathPrefix : '/blog' ,
siteMetadata : {
// siteUrl: required (Gotcha: do not include a trailing slash at the end)
siteUrl : "http://localhost:8000" ,
} ,
plugins : [
{
resolve : `gatsby-plugin-breadcrumb` ,
options : {
// useAutoGen: required 'true' to use autogen
useAutoGen : true ,
// autoGenHomeLabel: optional 'Home' is default
autoGenHomeLabel : `Root` ,
// exclude: optional, include this array to exclude paths you don't want to
// generate breadcrumbs for (see below for details).
exclude : [
`**/dev-404-page/**` ,
`**/404/**` ,
`**/404.html` ,
`**/offline-plugin-app-shell-fallback/**`
] ,
// isMatchOptions: optional, include this object to configure the wildcard-match library.
excludeOptions : {
separator : '.'
} ,
// crumbLabelUpdates: optional, update specific crumbLabels in the path
crumbLabelUpdates : [
{
pathname : '/book' ,
crumbLabel : 'Books'
}
] ,
// trailingSlashes: optional, will add trailing slashes to the end
// of crumb pathnames. default is false
trailingSlashes : true ,
// usePathPrefix: optional, if you are using pathPrefix above
usePathPrefix : '/blog' ,
} ,
]
} En ce qui concerne V11, l'option exclude du tableau dans la configuration de ce plugin utilise la bibliothèque de matchs génériques. Vous pouvez écrire des cordes génériques pour exclure les chemins pour lesquels vous ne voulez pas créer de chapelure. Veuillez consulter la bibliothèque de matchs génériques pour plus de détails sur la façon d'écrire de nouvelles chaînes d'exclusion.
Pour passer à V11 et conserver un comportement similaire à vos anciens chemins exclus, ajoutez simplement
**au début et à la fin de vos chaînes d'exclusion
exemple:
// old
exclude: [ '/books/', '/chapters/' ]
// new
exclude: [ '**/books/**', '**/chapters/**' ]
L'option d'objet excludeOptions est utilisée pour transmettre des options pour configurer la bibliothèque wildcard-match . Veuillez consulter la bibliothèque de matchs génériques pour plus de détails. L'omission de cette option utilisera les options par défaut.
/pages/about-us.js
import React from 'react'
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'
export const AboutUs = ( { pageContext , location } ) => {
const {
breadcrumb : { crumbs } ,
} = pageContext
// Example of dynamically using location prop as a crumbLabel
// NOTE: this code will not work for every use case, and is only an example
const customCrumbLabel = location . pathname . toLowerCase ( ) . replace ( '-' , ' ' )
return (
< div >
< Header >
< main >
< Breadcrumb
crumbs = { crumbs }
crumbSeparator = " - "
crumbLabel = { customCrumbLabel }
/>
...
</ main >
</ Header >
</ div >
)
}| soutenir | taper | description | exemples | requis |
|---|---|---|---|---|
| miettes | tableau | Tableau de miettes revient de PageContext | n / A | requis |
| titre | chaîne | Titre précédant la chapelure | "Breadcrumbs: " , ">>>" | facultatif |
| froison | chaîne | Séparateur entre chaque chapelure | " / " | facultatif |
| froisser | chaîne | Remplacer l'étiquette de miette du chemin XML | "About Us" | facultatif |
| cachette | tableau | PathNames de miettes à se cacher | ['/books'] | facultatif |
| désagréger | tableau | PathNames de miettes à montrer, mais ne pas être des liens | ['/books'] | facultatif |
| ...repos | objet | Tous les autres accessoires que vous pourriez passer | N / A: Spread Accrosts Crumb Link | facultatif |
Pour un exemple sur l'utilisation
disableLinks/hiddenCrumbsvoir https://github.com/sbardian/books
Pour utiliser les styles par défaut, veuillez importer le fichier gatsby-plugin-breadcrumb.css dans votre fichier gatsby-prowser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Si vous préférez styliser votre propre anche, voici une liste des classes utilisées avec le composant <Breadcrumb /> :
| classe | description |
|---|---|
breadcrumb__title | Appliqué au titre de la naissance ( <span> ) |
breadcrumb | Appliqué au récipient de chapelure ( <nav> ) |
breadcrumb__list | Appliqué à la liste ordonnée de la naissance du fil ( <ol> ) |
breadcrumb__list__item | Appliqué à chaque «miettes» ( <li> ) |
breadcrumb__link | Appliqué au lien de la chapelure ( <a> ) |
breadcrumb__link__active | Ajouté au lien actuel ( <a> ) |
breadcrumb__link__disabled | Appliqué aux miettes qui ont des liens désactivés ( <span> ) |
breadcrumb__separator | Appliqué aux séparateurs de chapelure ( <span> ) |
Voici quelques gotchas. Si vous en remarquez plus, vous pensez être mentionné ici, soumettez un PR ou créez un problème.
Dans votre option gatsby-config.js siteMetaData.siteUrl Assurez-vous de supprimer les barres obliques de fin
Les Gatsby <Link />'s sur tout votre site doivent avoir to propriétés qui correspondent à votre pain to propriétés de la classe breadcrumb__link__active à appliquer. Les URL de votre site doivent également faire correspondre les to de la chapelure pour les classes actives pour prendre effet.
Les URL de vos sites pourraient avoir des barres obliques à la traîne, et la chapelure to les URL pourrait ne pas le faire. Une option consiste à utiliser le plugin Gatsby-Plugin-Remove-Traite-Slashs pour vous assurer que votre URL correspond à la classe breadcrumb__link__active .
Vous pouvez également passer le composant <Breadcrumb> Les routeurs de portée getProps proposent une fonction pour affiner lorsque la classe active est appliquée.
getprops/pages/about-us.js
import React from 'react'
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'
export const AboutUs = ( { pageContext } ) => {
const {
breadcrumb : { crumbs } ,
} = pageContext
const isPartiallyActive = ( { isPartiallyCurrent , isCurrent } ) => {
return isPartiallyCurrent && isCurrent
? { className : 'breadcrumb__link breadcrumb__link__active' }
: { }
}
return (
< div >
< Header >
< main >
< Breadcrumb
crumbs = { crumbs }
crumbSeparator = " - "
crumbLabel = "About Us"
getProps = { isPartiallyActive }
/>
...
</ main >
</ Header >
</ div >
)
}
