gatsby plugin breadcrumb
v12.3.2
Этот плагин должен работать нормально на Gatsby V2, V3 и V4.
yarn add gatsby-plugin-breadcrumbили
npm install gatsby-plugin-breadcrumb Есть два способа использовать gatsby-plugin-breadcrumb , чтобы добавить хлебные крошки на ваш сайт Gatsby: нажмите «Отслеживание и автоген».
Нажмите на отслеживание создает хлебную рубку из пути, взятого (нажатый) пользователем. Два способа использования отслеживания кликов:
Использование компонента <Breadcrumb /> :
Добавьте плагин gatsby-plugin-breadcrumb в свой gatsby-config.js
Импортируйте и используйте компонент <Breadcrumb /> , передавая требуемые реквизиты, на страницах, которые вы хотите увидеть.
Используя useBreadcrumb Hook: крючок useBreadcrumb позволяет управлять собственными сухарями, вызовите useBreadcrumb и передавая необходимые свойства объекта. Использование крюка позволяет вам передавать хлебные крошки в свой собственный компонент хлебного крошки, но все же воспользуйтесь преимуществами gatsby-plugin-breadcrumbs нажимайте логику отслеживания.
Добавьте плагин gatsby-plugin-breadcrumb в свой gatsby-config.js
Импортируйте и используйте крюк useBreadcrumb , передавая требуемые свойства объекта.
Autogen (Auto General) будет генерировать панировочные сухари для каждой страницы и вводить их в pageContext Prape Gatsby Page под свойством breadcrumb .
Добавьте плагин gatsby-plugin-breadcrumb в свой gatsby-config.js и определите опцию плагина useAutoGen на true
Получить массив crumbs от объекта breadcrumb в pageContext
Импортируйте и используйте компонент <Breadcrumb /> , передавая необходимые реквизиты на страницах, которые вы хотите увидеть
Использование компонента
<Breadcrumb />не является требованием. Если вы хотите создать свой собственный компонент хлебной крошки и передайте его данными Breadcrumb изpageContext, это всегда вариант.
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 >
)
} Компонент <Breadcrumb /> обеспечивает хлебные крошки по умолчанию, а также позволяет вам настраивать эти сухари, если вы хотите.
| проп | тип | описание | примеры | необходимый |
|---|---|---|---|---|
| расположение | объект | Достигнуть местоположение маршрутизатора | См. Достижение Router Location Prop, передаваемая Гэтсби на каждую страницу. | необходимый |
| Crumblabel | нить | Название для хлебной крошки | "About Us" | необходимый |
| заголовок | нить | Название предшествует хлебным крошкам | "Breadcrumbs: " , ">>>" | необязательный |
| крошка | нить | Сепаратор между каждым хлебным | " / " | необязательный |
Вместо того, чтобы добавлять компонент <Breadcrumb /> на каждую страницу, другой вариант будет добавить его в компонент макета.
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 >
}
} При использовании параметра отслеживания щелчков с компонентом <Breadcrumb /> , если пользователь переходит непосредственно на страницу, ваша хлебная крошка начнется с этой страницы. Вы можете всегда предоставить по умолчанию или «домашний» хлебник. Вы можете сделать это, добавив опцию плагина defaultCrumb . Мы должны структурировать хлебную крошку defaultCrumb которую мы предоставляем таким образом, как ожидается наш контекст, см. Ниже пример, используя все доступные варианты.
{
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 : " / " ,
} ,
} ,
} , Чтобы использовать стили по умолчанию, импортируйте файл gatsby-plugin-breadcrumb.css в свой файл gatsby-browser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Если вы предпочитаете придумать свой собственный хлебная крошка, вот список классов, используемых с компонентом <Breadcrumb /> :
| сорт | описание |
|---|---|
breadcrumb__title | Нанесен к названию хлебной крошки ( <span> ) |
breadcrumb | Применяется к контейнеру хлебного крошки ( <nav> ) |
breadcrumb__list | Применяется к упорядоченному списку хлебной крошки ( <ol> ) |
breadcrumb__list__item | Нанесен на каждую хлебную крошку 'Crumbs' ( <li> ) |
breadcrumb__link | Применяется к ссылке хлебной крошки ( <a> ) |
breadcrumb__link__active | Добавлено к текущей ссылке ( <a> ) |
breadcrumb__separator | Применяется к сепараторам хлебной крошки ( <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 >
)
} Крюк useBreadcrumb берет объект со следующими свойствами:
| проп | тип | описание | примеры | необходимый |
|---|---|---|---|---|
| расположение | объект | Достигнуть местоположение маршрутизатора | См. Достижение Router Location Prop, передаваемая Гэтсби на каждую страницу. | необходимый |
| Crumblabel | нить | Название для хлебной крошки | "About Us" | необходимый |
| крошка | нить | Сепаратор между каждым хлебным | " / " | необязательный |
useBreadcrumb возвращает следующее:
| ценить | тип | описание |
|---|---|---|
| крошки | множество | Массив текущих сухан |
Крюк useBreadcrumb определит, нужно ли ему добавить, удалить или ничего не делать с панировочными сухарями на основе места, которое вы проходите. Вам нужно только передать его необходимые реквизиты ( location , crumbLabel ).
CodeSandbox.io Demo
Autogen (Auto General, ранее Sitemap), используемый для полагаться на gatsby-plugin-sitemap , который создает файл Sitmap XML в /public папке вашего сайта в конце сборки сайта. Это вызвало проблемы при развертывании в таких услугах, как NetLify, поскольку файл XML не был создан, когда нам нужно было попытаться прочитать из него, что привело к сбое сборки. Теперь Autogen генерирует сухари, когда создаются страницы. Нам также больше не требуется плагин gatsby-plugin-remove-trailing-slashes .
Добавьте следующее в свой 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' ,
} ,
]
} Начиная с v11 опция массива exclude в конфигурации этого плагина использует библиотеку подстановочных знаков. Вы можете написать строки с подстановочными знаками, чтобы исключить пути, для которых вы не хотите создавать хлебные крошки. Пожалуйста, просмотрите библиотеку подстановочного знака для получения более подробной информации о том, как написать новые исключительные строки.
Чтобы перейти на V11 и сохранить одинаковое поведение с вашими старыми исключенными путями, просто добавьте
**к началу и концу ваших исключающих строк
пример:
// old
exclude: [ '/books/', '/chapters/' ]
// new
exclude: [ '**/books/**', '**/chapters/**' ]
Опция объекта excludeOptions используется для передачи параметров для настройки библиотеки wildcard-match . Пожалуйста, смотрите библиотеку подстановочного знака для получения более подробной информации. Отказ этого параметра будет использовать параметры по умолчанию.
/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 >
)
}| проп | тип | описание | примеры | необходимый |
|---|---|---|---|---|
| крошки | множество | Массив крошек возвращается из PageContext | n/a | необходимый |
| заголовок | нить | Название предшествует хлебным крошкам | "Breadcrumbs: " , ">>>" | необязательный |
| крошка | нить | Сепаратор между каждым хлебным | " / " | необязательный |
| Crumblabel | нить | Переопределить меток крошки с пути XML | "About Us" | необязательный |
| Hiddencrumbs | множество | Путы крошек, чтобы скрыть | ['/books'] | необязательный |
| инвалиды | множество | Путы, чтобы показать, но не быть ссылками | ['/books'] | необязательный |
| ...отдых | объект | Любой другой реквизит, который вы можете пройти | N/A: распространять ссылку на крошку | необязательный |
Для примера использования
disableLinks/hiddenCrumbsсм. Https://github.com/sbardian/books
Чтобы использовать стили по умолчанию, импортируйте файл gatsby-plugin-breadcrumb.css в свой файл gatsby-browser.js.
Gatsby-Browser.js
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css' Если вы предпочитаете придумать свой собственный хлебная крошка, вот список классов, используемых с компонентом <Breadcrumb /> :
| сорт | описание |
|---|---|
breadcrumb__title | Нанесен к названию хлебной крошки ( <span> ) |
breadcrumb | Применяется к контейнеру хлебного крошки ( <nav> ) |
breadcrumb__list | Применяется к упорядоченному списку хлебной крошки ( <ol> ) |
breadcrumb__list__item | Нанесен на каждую хлебную крошку 'Crumbs' ( <li> ) |
breadcrumb__link | Применяется к ссылке хлебной крошки ( <a> ) |
breadcrumb__link__active | Добавлено к текущей ссылке ( <a> ) |
breadcrumb__link__disabled | Применяется к крошкам с отключенными ссылками ( <span> ) |
breadcrumb__separator | Применяется к сепараторам хлебной крошки ( <span> ) |
Вот несколько Gotchas. Если вы заметите, что вы думаете, что вы считаете, что здесь следует упомянуть, отправьте PR или создайте проблему.
В вашем gatsby-config.js опция siteMetaData.siteUrl Обязательно удалите любые следы зацепления
Gatsby <Link />'s на протяжении всего вашего сайта необходимо иметь to , которые соответствуют вашему хлебному курсу to свойствами для применения класса breadcrumb__link__active . URL -адреса на вашем сайте также должны соответствовать to хлебного кровотечения для активных классов, чтобы вступить в силу.
У URL -адреса на ваших сайтах могут быть следы затяжкой, а хлебопечка to URL -адресам может нет. Одним из вариантов является использование плагина Gatsby-Plugin-Remove-Trailing-Slashes, чтобы гарантировать, что ваши URL-адреса соответствуют и применяются класс breadcrumb__link__active .
Вы также можете передать компонент <Breadcrumb> reach маршрутизаторы getProps prop функция для точной настройки при применении активного класса.
getprops Router/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 >
)
}
