gatsby plugin breadcrumb
v12.3.2
Este plug -in deve funcionar bem em Gatsby V2, V3 e V4.
yarn add gatsby-plugin-breadcrumbou
npm install gatsby-plugin-breadcrumb Existem duas maneiras de usar gatsby-plugin-breadcrumb para adicionar migalhas de pão ao seu site Gatsby: clique em Rastreamento e Autogen.
Clique em Rastreamento cria uma farinha de pão fora do caminho seguido (clicado) pelo usuário. As duas maneiras de usar o rastreamento de cliques são:
Usando o componente <Breadcrumb /> :
Adicione o plugin gatsby-plugin-breadcrumb ao seu gatsby-config.js
Importe e use o componente <Breadcrumb /> , passando os adereços necessários, nas páginas que você deseja ver a farinha de pão.
Usando o gancho useBreadcrumb : O gancho useBreadcrumb permite controlar suas próprias migalhas de pão, chamando useBreadcrumb e passando as propriedades necessárias do objeto. O uso do gancho permite que você passe a migna de pão para o seu próprio componente personalizado, mas ainda aproveita a lógica de rastreamento de rastreamento de gatsby-plugin-breadcrumbs .
Adicione o plugin gatsby-plugin-breadcrumb ao seu gatsby-config.js
Importe e use o gancho useBreadcrumb , passando as propriedades do objeto necessário.
O Autogen (gerado automaticamente) gerará uma farinha de rosca para cada página e as injetará em Gatsby Page pageContext Prop sob a propriedade breadcrumb .
Adicione o plugin gatsby-plugin-breadcrumb ao seu gatsby-config.js e defina a opção de plug-in useAutoGen para true
Obtenha uma matriz crumbs do objeto breadcrumb no pageContext
Importar e usar o componente <Breadcrumb /> , passando os adereços necessários nas páginas que você deseja ver a coragem
O uso do componente
<Breadcrumb />não é um requisito. Se você deseja criar seu próprio componente de farinha de pão e passar os dados da troca de pão dopageContext, isso é sempre uma opção.
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 >
)
} O componente <Breadcrumb /> fornece migalhas de pão padrão, além de permitir que você personalize essas migalhas, se desejar.
| prop | tipo | descrição | exemplos | obrigatório |
|---|---|---|---|---|
| localização | objeto | Prop de localização do roteador de alcance | Consulte o suporte de localização do roteador de alcance, aprovado por Gatsby para todas as páginas. | obrigatório |
| Crablabel | corda | Nome para a carrachada | "About Us" | obrigatório |
| título | corda | Título precedendo as migalhas | "Breadcrumbs: " , ">>>" | opcional |
| Crumbseparator | corda | Separador entre cada farinha de pão | " / " | opcional |
Em vez de adicionar o componente <Breadcrumb /> a todas as páginas, outra opção seria adicioná -lo a um componente de layout.
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 >
}
} Ao usar a opção de rastreamento de clique com o componente <Breadcrumb /> , se um usuário for diretamente para uma página, sua farinha de pão começará com essa página. Você pode sempre fornecer uma troca de pão padrão ou "em casa". Você pode fazer isso adicionando uma opção de plug -in defaultCrumb . Devemos estruturar a carranchas defaultCrumb que fornecemos de uma maneira que nosso contexto está esperando, veja abaixo um exemplo usando todas as opções disponíveis.
{
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 os estilos padrão, importe o arquivo gatsby-plugin-breadcrumb.css no seu arquivo gatsby-naveser.js.
gatsby-naveser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Se você preferir estilizar sua própria troca de pão, aqui está uma lista das classes usadas com o componente <Breadcrumb /> :
| aula | descrição |
|---|---|
breadcrumb__title | Aplicado ao título da farinha de pão ( <span> ) |
breadcrumb | Aplicado ao recipiente de farinha de pão ( <nav> ) |
breadcrumb__list | Aplicado à lista de pedidos de farinha ( <ol> ) |
breadcrumb__list__item | Aplicado a cada migalha de breção ( <li> ) |
breadcrumb__link | Aplicado ao link da coragem ( <a> ) |
breadcrumb__link__active | Adicionado ao link atual ( <a> ) |
breadcrumb__separator | Aplicado aos separadores de farinha de pão ( <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 >
)
} O gancho useBreadcrumb leva um objeto com as seguintes propriedades:
| prop | tipo | descrição | exemplos | obrigatório |
|---|---|---|---|---|
| localização | objeto | Prop de localização do roteador de alcance | Consulte o suporte de localização do roteador de alcance, aprovado por Gatsby para todas as páginas. | obrigatório |
| Crablabel | corda | Nome para a carrachada | "About Us" | obrigatório |
| Crumbseparator | corda | Separador entre cada farinha de pão | " / " | opcional |
useBreadcrumb retorna o seguinte:
| valor | tipo | descrição |
|---|---|---|
| Farofa | variedade | Matriz das migalhas atuais |
O gancho useBreadcrumb determinará se ele precisa adicionar, remover ou não fazer nada com a farinha de rosca com base no local que você passa. Você só precisa passar os adereços necessários ( location , crumbLabel ).
Codesandbox.io Demo
O Autogen (gerado automaticamente, anteriormente sitemap) usado para confiar no gatsby-plugin-sitemap , que cria um arquivo sitmap xml na pasta /public do seu site no final do site Build. Isso causou problemas ao implantar serviços como o Netlify, pois o arquivo XML não foi criado quando precisávamos tentar ler, fazendo com que a compilação falhe. Agora, o Autogen gera as farinhas à medida que as páginas são criadas. Também não exigimos mais o gatsby-plugin-remove-trailing-slashes .
Adicione o seguinte ao seu 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' ,
} ,
]
} A partir de V11, a opção exclude Array na configuração deste plug-in usa biblioteca de correspondência curinga. Você pode escrever strings curinga para excluir os caminhos para os quais não deseja criar trilhas de pão. Por favor, revise a biblioteca de correspondência curinga para obter mais detalhes sobre como escrever novas strings de exclusão.
Para atualizar para o V11 e manter um comportamento semelhante aos seus caminhos antigos excluídos, basta adicionar
**ao início e final de suas cordas excluídas
exemplo:
// old
exclude: [ '/books/', '/chapters/' ]
// new
exclude: [ '**/books/**', '**/chapters/**' ]
A opção de objeto excludeOptions é usada para passar as opções para configurar a biblioteca wildcard-match . Consulte a biblioteca de correspondência curinga para obter mais detalhes. Omitir esta opção usará as opções padrão.
/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 >
)
}| prop | tipo | descrição | exemplos | obrigatório |
|---|---|---|---|---|
| Farofa | variedade | Matriz de migalhas retorna do PageContext | n / D | obrigatório |
| título | corda | Título precedendo as migalhas | "Breadcrumbs: " , ">>>" | opcional |
| Crumbseparator | corda | Separador entre cada farinha de pão | " / " | opcional |
| Crablabel | corda | Substitua a etiqueta de migalhas do caminho XML | "About Us" | opcional |
| Hiddencrumbs | variedade | nomes de patins de migalhas para esconder | ['/books'] | opcional |
| desablelinks | variedade | nomes de patins de migalhas para mostrar, mas não sejam links | ['/books'] | opcional |
| ...descansar | objeto | Quaisquer outros adereços que você possa passar | N/A: Spread acréscimo link | opcional |
Para um exemplo sobre o uso de
disableLinks/hiddenCrumbsconsulte https://github.com/sbardian/books
Para usar os estilos padrão, importe o arquivo gatsby-plugin-breadcrumb.css no seu arquivo gatsby-naveser.js.
gatsby-naveser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Se você preferir estilizar sua própria troca de pão, aqui está uma lista das classes usadas com o componente <Breadcrumb /> :
| aula | descrição |
|---|---|
breadcrumb__title | Aplicado ao título da farinha de pão ( <span> ) |
breadcrumb | Aplicado ao recipiente de farinha de pão ( <nav> ) |
breadcrumb__list | Aplicado à lista de pedidos de farinha ( <ol> ) |
breadcrumb__list__item | Aplicado a cada migalha de breção ( <li> ) |
breadcrumb__link | Aplicado ao link da coragem ( <a> ) |
breadcrumb__link__active | Adicionado ao link atual ( <a> ) |
breadcrumb__link__disabled | Aplicado a migalhas que têm links desativados ( <span> ) |
breadcrumb__separator | Aplicado aos separadores de farinha de pão ( <span> ) |
Aqui estão alguns gotchas. Se você perceber mais que você acha que deve ser mencionado aqui, envie um PR ou crie um problema.
Na sua opção gatsby-config.js siteMetaData.siteUrl Certifique-se de remover quaisquer barras à direita
O gatsby <Link />'s em todo o seu site precisa ter to propriedades que correspondam à sua troca de pão to as propriedades para a classe breadcrumb__link__active a ser aplicada. Os URLs em seu site também precisam corresponder to propriedades da farinha de pão para classes ativas para entrar em vigor.
Os URLs de seus sites podem ter barras à direita, e a farinha de pão to os URLs pode não. Uma opção é usar o plug-in Gatsby-Plugin-Remove-Railing-Slashes para garantir que seus URLs correspondam e a classe breadcrumb__link__active seja aplicada.
Você também pode passar no componente <Breadcrumb> , os roteadores de alcance getProps A função para ajustar quando a classe ativa é aplicada.
getprops de roteador/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 >
)
}
