gatsby plugin breadcrumb
v12.3.2
이 플러그인은 Gatsby V2, V3 및 V4에서 잘 작동해야합니다.
yarn add gatsby-plugin-breadcrumb또는
npm install gatsby-plugin-breadcrumb gatsby-plugin-breadcrumb 사용하여 Gatsby 사이트에 빵 부스러기를 추가하는 두 가지 방법이 있습니다. 추적 및 Autogen을 클릭하십시오.
클릭 추적은 사용자가 취한 (클릭)의 빵 부스러기를 만듭니다. 클릭 추적을 사용하는 두 가지 방법은 다음과 같습니다.
<Breadcrumb /> 구성 요소 사용 :
gatsby-config.js 에 플러그인 gatsby-plugin-breadcrumb 추가하십시오
필요한 소품을 전달하는 <Breadcrumb /> 구성 요소를 가져 와서 사용하십시오.
useBreadcrumb Hook 사용 : useBreadcrumb Hook를 사용하면 useBreadcrumb 호출하고 필요한 객체 속성을 전달하여 자신의 빵 부스러기를 제어 할 수 있습니다. 후크를 사용하면 빵 부스러기를 자신의 Custom Breadcrumb 구성 요소로 전달할 수 있지만 여전히 gatsby-plugin-breadcrumbs 클릭 추적 로직을 활용할 수 있습니다.
gatsby-config.js 에 플러그인 gatsby-plugin-breadcrumb 추가하십시오
필요한 객체 속성을 전달하여 useBreadcrumb 후크를 가져 와서 사용하십시오.
Autogen (자동 생성)은 각 페이지에 빵 부스러기를 생성하여 breadcrumb 속성의 Gatsby 페이지 pageContext Prop에 주입합니다.
gatsby-config.js 에 플러그인 gatsby-plugin-breadcrumb 추가하고 useAutoGen 플러그인 옵션을 true 로 정의하십시오.
pageContext 의 breadcrumb Object에서 crumbs 배열을 얻으십시오
<Breadcrumb /> 구성 요소를 가져오고 사용하여 필요한 소품을 페이지에 전달하십시오.
<Breadcrumb />구성 요소의 사용은 요구 사항이 아닙니다. 자신의 Breadcrumb 구성 요소를 만들고pageContext에서 Breadcrumb 데이터를 전달하려면 항상 옵션입니다.
Codesandbox.io 데모
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 /> 구성 요소는 기본 빵 부스러기를 제공하며 원하는 경우 빵 부스러기를 사용자 정의 할 수 있습니다.
| 소품 | 유형 | 설명 | 예 | 필수의 |
|---|---|---|---|---|
| 위치 | 물체 | 라우터 위치에 도달하십시오 | Gatsby가 전달한 REACH Router Location Prop을 참조하십시오. | 필수의 |
| crumblabel | 끈 | 빵 부스러기의 이름 | "About Us" | 필수의 |
| 제목 | 끈 | 빵 부스러기 이전의 제목 | "Breadcrumbs: " , ">>>" | 선택 과목 |
| Crumbseparator | 끈 | 각 빵 부스러기 사이의 분리기 | " / " | 선택 과목 |
모든 페이지에 <Breadcrumb /> 구성 요소를 추가하는 대신 다른 옵션은 레이아웃 구성 요소에 추가하는 것입니다.
Codesandbox.io 데모
/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 /> 구성 요소와 함께 클릭 추적 옵션을 사용하는 동안 사용자가 페이지로 직접 이동하면 BreadCrumb이 해당 페이지로 시작합니다. 항상 기본 또는 "집"빵 부스러기를 제공 할 수 있습니다. defaultCrumb 플러그인 옵션을 추가하여이를 수행 할 수 있습니다. 우리는 우리의 맥락이 기대하는 방식으로 제공하는 defaultCrumb Breadcrumb을 구성해야합니다. 사용 가능한 모든 옵션을 사용하는 예를 보려면 아래를 참조하십시오.
{
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 | Breadcrumb 제목 ( <span> )에 적용 |
breadcrumb | Breadcrumb 컨테이너에 적용 ( <nav> ) |
breadcrumb__list | 빵 부스러기 주문 목록 ( <ol> )에 적용 |
breadcrumb__list__item | 각 빵 부스러기 '부스러기'( <li> )에 적용 |
breadcrumb__link | Breadcrumb의 링크에 적용됩니다 ( <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 후크는 다음 속성을 가진 객체를 취합니다.
| 소품 | 유형 | 설명 | 예 | 필수의 |
|---|---|---|---|---|
| 위치 | 물체 | 라우터 위치에 도달하십시오 | Gatsby가 전달한 REACH Router Location Prop을 참조하십시오. | 필수의 |
| crumblabel | 끈 | 빵 부스러기의 이름 | "About Us" | 필수의 |
| Crumbseparator | 끈 | 각 빵 부스러기 사이의 분리기 | " / " | 선택 과목 |
useBreadcrumb 다음을 반환합니다.
| 값 | 유형 | 설명 |
|---|---|---|
| 부스러기 | 정렬 | 현재 빵 부스러기의 배열 |
useBreadcrumb 후크는 통과 한 위치에 따라 빵 부스러기를 추가, 제거 또는 아무것도하지 않아야하는지 확인합니다. 필요한 소품 ( location , crumbLabel ) 만 전달하면됩니다.
Codesandbox.io 데모
Autogen (Auto Genated, 이전 Siteemap)은 gatsby-plugin-sitemap 에 의존하는 데 사용되었으며 사이트 빌드 끝에 사이트의 /public 폴더에 SitMap XML 파일을 만듭니다. 이로 인해 XML 파일을 읽어야 할 때 XML 파일이 생성되지 않았으므로 빌드가 실패했기 때문에 NetLify와 같은 서비스에 배포 할 때 문제가 발생했습니다. 이제 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: " , ">>>" | 선택 과목 |
| Crumbseparator | 끈 | 각 빵 부스러기 사이의 분리기 | " / " | 선택 과목 |
| crumblabel | 끈 | XML 경로에서 부스러기 레이블을 무시하십시오 | "About Us" | 선택 과목 |
| Hiddencrumbs | 정렬 | 숨길 빵 부스러기의 길 | ['/books'] | 선택 과목 |
| disablelinks | 정렬 | 빵 부스러기의 경로 이름이지만 링크는 아닙니다 | ['/books'] | 선택 과목 |
| ...나머지 | 물체 | 당신이 통과 할 수있는 다른 소품 | N/A : 스프레드 accrumb 링크 | 선택 과목 |
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 | Breadcrumb 제목 ( <span> )에 적용 |
breadcrumb | Breadcrumb 컨테이너에 적용 ( <nav> ) |
breadcrumb__list | 빵 부스러기 주문 목록 ( <ol> )에 적용 |
breadcrumb__list__item | 각 빵 부스러기 '부스러기'( <li> )에 적용 |
breadcrumb__link | Breadcrumb의 링크에 적용됩니다 ( <a> ) |
breadcrumb__link__active | 현재 링크에 추가되었습니다 ( <a> ) |
breadcrumb__link__disabled | 링크 <span> 장애가있는 빵 부스러기에 적용 |
breadcrumb__separator | 빵 부스러기 분리기 <span> 적용 |
다음은 몇 가지 gotchas입니다. 더 이상 발견되면 여기에 언급되어야한다고 생각해야합니다. PR을 제출하거나 문제를 만듭니다.
gatsby-config.js 옵션 siteMetaData.siteUrl 에서 후행 슬래시를 제거하십시오.
사이트 전체의 Gatsby <Link />'s 빵 부스러기와 일치하는 속성 to 적용 할 breadcrumb__link__active 의 속성 to 맞춰야합니다. 사이트의 URL은 또한 활성 클래스가 적용되도록 Breadcrumb의 to 속성을 일치시켜야합니다.
귀하의 사이트 URL에는 후행 슬래시가있을 수 있으며 빵 부스러기는 URL to 맞지 않을 수 있습니다. 한 가지 옵션은 Gatsby-Plugin-Remove-Trailing-Slashes 플러그인을 사용하여 URL이 일치하고 breadcrumb__link__active 클래스가 적용되는지 확인하는 것입니다.
활성 클래스가 적용될 때 <Breadcrumb> breack routers the reach routers getProps prop a 함수를 전달할 수도 있습니다.
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 >
)
}
