gatsby plugin breadcrumb
v12.3.2
Este complemento debería funcionar bien en Gatsby V2, V3 y V4.
yarn add gatsby-plugin-breadcrumbo
npm install gatsby-plugin-breadcrumb Hay dos formas de usar gatsby-plugin-breadcrumb para agregar migas de pan a su sitio de Gatsby: haga clic en el seguimiento y el autógeno.
Haga clic en el seguimiento crea una cáscara de pan de la ruta tomada (haciendo clic) por el usuario. Las dos formas de usar el seguimiento de clics son:
Usando el componente <Breadcrumb /> :
Agregue el complemento gatsby-plugin-breadcrumb a su gatsby-config.js
Importe y use el componente <Breadcrumb /> , pasando los accesorios requeridos, en las páginas que desea ver la mochila.
Usando el gancho useBreadcrumb : el gancho useBreadcrumb le permite controlar sus propias migas de pan, llamando useBreadcrumb y pasando las propiedades del objeto requeridas. El uso del gancho le permite pasar las migas de pan a su propio componente personalizado de pan de pan, pero aún así aprovechar la lógica de seguimiento de gatsby-plugin-breadcrumbs .
Agregue el complemento gatsby-plugin-breadcrumb a su gatsby-config.js
Importar y usar el gancho useBreadcrumb , pasando las propiedades del objeto requeridas.
Autogen (generado automáticamente) generará migas de pan para cada página y las inyectará en la página de Gatsby pageContext Prop debajo de la propiedad breadcrumb .
Agregue el complemento gatsby-plugin-breadcrumb a su gatsby-config.js y defina la opción de complemento de useAutoGen a true
Obtenga la matriz crumbs del objeto breadcrumb en pageContext
Importar y usar el componente <Breadcrumb /> , pasando los accesorios requeridos en las páginas que desea ver la muleta de pan
El uso del componente
<Breadcrumb />no es un requisito. Si desea crear su propio componente Breadcrumb y pasarlo los datos de BreadCrumb depageContext, esta es siempre una opción.
Codesandbox.io Demo
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 >
)
} El componente <Breadcrumb /> proporciona migas de pan predeterminadas, al tiempo que le permite personalizar esas migas de pan si lo desea.
| apuntalar | tipo | descripción | ejemplos | requerido |
|---|---|---|---|---|
| ubicación | objeto | Proporro de ubicación del enrutador alcanzar el enrutador | Consulte el accesorio de ubicación del enrutador Reach, pasada por Gatsby a cada página. | requerido |
| crumbel | cadena | Nombre para el pan de pan | "About Us" | requerido |
| título | cadena | Título anterior a las migas de pan | "Breadcrumbs: " , ">>>" | opcional |
| crumbseparador | cadena | Separador entre cada bandeja de pan | " / " | opcional |
En lugar de agregar el componente <Breadcrumb /> a cada página, otra opción sería agregarlo a un componente de diseño.
Codesandbox.io Demo
/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 >
}
} Mientras usa la opción de seguimiento de clics con el componente <Breadcrumb /> , si un usuario va directamente a una página, su banecita comenzará con esa página. Es posible que siempre desee proporcionar una cáscara de pan predeterminada o de "hogar". Puede hacer esto agregando una opción de complemento de defaultCrumb . Debemos estructurar la cáscara de pan de pluma defaultCrumb que proporcionamos de una manera que nuestro contexto espera, consulte a continuación un ejemplo utilizando todas las opciones 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 : " / " ,
} ,
} ,
} , Para usar los estilos predeterminados, importe el archivo gatsby-plugin-breadcrumb.css en su archivo Gatsby-Browser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Si prefiere diseñar su propia cáscara de pan, aquí hay una lista de las clases utilizadas con el componente <Breadcrumb /> :
| clase | descripción |
|---|---|
breadcrumb__title | Aplicado al título de Breadcrumb ( <span> ) |
breadcrumb | Aplicado al contenedor de breadrumb ( <nav> ) |
breadcrumb__list | Aplicado a la lista ordenada de pan de pan ( <ol> ) |
breadcrumb__list__item | Aplicado a cada pan de pan 'migas' ( <li> ) |
breadcrumb__link | Aplicado al enlace de Breadcrumb ( <a> ) |
breadcrumb__link__active | Agregado al enlace actual ( <a> ) |
breadcrumb__separator | Aplicado a los separadores de paneles de pan ( <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 >
)
} El gancho useBreadcrumb toma un objeto con las siguientes propiedades:
| apuntalar | tipo | descripción | ejemplos | requerido |
|---|---|---|---|---|
| ubicación | objeto | Proporro de ubicación del enrutador alcanzar el enrutador | Consulte el accesorio de ubicación del enrutador Reach, pasada por Gatsby a cada página. | requerido |
| crumbel | cadena | Nombre para el pan de pan | "About Us" | requerido |
| crumbseparador | cadena | Separador entre cada bandeja de pan | " / " | opcional |
useBreadcrumb Devuelve lo siguiente:
| valor | tipo | descripción |
|---|---|---|
| migajas | formación | Matriz de las migas de pan actuales |
El gancho useBreadcrumb determinará si necesita agregar, eliminar o no hacer nada con las migas de pan en función de la ubicación que pasa. Solo necesita pasarlo los accesorios requeridos ( location , crumbLabel ).
Codesandbox.io Demo
Autogen (automático generado, anteriormente Sitemap) solía confiar en gatsby-plugin-sitemap , que crea un archivo XML SITMAP en la carpeta /public de su sitio al final de la compilación del sitio. Esto causó problemas al implementar en servicios como Netlify, ya que el archivo XML no se creó cuando necesitábamos intentar leerlo, haciendo que la compilación falle. Ahora el autógeno genera las migas de pan a medida que se crean páginas. Tampoco ya no requerimos el gatsby-plugin-remove-trailing-slashes .
Agregue lo siguiente a su config de Gatsby
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' ,
} ,
]
} A partir de V11, la opción de matriz exclude en la configuración de este complemento utiliza la biblioteca Wildcard-Match. Puede escribir cuerdas comodín para excluir los caminos para los que no desea crear migas de pan. Revise la biblioteca Wildcard-Match para obtener más detalles sobre cómo escribir nuevas cuerdas de exclusión.
Para actualizar a V11 y mantener un comportamiento similar a sus viejas rutas excluidas, simplemente agregue
**al inicio y al final de sus cadenas de exclusión
ejemplo:
// old
exclude: [ '/books/', '/chapters/' ]
// new
exclude: [ '**/books/**', '**/chapters/**' ]
La opción de objeto excludeOptions se utiliza para pasar opciones para configurar la biblioteca wildcard-match . Consulte la biblioteca Wildcard-Match para obtener más detalles. Omitir esta opción utilizará las opciones predeterminadas.
/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 >
)
}| apuntalar | tipo | descripción | ejemplos | requerido |
|---|---|---|---|---|
| migajas | formación | Matriz de migajas regresa de PageContext | n / A | requerido |
| título | cadena | Título anterior a las migas de pan | "Breadcrumbs: " , ">>>" | opcional |
| crumbseparador | cadena | Separador entre cada bandeja de pan | " / " | opcional |
| crumbel | cadena | Anular la etiqueta de migas de la ruta XML | "About Us" | opcional |
| escondidas | formación | Namas de ruta de las migajas para esconderse | ['/books'] | opcional |
| discapacitados | formación | Path Names of Morgbs para mostrar, pero no ser enlaces | ['/books'] | opcional |
| ...descansar | objeto | Cualquier otro accesorio que pueda pasar | N/A: Difundir el enlace de migajas across | opcional |
Para obtener un ejemplo sobre el uso de
disableLinks/hiddenCrumbsconsulte https://github.com/sbardian/books
Para usar los estilos predeterminados, importe el archivo gatsby-plugin-breadcrumb.css en su archivo Gatsby-Browser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Si prefiere diseñar su propia cáscara de pan, aquí hay una lista de las clases utilizadas con el componente <Breadcrumb /> :
| clase | descripción |
|---|---|
breadcrumb__title | Aplicado al título de Breadcrumb ( <span> ) |
breadcrumb | Aplicado al contenedor de breadrumb ( <nav> ) |
breadcrumb__list | Aplicado a la lista ordenada de pan de pan ( <ol> ) |
breadcrumb__list__item | Aplicado a cada pan de pan 'migas' ( <li> ) |
breadcrumb__link | Aplicado al enlace de Breadcrumb ( <a> ) |
breadcrumb__link__active | Agregado al enlace actual ( <a> ) |
breadcrumb__link__disabled | Aplicado a las migajas que tienen enlaces deshabilitados ( <span> ) |
breadcrumb__separator | Aplicado a los separadores de paneles de pan ( <span> ) |
Aquí hay algunos Gotchas. Si nota más, cree que debe mencionarse aquí, envíe un PR o cree un problema.
En su opción gatsby-config.js siteMetaData.siteUrl Asegúrese de eliminar las bases finales
Los Gatsby <Link />'s en todo su sitio deben tener to tener propiedades que coincidan con su bandeja de pan to las propiedades para la clase breadcrumb__link__active que se aplicará. Las URL en su sitio también deben coincidir to las propiedades de la cáscara de pan para que las clases activas entren en vigencia.
Las URL de sus sitios pueden tener cortes finales, y el pan de pan to las URL podría no. Una opción es usar el complemento Gatsby-Plugin-Remove-Trailing-Slashes para garantizar que sus URL coincidan y se aplique la clase breadcrumb__link__active .
También puede pasar el componente <Breadcrumb> El alcance de alcance getProps una función para ajustar cuando se aplica la clase activa.
getprops Ejemplo/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 >
)
}
