gatsby plugin breadcrumb Download - gatsby plugin breadcrumb Source Code Download

Gatsby-Plugin-Breadcrumb

Brotkrumen für Gatsby

Beispiel Screenshot mit Brotkrumen - eine Liste von Links, die durch Schrägstriche getrennt sind, um die Navigation zu unterstützen

Installation
Verwendung
Gotchas
- Lesen Sie diese schnell, um gemeinsame Probleme zu sehen, mit denen Sie möglicherweise mit diesem Plugin konfrontiert sind!

Gatsby -Versionen

Dieses Plugin sollte auf Gatsby V2, V3 und V4 gut funktionieren.

Installation

yarn add gatsby-plugin-breadcrumb

oder

npm install gatsby-plugin-breadcrumb

Verwendung

Es gibt zwei Möglichkeiten gatsby-plugin-breadcrumb zu verwenden, um Ihrer Gatsby-Site Brotkrumen hinzuzufügen: Klicken Sie auf Tracking und Autogen.

Klicken Sie auf Tracking

Klicken Sie auf das Tracking erstellt ein Brotkrumen aus dem vom Benutzer aufgenommenen Pfad (geklickt). Die beiden Möglichkeiten, Klickverfolgung zu verwenden, sind:

Verwenden der <Breadcrumb /> -Komponente:
- Fügen Sie das Plugin gatsby-plugin-breadcrumb zu Ihrem gatsby-config.js hinzu
- Importieren und verwenden Sie die <Breadcrumb /> -Komponente, übergeben Sie die erforderlichen Requisiten auf Seiten, die Sie beim Brotkrumb sehen möchten.
  - Klicken Sie auf das Tracking -Beispiel
  - Breadcrumb Requisiten
  - Breadcrumb mit Layoutkomponente
  - Breadcrumb mit Standardkrümel
  - Breadcrumb
Mit dem useBreadcrumb -Haken: Mit dem useBreadcrumb -Hook können Sie Ihre eigenen Brotkrumen steuern, indem Sie useBreadcrumb und die erforderlichen Objekteigenschaften übergeben. Mithilfe des Hakens können Sie die Brotkrumen an Ihre eigene Breadcrumb-Komponente übergeben, aber dennoch von gatsby-plugin-breadcrumbs Klick-Tracking-Logik nutzen.
- Fügen Sie das Plugin gatsby-plugin-breadcrumb zu Ihrem gatsby-config.js hinzu
- Importieren und verwenden Sie den useBreadcrumb -Haken und übergeben Sie die erforderlichen Objekteigenschaften.
  - UseBreadcrumb -Beispiel
  - UseBeadcrumb -Requisiten/-rücksendungen

Autogen

Autogen (automatisch generiert) erzeugt pageContext -Requisiten unter der breadcrumb -Eigenschaft.

Fügen Sie das Plugin gatsby-plugin-breadcrumb zu Ihrem gatsby-config.js hinzu und definieren Sie die Option useAutoGen -Plugin an true
Holen Sie sich crumbs Array aus breadcrumb -Objekt im pageContext
Importieren und <Breadcrumb />
- Autogen Beispiel
- Breadcrumb Requisiten
- Breadcrumb

Die Verwendung der <Breadcrumb /> -Komponente ist keine Anforderung. Wenn Sie Ihre eigene Brotcrumb -Komponente erstellen und die Breadcrumb -Daten von pageContext übergeben möchten, ist dies immer eine Option.

Klicken Sie auf das Verfolgung von Tracking:

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 -Komponente mit Klick -Tracking

Die <Breadcrumb /> -Komponente bietet Standard -Breadcrumbs und ermöglicht es Ihnen, diese Brotkrumen anzupassen, wenn Sie dies wünschen.

Breadcrumb -Requisiten mit Klick -Tracking

Stütze	Typ	Beschreibung	Beispiele	erforderlich
Standort	Objekt	Reichweite der Router -Standort -Requisite	Siehe Reach Router Standort -Requisite, übergeben von Gatsby zu jeder Seite.	erforderlich
Crumblabel	Saite	Name für das Brotkrumen	`"About Us"`	erforderlich
Titel	Saite	Titel vor den Semmelbröseln	`"Breadcrumbs: "` , `">>>"`	optional
Krümmer	Saite	Trennzeichen zwischen jedem Brotkrumb	`" / "`	optional

Andere Klick -Tracking -Optionen

Anstatt jeder Seite die <Breadcrumb /> -Komponente hinzuzufügen, besteht eine andere Option darin, sie einer Layoutkomponente hinzuzufügen.

Klicken Sie auf dem Beispiel für die Verfolgung von Layoutkomponenten

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

Klicken Sie auf das Beispiel für das Verfolgung von DefaultCrumb -Beispiel

Wenn Sie die Option "Tracking" mit der <Breadcrumb /> -Komponente klicken, beginnt Ihr Breadcrumb mit dieser Seite, wenn ein Benutzer direkt zu einer Seite geht. Möglicherweise möchten Sie immer einen Standard- oder "Zuhause" -Breadcrumb bereitstellen. Sie können dies tun, indem Sie eine defaultCrumb -Plugin -Option hinzufügen. Wir müssen das defaultCrumb wir in einer Weise, die unser Kontext erwartet, zur Verfügung stellt. Weitere Informationen finden Sie unter Verwendung aller verfügbaren Optionen.

  {
    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 : " / " ,
      } ,
    } ,
  } ,

Klicken Sie auf Tracking -Stile und Klassennamen, die auf Breadcrumb -Elemente angewendet werden

Um die Standardstile zu verwenden, importieren Sie bitte die Datei gatsby-plugin-breadcrumb.css in Ihre Datei gatsby-browser.js.

gatsby-browser.js

 import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css'

Wenn Sie lieber Ihr eigenes Brotcrumb stylen möchten, finden Sie hier eine Liste der Klassen, die mit der <Breadcrumb /> -Komponente verwendet werden:

Klasse	Beschreibung
`breadcrumb__title`	Auf den Breadcrumb -Titel angewendet ( `<span>` )
`breadcrumb`	Auf den Breadcrumb Container angewendet ( `<nav>` )
`breadcrumb__list`	Angewendet auf die Breadcrumb -Liste ( `<ol>` )
`breadcrumb__list__item`	Auf jedes Breadcrumb "Krümel" angewendet ( `<li>` )
`breadcrumb__link`	Angewendet auf den Link des Brotcrumb ( `<a>` )
`breadcrumb__link__active`	Hinzugefügt zum aktuellen Link ( `<a>` )
`breadcrumb__separator`	Auf die Brottrennscheider angewendet ( `<span>` )

UseBreadcrumb -Beispiel:

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

UseBeadcrumb -Argumente und Renditen

Der useBreadcrumb -Hook nimmt ein Objekt mit den folgenden Eigenschaften an:

Stütze	Typ	Beschreibung	Beispiele	erforderlich
Standort	Objekt	Reichweite der Router -Standort -Requisite	Siehe Reach Router Standort -Requisite, übergeben von Gatsby zu jeder Seite.	erforderlich
Crumblabel	Saite	Name für das Brotkrumen	`"About Us"`	erforderlich
Krümmer	Saite	Trennzeichen zwischen jedem Brotkrumb	`" / "`	optional

useBreadcrumb gibt Folgendes zurück:

Wert	Typ	Beschreibung
Krümel	Array	Array der aktuellen Semmelbrösel

Der useBreadcrumb -Haken bestimmt, ob sie basierend auf dem von Ihnen bestehenden Ort hinzufügen, entfernen oder nichts mit den Semmelbröseln tun müssen. Sie müssen nur die erforderlichen Requisiten ( location , crumbLabel ) übergeben.

Autogen Beispiel

Codesandbox.io Demo

Autogen (automatisch generiert, zuvor Sitemap) wurde verwendet, um sich auf gatsby-plugin-sitemap zu verlassen, das eine SitMap-XML-Datei im /public Ordner Ihrer Website am Ende des Site-Builds erstellt. Dies führte zu Problemen bei der Bereitstellung von Diensten wie Netlify, da die XML -Datei nicht erstellt wurde, wenn wir versuchen mussten, daraus zu lesen, was dazu führte, dass der Build fehlschlägt. Jetzt erzeugt Autogen die Semmelbrösel, sobald Seiten erzeugt werden. Wir benötigen auch das gatsby-plugin-remove-trailing-slashes -Plugin nicht mehr.

Fügen Sie Folgendes zu Ihrem Gatsby-Config hinzu

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 schließen Array aus und exkluedoptionen

Ab V11 verwendet die Option "Array exclude in der Konfiguration dieses Plugins die Wildcard-Match-Bibliothek. Sie können Wildcard -Saiten schreiben, um Pfade auszuschließen, für die Sie keine Brotkrumen erstellen möchten. Bitte überprüfen Sie die Wildcard-Match-Bibliothek, um weitere Einzelheiten zum Schreiben neuer Saiten auszuschließen.
Um auf V11 zu aktualisieren und ein ähnliches Verhalten wie ** alten ausgeschlossenen Pfade beizubehalten
Beispiel:
```
 // old
exclude: [ '/books/', '/chapters/' ]

// new
exclude: [ '**/books/**', '**/chapters/**' ]
```
Mit der Option excludeOptions -Objekt werden Optionen übergeben, um die wildcard-match -Bibliothek zu konfigurieren. Weitere Informationen finden Sie in der Wildcard-Match-Bibliothek. Wenn Sie diese Option auslassen, wird die Standardoptionen verwendet.

Breadcrumb -Komponentenbeispiel mit 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 >
  )
}

Breadcrumb -Requisiten mit Autogen

Stütze	Typ	Beschreibung	Beispiele	erforderlich
Krümel	Array	Krümelarchita kehren aus PageContext zurück	n / A	erforderlich
Titel	Saite	Titel vor den Semmelbröseln	`"Breadcrumbs: "` , `">>>"`	optional
Krümmer	Saite	Trennzeichen zwischen jedem Brotkrumb	`" / "`	optional
Crumblabel	Saite	Überschreien Sie Krümelbezeichnung vom XML -Pfad	`"About Us"`	optional
Hiddencrumbs	Array	Pfadnamen der Krümel zum Verstecken	`['/books']`	optional
Distanzlinks	Array	Pfadnamen der Krümel zu zeigen, aber keine Links sind	`['/books']`	optional
...ausruhen	Objekt	Alle anderen Requisiten, die Sie verabschieden können	N/A: Accross Crumb Link verteilen	optional

Ein Beispiel zur Verwendung von disableLinks/hiddenCrumbs siehe https://github.com/sbardian/books

Autickstile und Klassennamen, die auf Breadcrumb -Elemente angewendet werden

Um die Standardstile zu verwenden, importieren Sie bitte die Datei gatsby-plugin-breadcrumb.css in Ihre Datei gatsby-browser.js.

gatsby-browser.js

 import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css'

Wenn Sie lieber Ihr eigenes Brotcrumb stylen möchten, finden Sie hier eine Liste der Klassen, die mit der <Breadcrumb /> -Komponente verwendet werden:

Klasse	Beschreibung
`breadcrumb__title`	Auf den Breadcrumb -Titel angewendet ( `<span>` )
`breadcrumb`	Auf den Breadcrumb Container angewendet ( `<nav>` )
`breadcrumb__list`	Angewendet auf die Breadcrumb -Liste ( `<ol>` )
`breadcrumb__list__item`	Auf jedes Breadcrumb "Krümel" angewendet ( `<li>` )
`breadcrumb__link`	Angewendet auf den Link des Brotcrumb ( `<a>` )
`breadcrumb__link__active`	Hinzugefügt zum aktuellen Link ( `<a>` )
`breadcrumb__link__disabled`	Angewendet auf Krümel, die Links deaktiviert haben ( `<span>` )
`breadcrumb__separator`	Auf die Brottrennscheider angewendet ( `<span>` )

Gotchas

Hier sind ein paar Gotchas. Wenn Sie feststellen, dass Sie hier nachgeben, sollten Sie hier erwähnt werden, geben Sie eine PR ein oder erstellen Sie ein Problem.

In Ihrem gatsby-config.js Option siteMetaData.siteUrl entfernen

Die Gatsby <Link />'s auf Ihrer Website müssen to benötigen, die Ihren Breadcrumb to den Eigenschaften entsprechen, damit die breadcrumb__link__active -Klasse angewendet werden soll. Die URLs in Ihrer Website müssen auch to Eigenschaften des Brotbaums übereinstimmen, damit aktive Klassen wirksam werden können.

Ihre Websites -URLs haben möglicherweise nachfolgende Schrägstriche, und das Brotkrumb to URLs möglicherweise nicht. Eine Möglichkeit besteht darin, das Plugin von Gatsby-Plugin-Remove-Trailing-Slashes zu verwenden, um sicherzustellen, dass Ihre URLs-Übereinstimmung und die breadcrumb__link__active -Klasse angewendet werden.

Sie können auch getProps <Breadcrumb> -Komponente übergeben.

Reichweite Router `getprops` Beispiel

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

Expandieren

gatsby plugin breadcrumb