gatsby plugin breadcrumb
v12.3.2
このプラグインは、Gatsby V2、V3、およびV4で正常に動作するはずです。
yarn add gatsby-plugin-breadcrumbまたは
npm install gatsby-plugin-breadcrumbgatsby-plugin-breadcrumbを使用してGatsbyサイトにパン粉を追加する方法は2つあります。トラッキングとオートゲンをクリックします。
[トラッキング]をクリックすると、ユーザーが撮影（クリックした）パスからパン塊が作成されます。クリックトラッキングを使用する2つの方法は次のとおりです。
<Breadcrumb />コンポーネントを使用してください：
gatsby-config.jsにプラグgatsby-plugin-breadcrumbを追加します
<Breadcrumb />コンポーネントをインポートして使用し、必要な小道具を渡し、パン界を見たいページに渡します。
useBreadcrumbフックを使用する： useBreadcrumbフックを使用すると、 useBreadcrumb呼び出し、必要なオブジェクトプロパティを渡すことにより、独自のパン粉を制御できます。フックを使用すると、パン粉を独自のカスタムパンムクムコンポーネントに渡すことができますが、 gatsby-plugin-breadcrumbsを利用して、[追跡]ロジックをクリックします。
gatsby-config.jsにプラグgatsby-plugin-breadcrumbを追加します
必要なオブジェクトプロパティを通過して、 useBreadcrumbフックをインポートして使用します。
Autogen（Auto Gonated）は、各ページのパン粉を生成し、 breadcrumbプロパティの下でGatsbyページpageContext Propに注入します。
gatsby-plugin-breadcrumb gatsby-config.jsにプラグインGatsby-Plugin-Breadcrumbを追加し、 useAutoGenプラグインオプションをtrueに定義します
pageContextのbreadcrumbオブジェクトからcrumbs配列を取得します
<Breadcrumb />コンポーネントをインポートして使用し、パン界を見たいページに必要な小道具を渡す
<Breadcrumb />コンポーネントの使用は要件ではありません。独自のブレッドクランブコンポーネントを作成し、pageContextからパン界データを渡す場合は、これは常にオプションです。
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ですべてのページに渡されたRouter Location Propに到達してください。 | 必須 |
| crumblabel | 弦 | ブレッドクラムの名前 | "About Us" | 必須 |
| タイトル | 弦 | パン粉の前のタイトル | "Breadcrumbs: " 、 ">>>" | オプション |
| クラムセパレーター | 弦 | 各パンムの間の分離器 | " / " | オプション |
すべてのページに<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 />コンポーネントを使用してクリックトラッキングオプションを使用している間、ユーザーがページに直接移動する場合、ブレッドクランブはそのページで開始されます。常にデフォルトまたは「ホーム」のパン粉を提供することをお勧めします。これを行うには、 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 | 各ブレッドクラム「パン粉」に適用される（ <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フックは、次のプロパティを備えたオブジェクトを取得します。
| 小道具 | タイプ | 説明 | 例 | 必須 |
|---|---|---|---|---|
| 位置 | 物体 | ルーターのロケーションプロップに到達します | Gatsbyですべてのページに渡されたRouter Location Propに到達してください。 | 必須 |
| crumblabel | 弦 | ブレッドクラムの名前 | "About Us" | 必須 |
| クラムセパレーター | 弦 | 各パンムの間の分離器 | " / " | オプション |
useBreadcrumb次のものを返します。
| 価値 | タイプ | 説明 |
|---|---|---|
| パン粉 | 配列 | 現在のパン粉の配列 |
useBreadcrumbフックは、通過する場所に基づいてパン粉を追加、削除、または行う必要があるかどうかを判断します。必要な小道具（ location 、 crumbLabel ）を渡すだけです。
codesandbox.ioデモ
gatsby-plugin-sitemapに依存するために使用されるAutogen（Auto Gonated、以前のサイトマップ）は、サイトビルドの最後にサイトの/publicフォルダーにSitmap XMLファイルを作成します。これにより、Netlifyのようなサービスに展開するときに問題が発生しました。これは、XMLファイルを読み取ろうとする必要があり、ビルドが故障するために作成されなかったためです。これで、Pageが作成されると、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配列オプションは、ワイルドカードマッチライブラリを使用します。ワイルドカードの文字列を書いて、パン粉を作成したくないパスを除外できます。新しい除外文字列を書く方法の詳細については、WildCard-Matchライブラリを確認してください。
V11にアップグレードし、古い除外されたパスと同様の動作を維持するには、除外文字列の開始と終了に
**を追加するだけです
例：
// old
exclude: [ '/books/', '/chapters/' ]
// new
exclude: [ '**/books/**', '**/chapters/**' ]
excludeOptionsオブジェクトオプションはwildcard-matchライブラリを構成するオプションを渡すために使用されます。詳細については、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'] | オプション |
| DisableLinks | 配列 | リンクではありませんが、表示しますが、パスネームは表示されません | ['/books'] | オプション |
| ...休む | 物体 | あなたが合格するかもしれない他の小道具 | n/a：accross crumbリンクを広げます | オプション |
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 | 各ブレッドクラム「パン粉」に適用される（ <li> ） |
breadcrumb__link | ブレッドクランブのリンクに適用されます（ <a> ） |
breadcrumb__link__active | 現在のリンク（ <a> ）に追加 |
breadcrumb__link__disabled | リンクが無効になっているパン粉に適用されます（ <span> ） |
breadcrumb__separator | パンムセパレーターに適用されます（ <span> ） |
ここにいくつかのゴッチャがあります。ここで言及すべきだと思うことに気づいた場合は、PRを提出するか、問題を作成します。
gatsby-config.jsオプションsiteMetaData.siteUrl
Gatsby <Link />'sパンrumb rumb breadcrumb__link__activeクラスのプロパティto合わせたプロパティを適用するtoがあります。サイト内のURLは、アクティブクラスが有効になるためにパン界のプロパティto合わせて一致する必要があります。
あなたのサイトのURLには、後続のスラッシュがあるかもしれません、そして、URL toパン粉はそうではないかもしれません。 1つのオプションは、Gatsby-Plugin-Remove-Trailing-Slashesプラグインを使用して、URLの一致とbreadcrumb__link__activeクラスが適用されるようにすることです。
また、アクティブクラスが適用されたときに、 <Breadcrumb>コンポーネントgetProps渡すこともできます。
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 >
)
}
