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