gatsby plugin breadcrumb下載 - gatsby plugin breadcrumb源代碼下載

Gatsby-Plugin-breadcrumb

蓋茨比麵包屑

示例屏幕截圖顯示麵包屑 - 由斜線分隔的鏈接列表以幫助導航

安裝
用法
陷入困境
- 快速閱讀這些插件時可能會遇到的常見問題！

蓋茨比版本

該插件應在Gatsby V2，V3和V4上正常工作。

安裝

yarn add gatsby-plugin-breadcrumb

或者

npm install gatsby-plugin-breadcrumb

用法

有兩種方法可以使用gatsby-plugin-breadcrumb將麵包屑添加到您的蓋茨比網站上：單擊跟踪和自動化。

單擊跟踪

單擊跟踪會從用戶所採取的路徑（點擊）中創建一個麵包屑。使用點擊跟踪的兩種方法是：

使用<Breadcrumb />組件：
- 將插件gatsby-plugin-breadcrumb添加到您的gatsby-config.js
- 導入並使用<Breadcrumb />組件，通過所需的道具，在您希望看到麵包屑的頁面上。
  - 單擊跟踪示例
  - 麵包屑道具
  - 帶有佈局組件的麵包屑
  - 麵包屑和默認麵包屑
  - 造型麵包屑
使用useBreadcrumb鉤： useBreadcrumb鉤可通過調用useBreadcrumb並傳遞所需的對象屬性來控制自己的麵包屑。使用鉤子使您可以將麵包屑傳遞到自己的自定義麵包屑組件，但仍然可以利用gatsby-plugin-breadcrumbs單擊跟踪邏輯。
- 將插件gatsby-plugin-breadcrumb添加到您的gatsby-config.js
- 導入並使用useBreadcrumb鉤，傳遞所需的對象屬性。
  - USEBREADCRAMB示例
  - USEBREADCRABM PROP/RETURNS

自動基因

Autogen（自動生成）將為每個頁面生成麵包屑，並將其註入breadcrumb屬性下的pageContext Prop。

將插件gatsby-plugin-breadcrumb添加到您的gatsby-config.js中，並將useAutoGen插件選項定義為true
從pageContext的breadcrumb對象獲取crumbs陣列
導入並使用<Breadcrumb />組件，通過您希望看到BreadCrumb的頁面上經過所需的道具
- Autogen示例
- 麵包屑道具
- 造型麵包屑

使用<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通過GATE ROUTER位置道具，將其傳遞給每個頁面。	必需的
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麵包屑，請參見下面的使用所有可用選項的示例。

  {
    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>` ）

USEBREADCRUMB示例：

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 >
  )
}

USEBREADCRABB辯論和返回

useBreadcrumb鉤子採用以下屬性的對象：

支柱	類型	描述	例子	必需的
地點	目的	到達路由器位置道具	請參閱GATSBY通過GATE ROUTER位置道具，將其傳遞給每個頁面。	必需的
crumblabel	細繩	麵包屑的名字	`"About Us"`	必需的
Crumbseparator	細繩	每個麵包屑之間的分離器	`" / "`	選修的

useBreadcrumb返回以下內容：

價值	類型	描述
碎屑	大批	當前麵包屑的陣列

useBreadcrumb鉤將根據您經過的位置來確定它是否需要添加，刪除或無需使用麵包屑。您只需要將其傳遞所需的道具（ location ， crumbLabel ）即可。

Autogen示例

codesandbox.io演示

Autogen（自動生成的，以前的SiteMap）曾經依靠gatsby-plugin-sitemap ，該模型在網站構建末尾在您網站的/public文件夾中創建SitMap XML文件。這會在部署到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' ,
     } ,
  ]
}

Gatsby-config.js排除陣列和排除

截至v11，此插件的配置中的exclude數組選項使用通配符匹配庫。您可以編寫通配符弦以排除不想創建麵包屑的路徑。請查看通配符庫庫，以了解如何編寫新的排除字符串的更多詳細信息。
要升級到V11並保持與舊的排除路徑相似的行為，只需將**添加到排除字符串的開始和結尾
例子：
```
 // old
exclude: [ '/books/', '/chapters/' ]

// new
exclude: [ '**/books/**', '**/chapters/**' ]
```
excludeOptions對象選項用於傳遞選項以配置wildcard-match庫。有關更多詳細信息，請參閱通配符搭配庫。省略此選項將使用默認選項。

Autogen的麵包屑組件示例

/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']`	選修的
殘疾人鏈接	大批	碎屑的路徑名顯示，但不是鏈接	`['/books']`	選修的
...休息	目的	您可能通過的任何其他道具	N/A：傳播Cross 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必須必須to麵包屑to要應用的breadcrumb__link__active類的屬性相匹配。您網站中的URL還需要匹配麵包屑的to ，以使活動類生效。

您的網站URL可能會拖延斜線，而to URL的麵包屑可能不會。一種選擇是使用gatsby-plugin-remove-trailing-slashes插件來確保您的URL匹配和breadcrumb__link__active類。

您也可以通過<Breadcrumb>組件傳遞路由器getProps prop prop prop a在應用活動類時進行微調。

到達router `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 >
  )
}

展開

gatsby plugin breadcrumb