gatsby plugin breadcrumb Download - Unduh Kode Sumber gatsby plugin breadcrumb

Gatsby-plugin-breadcrumb

Remah roti untuk Gatsby

Contoh tangkapan layar yang menunjukkan remah roti - daftar tautan yang dipisahkan oleh tebasan untuk membantu navigasi

Instalasi
Penggunaan
Gotcha
- Berikan ini baca cepat untuk melihat masalah umum yang mungkin Anda hadapi saat menggunakan plugin ini!

Versi Gatsby

Plugin ini harus berfungsi dengan baik di Gatsby V2, V3, dan V4.

Instalasi

yarn add gatsby-plugin-breadcrumb

atau

npm install gatsby-plugin-breadcrumb

Penggunaan

Ada dua cara untuk menggunakan gatsby-plugin-breadcrumb untuk menambahkan remah roti ke situs gatsby Anda: klik pelacakan dan autogen.

Klik Pelacakan

Klik Pelacakan membuat remah roti di luar jalur yang diambil (diklik) oleh pengguna. Dua cara untuk menggunakan pelacakan klik adalah:

Menggunakan komponen <Breadcrumb /> :
- Tambahkan plugin gatsby-plugin-breadcrumb ke gatsby-config.js
- Impor dan gunakan komponen <Breadcrumb /> , melewati alat peraga yang diperlukan, pada halaman Anda ingin melihat remah roti.
  - Klik contoh pelacakan
  - Alat peraga remah roti
  - Remah roti dengan komponen tata letak
  - Remah roti dengan remah default
  - Menata remah roti
Menggunakan Hook useBreadcrumb : Hook useBreadcrumb memungkinkan Anda untuk mengontrol remah roti Anda sendiri, dengan memanggil useBreadcrumb dan melewati sifat objek yang diperlukan. Menggunakan Hook memungkinkan Anda untuk meneruskan remah roti ke komponen remah roti khusus Anda sendiri, tetapi tetap memanfaatkan batang gatsby-plugin-breadcrumbs klik logika pelacakan.
- Tambahkan plugin gatsby-plugin-breadcrumb ke gatsby-config.js
- Impor dan gunakan kait useBreadcrumb , melewati properti objek yang diperlukan.
  - Contoh UseBreadCrumb
  - UseBreadCrumb Props/Returns

Autogen

Autogen (Auto Dibuat) akan menghasilkan remah roti untuk setiap halaman dan menyuntikkannya ke pageContext Prop Page Gatsby di bawah properti breadcrumb .

Tambahkan plugin gatsby-plugin-breadcrumb ke gatsby-config.js dan tentukan opsi plugin useAutoGen ke true
Dapatkan crumbs Array dari Objek breadcrumb di pageContext
Impor dan gunakan komponen <Breadcrumb /> , lulus alat peraga yang diperlukan pada halaman yang ingin Anda lihat remah roti
- Contoh Autogen
- Alat peraga remah roti
- Menata remah roti

Penggunaan komponen <Breadcrumb /> bukan persyaratan. Jika Anda ingin membuat komponen remah roti sendiri, dan berikan data remah roti dari pageContext , ini selalu menjadi opsi.

Klik Contoh Pelacakan:

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

Komponen remah roti dengan klik pelacakan

Komponen <Breadcrumb /> menyediakan remah roti default, sementara juga memungkinkan Anda untuk menyesuaikan remah roti itu jika Anda mau.

Alat peraga remah roti dengan pelacakan klik

menopang	jenis	keterangan	contoh	diperlukan
Lokasi	obyek	Jangkau Prop Lokasi Router	Lihat Jangkauan Prop Lokasi Router, disahkan oleh Gatsby ke setiap halaman.	diperlukan
Crumblabel	rangkaian	Nama untuk remah roti	`"About Us"`	diperlukan
judul	rangkaian	Judul sebelum remah roti	`"Breadcrumbs: "` , `">>>"`	opsional
Crumbseparator	rangkaian	Pemisah di antara setiap remah roti	`" / "`	opsional

Opsi pelacakan klik lainnya

Alih -alih menambahkan komponen <Breadcrumb /> ke setiap halaman, opsi lain adalah menambahkannya ke komponen tata letak.

Klik contoh komponen tata letak pelacakan

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

Klik Contoh Pelacakan DefaultCrumb

Saat menggunakan opsi klik pelacakan dengan komponen <Breadcrumb /> , jika pengguna langsung ke halaman, remah roti Anda akan dimulai dengan halaman itu. Anda mungkin ingin selalu menyediakan remah roti default atau "rumah". Anda dapat melakukan ini dengan menambahkan opsi plugin defaultCrumb . Kita harus menyusun remah roti defaultCrumb yang kita sediakan dengan cara yang diharapkan konteks kita, lihat di bawah untuk contoh menggunakan semua opsi yang tersedia.

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

Klik gaya pelacakan dan nama kelas yang diterapkan pada elemen remah roti

Untuk menggunakan gaya default, silakan impor file gatsby-plugin-breadcrumb.css ke dalam file Gatsby Browser.js Anda.

gatsby-browser.js

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

Jika Anda lebih suka menata remah roti Anda sendiri, berikut adalah daftar kelas yang digunakan dengan komponen <Breadcrumb /> :

kelas	keterangan
`breadcrumb__title`	Diterapkan pada judul remah roti ( `<span>` )
`breadcrumb`	Diterapkan pada wadah remah roti ( `<nav>` )
`breadcrumb__list`	Diterapkan pada daftar yang dipesan oleh remah roti ( `<ol>` )
`breadcrumb__list__item`	Diterapkan pada setiap remah roti 'remah' ( `<li>` )
`breadcrumb__link`	Diterapkan pada tautan remah roti ( `<a>` )
`breadcrumb__link__active`	Ditambahkan ke tautan saat ini ( `<a>` )
`breadcrumb__separator`	Diterapkan pada pemisah remah roti ( `<span>` )

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

UseBreadCrumb Argumen dan pengembalian

Hook useBreadcrumb mengambil objek dengan properti berikut:

menopang	jenis	keterangan	contoh	diperlukan
Lokasi	obyek	Jangkau Prop Lokasi Router	Lihat Jangkauan Prop Lokasi Router, disahkan oleh Gatsby ke setiap halaman.	diperlukan
Crumblabel	rangkaian	Nama untuk remah roti	`"About Us"`	diperlukan
Crumbseparator	rangkaian	Pemisah di antara setiap remah roti	`" / "`	opsional

useBreadcrumb mengembalikan yang berikut:

nilai	jenis	keterangan
remah -remah	array	Array remah roti saat ini

Hook useBreadcrumb akan menentukan apakah perlu menambah, menghapus, atau tidak melakukan apa pun dengan remah roti berdasarkan lokasi yang Anda lewati. Anda hanya perlu meneruskannya alat peraga yang diperlukan ( location , crumbLabel ).

Contoh Autogen

Codesandbox.io demo

Autogen (Auto dihasilkan, sebelumnya sitemap) digunakan untuk mengandalkan gatsby-plugin-sitemap , yang membuat file XML Sitmap di /public situs Anda di akhir pembuatan situs. Hal ini menyebabkan masalah ketika menggunakan layanan seperti Netlify, karena file XML tidak dibuat ketika kami perlu mencoba membaca darinya, menyebabkan build gagal. Sekarang Autogen menghasilkan remah roti saat halaman dibuat. Kami juga tidak lagi membutuhkan gatsby-plugin-remove-trailing-slashes .

Tambahkan yang berikut ini ke Gatsby-Config Anda

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 mengecualikan array dan tidak termasuk opsi

Pada v11 opsi Array exclude di konfigurasi plugin ini menggunakan perpustakaan Wildcard-Match. Anda dapat menulis string wildcard untuk mengecualikan jalur yang tidak ingin Anda buat remah roti. Harap tinjau perpustakaan Wildcard-Match untuk perincian lebih lanjut tentang cara menulis string yang tidak dikecualikan.
Untuk meningkatkan ke V11 dan menjaga perilaku serupa dengan jalur lama Anda yang dikecualikan cukup tambahkan ** ke awal dan akhir dari string mengecualikan Anda
contoh:
```
 // old
exclude: [ '/books/', '/chapters/' ]

// new
exclude: [ '**/books/**', '**/chapters/**' ]
```
Opsi objek excludeOptions digunakan untuk lulus opsi untuk mengonfigurasi perpustakaan wildcard-match . Silakan lihat perpustakaan Wildcard-Match untuk lebih jelasnya. Menghilangkan opsi ini akan menggunakan opsi default.

Contoh komponen remah roti dengan 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 >
  )
}

Alat peraga remah roti dengan autogen

menopang	jenis	keterangan	contoh	diperlukan
remah -remah	array	Array of Crumbs Return dari PageContext	n/a	diperlukan
judul	rangkaian	Judul sebelum remah roti	`"Breadcrumbs: "` , `">>>"`	opsional
Crumbseparator	rangkaian	Pemisah di antara setiap remah roti	`" / "`	opsional
Crumblabel	rangkaian	Mengesampingkan label remumb dari XML Path	`"About Us"`	opsional
Hiddencrumbs	array	Jame Remah Tersembunyi	`['/books']`	opsional
Disablelinks	array	Jame remah untuk ditampilkan, tetapi tidak menjadi tautan	`['/books']`	opsional
...istirahat	obyek	Persekatan lain yang mungkin Anda lewati	N/A: SPREED Accross Crumb Link	opsional

Sebagai contoh tentang penggunaan disableLinks/hiddenCrumbs lihat https://github.com/sbardian/books

Gaya autogen dan nama kelas diterapkan pada elemen remah roti

Untuk menggunakan gaya default, silakan impor file gatsby-plugin-breadcrumb.css ke dalam file Gatsby Browser.js Anda.

gatsby-browser.js

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

Jika Anda lebih suka menata remah roti Anda sendiri, berikut adalah daftar kelas yang digunakan dengan komponen <Breadcrumb /> :

kelas	keterangan
`breadcrumb__title`	Diterapkan pada judul remah roti ( `<span>` )
`breadcrumb`	Diterapkan pada wadah remah roti ( `<nav>` )
`breadcrumb__list`	Diterapkan pada daftar yang dipesan oleh remah roti ( `<ol>` )
`breadcrumb__list__item`	Diterapkan pada setiap remah roti 'remah' ( `<li>` )
`breadcrumb__link`	Diterapkan pada tautan remah roti ( `<a>` )
`breadcrumb__link__active`	Ditambahkan ke tautan saat ini ( `<a>` )
`breadcrumb__link__disabled`	Diterapkan pada remah -remah yang memiliki tautan dinonaktifkan ( `<span>` )
`breadcrumb__separator`	Diterapkan pada pemisah remah roti ( `<span>` )

Gotcha

Inilah beberapa gotcha. Jika Anda memperhatikan lagi yang menurut Anda harus disebutkan di sini, kirimkan PR atau buat masalah.

Di opsi gatsby-config.js Anda siteMetaData.siteUrl

Gatsby <Link />'s di seluruh situs Anda harus to properti yang cocok dengan remah roti Anda to properti untuk breadcrumb__link__active class yang akan diterapkan. URL di situs Anda juga perlu mencocokkan to properti remah roti untuk kelas aktif untuk berlaku.

URL situs Anda mungkin memiliki garis miring, dan remah roti to URL mungkin tidak. Salah satu opsi adalah menggunakan plugin Gatsby-Plugin-Remove-Trailing-Slashes untuk memastikan URL Anda cocok dan kelas breadcrumb__link__active diterapkan.

Anda juga dapat melewati komponen <Breadcrumb> Komponen jangkauan router getProps menopang fungsi untuk menyempurnakan saat kelas aktif diterapkan.

Contoh Router `getprops` Router

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

Memperluas

gatsby plugin breadcrumb