ดาวน์โหลด gatsby plugin breadcrumb - gatsby plugin breadcrumb Source Download Download

Gatsby-Plugin-Breadcrumb

breadcrumbs สำหรับ gatsby

ตัวอย่างภาพหน้าจอแสดง breadcrumbs - รายการลิงก์คั่นด้วยสแลชเพื่อช่วยในการนำทาง

การติดตั้ง
การใช้งาน
gotchas
- ให้การอ่านอย่างรวดเร็วเหล่านี้เพื่อดูปัญหาทั่วไปที่คุณอาจเผชิญในขณะที่ใช้ปลั๊กอินนี้!

Gatsby เวอร์ชัน

ปลั๊กอินนี้ควรทำงานได้ดีบน Gatsby V2, V3 และ V4

การติดตั้ง

yarn add gatsby-plugin-breadcrumb

หรือ

npm install gatsby-plugin-breadcrumb

การใช้งาน

มีสองวิธีในการใช้ gatsby-plugin-breadcrumb เพื่อเพิ่ม breadcrumbs ไปยังไซต์ Gatsby ของคุณ: คลิกการติดตามและ autogen

คลิกการติดตาม

คลิกการติดตามสร้าง breadcrumb จากเส้นทางที่ใช้ (คลิก) โดยผู้ใช้ สองวิธีในการใช้การติดตามคลิกคือ:

การใช้ส่วนประกอบ <Breadcrumb /> :
- เพิ่มปลั๊กอิน gatsby-plugin-breadcrumb ลงใน gatsby-config.js ของคุณ
- นำเข้าและใช้ส่วนประกอบ <Breadcrumb /> ผ่านอุปกรณ์ประกอบฉากที่จำเป็นในหน้าเว็บที่คุณต้องการเห็น breadcrumb
  - คลิกตัวอย่างการติดตาม
  - อุปกรณ์ประกอบฉาก breadcrumb
  - breadcrumb พร้อมส่วนประกอบเลย์เอาต์
  - breadcrumb กับ crumb เริ่มต้น
  - จัดแต่งทรงผม Breadcrumb
การใช้เบ็ด useBreadcrumb : useBreadcrumb hook ช่วยให้คุณสามารถควบคุม breadcrumbs ของคุณเองโดยการเรียกใช้ useBreadcrumb และผ่านคุณสมบัติของวัตถุที่ต้องการ การใช้ตะขอช่วยให้คุณสามารถผ่าน breadcrumbs ไปยังส่วนประกอบ breadcrumb ที่กำหนดเองของคุณเอง แต่ยังคงใช้ประโยชน์จาก gatsby-plugin-breadcrumbs คลิกตรรกะการติดตาม
- เพิ่มปลั๊กอิน gatsby-plugin-breadcrumb ลงใน gatsby-config.js ของคุณ
- นำเข้าและใช้เบ็ด useBreadcrumb ผ่านคุณสมบัติของวัตถุที่ต้องการ
  - ตัวอย่าง useBreadCrumb
  - อุปกรณ์ประกอบฉาก/ผลตอบแทน useBreadCrumb

autogen

Autogen (สร้างอัตโนมัติ) จะสร้าง breadcrumbs สำหรับแต่ละหน้าและฉีดเข้าไปในหน้า Gatsby pageContext Prop ภายใต้คุณสมบัติ breadcrumb

เพิ่มปลั๊กอิน gatsby-plugin-breadcrumb ลงใน gatsby-config.js ของคุณและกำหนดตัวเลือกปลั๊กอิน useAutoGen เป็น true
รับ crumbs array จากวัตถุ breadcrumb ใน pageContext
นำเข้าและใช้ส่วนประกอบ <Breadcrumb /> ส่งผ่านอุปกรณ์ประกอบฉากที่จำเป็นในหน้าเว็บที่คุณต้องการเห็น breadcrumb
- ตัวอย่าง autogen
- อุปกรณ์ประกอบฉาก breadcrumb
- จัดแต่งทรงผม Breadcrumb

การใช้ส่วนประกอบ <Breadcrumb /> ไม่ได้เป็นข้อกำหนด หากคุณต้องการสร้างส่วนประกอบ breadcrumb ของคุณเองและส่งผ่านข้อมูล breadcrumb จาก pageContext นี่เป็นตัวเลือกเสมอ

คลิกตัวอย่างการติดตาม:

demo 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 พร้อมการติดตามคลิก

ส่วนประกอบ <Breadcrumb /> ให้ breadcrumbs เริ่มต้นในขณะเดียวกันก็ช่วยให้คุณปรับแต่ง breadcrumbs เหล่านั้นหากคุณต้องการ

อุปกรณ์ประกอบฉาก Breadcrumb พร้อมการติดตามคลิก

ข้อต่อ	พิมพ์	คำอธิบาย	ตัวอย่าง	ที่จำเป็น
ที่ตั้ง	วัตถุ	ไปถึงตำแหน่งเราเตอร์	ดู Prop ที่ตั้งเราเตอร์ที่ผ่านมาโดย Gatsby ไปยังทุกหน้า	ที่จำเป็น
crumblabel	สาย	ชื่อสำหรับ breadcrumb	`"About Us"`	ที่จำเป็น
ชื่อ	สาย	ชื่อก่อนหน้า breadcrumbs	`"Breadcrumbs: "` , `">>>"`	ไม่จำเป็น
crumbsparator	สาย	ตัวคั่นระหว่างแต่ละขนมปัง	`" / "`	ไม่จำเป็น

ตัวเลือกการติดตามคลิกอื่น ๆ

แทนที่จะเพิ่มส่วนประกอบ <Breadcrumb /> ในทุกหน้าตัวเลือกอื่นคือการเพิ่มลงในองค์ประกอบเลย์เอาต์

คลิกตัวอย่างองค์ประกอบเค้าโครง

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

คลิกการติดตามตัวอย่าง defaultcrumb

ในขณะที่ใช้ตัวเลือกการคลิกคลิกด้วยส่วนประกอบ <Breadcrumb /> หากผู้ใช้ไปที่หน้าโดยตรง Breadcrumb ของคุณจะเริ่มต้นด้วยหน้านั้น คุณอาจต้องการให้ breadcrumb เริ่มต้นหรือ "บ้าน" เสมอ คุณสามารถทำได้โดยเพิ่มตัวเลือกปลั๊กอิน defaultCrumb เราต้องจัดโครงสร้าง breadcrumb 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 : " / " ,
      } ,
    } ,
  } ,

คลิกสไตล์การติดตามและชื่อคลาสที่ใช้กับองค์ประกอบ Breadcrumb

หากต้องการใช้สไตล์เริ่มต้นโปรดนำเข้าไฟล์ gatsby-plugin-breadcrumb.css ลงในไฟล์ gatsby-browser.js ของคุณ

gatsby-browser.js

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

หากคุณต้องการจัดสไตล์ breadcrumb ของคุณเองนี่คือรายการของคลาสที่ใช้กับองค์ประกอบ <Breadcrumb /> :

ระดับ	คำอธิบาย
`breadcrumb__title`	นำไปใช้กับชื่อ Breadcrumb ( `<span>` )
`breadcrumb`	นำไปใช้กับภาชนะ breadcrumb ( `<nav>` )
`breadcrumb__list`	นำไปใช้กับรายการที่สั่งซื้อ breadcrumb ( `<ol>` )
`breadcrumb__list__item`	นำไปใช้กับ 'crumbs' breadcrumb แต่ละตัว ( `<li>` )
`breadcrumb__link`	นำไปใช้กับลิงค์ของ breadcrumb ( `<a>` )
`breadcrumb__link__active`	เพิ่มไปยังลิงค์ปัจจุบัน ( `<a>` )
`breadcrumb__separator`	นำไปใช้กับตัวคั่น breadcrumb ( `<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 >
  )
}

อาร์กิวเมนต์ useBreadCrumb และผลตอบแทน

เบ็ด useBreadcrumb ใช้วัตถุที่มีคุณสมบัติต่อไปนี้:

ข้อต่อ	พิมพ์	คำอธิบาย	ตัวอย่าง	ที่จำเป็น
ที่ตั้ง	วัตถุ	ไปถึงตำแหน่งเราเตอร์	ดู Prop ที่ตั้งเราเตอร์ที่ผ่านมาโดย Gatsby ไปยังทุกหน้า	ที่จำเป็น
crumblabel	สาย	ชื่อสำหรับ breadcrumb	`"About Us"`	ที่จำเป็น
crumbsparator	สาย	ตัวคั่นระหว่างแต่ละขนมปัง	`" / "`	ไม่จำเป็น

useBreadcrumb ส่งคืนสิ่งต่อไปนี้:

ค่า	พิมพ์	คำอธิบาย
เศษไม้	อาร์เรย์	อาร์เรย์ของ breadcrumbs ปัจจุบัน

เบ็ด useBreadcrumb จะพิจารณาว่าจำเป็นต้องเพิ่มลบหรือไม่ทำอะไรเลยกับ breadcrumbs ตามตำแหน่งที่คุณผ่านหรือไม่ คุณจะต้องผ่านอุปกรณ์ประกอบฉากที่จำเป็น ( location crumbLabel )

ตัวอย่าง autogen

demo codesandbox.io

Autogen (Auto สร้างขึ้นก่อนหน้านี้ Sitemap) ใช้ในการพึ่งพา gatsby-plugin-sitemap ซึ่งสร้างไฟล์ SITMAP XML ในโฟลเดอร์ /public ของเว็บไซต์ของคุณในตอนท้ายของการสร้างไซต์ สิ่งนี้ทำให้เกิดปัญหาเมื่อปรับใช้กับบริการเช่น NetLify เนื่องจากไฟล์ XML ไม่ได้ถูกสร้างขึ้นเมื่อเราต้องการลองอ่านจากมันทำให้การสร้างล้มเหลว ตอนนี้ Autogen สร้าง breadcrumbs เป็นหน้าถูกสร้างขึ้น นอกจากนี้เรายังไม่ต้องการปลั๊กอิน 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 ไม่รวมอาร์เรย์และการยกเว้น

at v11 ตัวเลือกอาร์เรย์ exclude ในการกำหนดค่าของปลั๊กอินนี้ใช้ไลบรารีการจับคู่ไวด์การ์ด คุณสามารถเขียนสตริงไวด์การ์ดเพื่อยกเว้นเส้นทางที่คุณไม่ต้องการสร้าง breadcrumbs สำหรับ โปรดตรวจสอบห้องสมุดการแข่งขัน Wildcard สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการเขียนสตริงยกเว้นใหม่
ในการอัพเกรดเป็น v11 และรักษาพฤติกรรมที่คล้ายกันกับเส้นทางที่ไม่รวมเก่าของคุณเพียงเพิ่ม ** ไปยังจุดเริ่มต้นและจุดสิ้นสุดของสตริงยกเว้นของคุณ
ตัวอย่าง:
```
 // old
exclude: [ '/books/', '/chapters/' ]

// new
exclude: [ '**/books/**', '**/chapters/**' ]
```
ตัวเลือก Object excludeOptions ใช้เพื่อผ่านตัวเลือกเพื่อกำหนดค่าไลบรารี wildcard-match โปรดดูห้องสมุดการแข่งขัน Wildcard สำหรับรายละเอียดเพิ่มเติม การละเว้นตัวเลือกนี้จะใช้ตัวเลือกเริ่มต้น

ตัวอย่างส่วนประกอบ breadcrumb กับ 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 กับ autogen

ข้อต่อ	พิมพ์	คำอธิบาย	ตัวอย่าง	ที่จำเป็น
เศษไม้	อาร์เรย์	อาร์เรย์ของ crumbs กลับจาก pagecontext	N/A	ที่จำเป็น
ชื่อ	สาย	ชื่อก่อนหน้า breadcrumbs	`"Breadcrumbs: "` , `">>>"`	ไม่จำเป็น
crumbsparator	สาย	ตัวคั่นระหว่างแต่ละขนมปัง	`" / "`	ไม่จำเป็น
crumblabel	สาย	แทนที่ฉลาก crumb จากเส้นทาง XML	`"About Us"`	ไม่จำเป็น
Hiddencrumbs	อาร์เรย์	ชื่อพา ธ ของ crumbs เพื่อซ่อน	`['/books']`	ไม่จำเป็น
disablelinks	อาร์เรย์	ชื่อพา ธ ของ crumbs ที่จะแสดง แต่ไม่ใช่ลิงก์	`['/books']`	ไม่จำเป็น
...พักผ่อน	วัตถุ	อุปกรณ์ประกอบฉากอื่น ๆ ที่คุณอาจผ่าน	N/A: ลิงค์ Crumb Spread	ไม่จำเป็น

ตัวอย่างเกี่ยวกับการใช้ disableLinks/hiddenCrumbs ดู https://github.com/sbardian/books

รูปแบบ autogen และชื่อคลาสที่ใช้กับองค์ประกอบ breadcrumb

gatsby-browser.js

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

ระดับ	คำอธิบาย
`breadcrumb__title`	นำไปใช้กับชื่อ Breadcrumb ( `<span>` )
`breadcrumb`	นำไปใช้กับภาชนะ breadcrumb ( `<nav>` )
`breadcrumb__list`	นำไปใช้กับรายการที่สั่งซื้อ breadcrumb ( `<ol>` )
`breadcrumb__list__item`	นำไปใช้กับ 'crumbs' breadcrumb แต่ละตัว ( `<li>` )
`breadcrumb__link`	นำไปใช้กับลิงค์ของ breadcrumb ( `<a>` )
`breadcrumb__link__active`	เพิ่มไปยังลิงค์ปัจจุบัน ( `<a>` )
`breadcrumb__link__disabled`	นำไปใช้กับ crumbs ที่มีลิงก์ปิดใช้งาน ( `<span>` )
`breadcrumb__separator`	นำไปใช้กับตัวคั่น breadcrumb ( `<span>` )

gotchas

นี่คือ gotchas ไม่กี่ หากคุณสังเกตเห็นอีกต่อไปคุณคิดว่าควรกล่าวถึงที่นี่ส่ง PR หรือสร้างปัญหา

ในตัวเลือก gatsby-config.js siteMetaData.siteUrl คุณ
Gatsby <Link />'s ทั่วทั้งเว็บไซต์ของคุณจำเป็นต้องต้อง to คุณสมบัติที่ตรงกับ breadcrumb ของคุณ to คุณสมบัติสำหรับคลาส breadcrumb__link__active ที่จะใช้ URL ในเว็บไซต์ของคุณจำเป็นต้องจับ to คุณสมบัติของ Breadcrumb สำหรับชั้นเรียนที่ใช้งานเพื่อให้มีผล
- URL ไซต์ของคุณอาจมีการเฉือนตามท้ายและ breadcrumb to URL อาจไม่ ตัวเลือกหนึ่งคือการใช้ปลั๊กอิน Gatsby-plugin-remove-trailing-slashes เพื่อให้แน่ใจว่า URL ของคุณตรงกันและใช้คลาส breadcrumb__link__active
- นอกจากนี้คุณยังสามารถผ่านส่วนประกอบ <Breadcrumb> ที่เราเตอร์ REACH 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 >
  )
}
```

ขยาย

gatsby plugin breadcrumb

Gatsby-Plugin-Breadcrumb

breadcrumbs สำหรับ gatsby

Gatsby เวอร์ชัน

การติดตั้ง

การใช้งาน

คลิกการติดตาม

autogen

คลิกตัวอย่างการติดตาม:

ส่วนประกอบ breadcrumb พร้อมการติดตามคลิก

อุปกรณ์ประกอบฉาก Breadcrumb พร้อมการติดตามคลิก

ตัวเลือกการติดตามคลิกอื่น ๆ

คลิกตัวอย่างองค์ประกอบเค้าโครง

คลิกการติดตามตัวอย่าง defaultcrumb

คลิกสไตล์การติดตามและชื่อคลาสที่ใช้กับองค์ประกอบ Breadcrumb

useBreadCrumb ตัวอย่าง:

อาร์กิวเมนต์ useBreadCrumb และผลตอบแทน

ตัวอย่าง autogen

gatsby-config.js ไม่รวมอาร์เรย์และการยกเว้น

ตัวอย่างส่วนประกอบ breadcrumb กับ autogen

อุปกรณ์ประกอบฉาก breadcrumb กับ autogen

รูปแบบ autogen และชื่อคลาสที่ใช้กับองค์ประกอบ breadcrumb

gotchas

เข้าถึงตัวอย่างเราเตอร์ `getprops`

intellij platform gradle plugin

scite zotero plugin

BaseElements Plugin

index cli plugin

napari plugin manager

ปลั๊กอินซุปเปอร์อิมเมจ

chat.petals.dev

GPT Prompt Templates

GPTyped

v folder

ng vcl

xant

Google Dorks

shepherd

mongo express

gatsby plugin breadcrumb

Gatsby-Plugin-Breadcrumb

breadcrumbs สำหรับ gatsby

Gatsby เวอร์ชัน

การติดตั้ง

การใช้งาน

คลิกการติดตาม

autogen

คลิกตัวอย่างการติดตาม:

ส่วนประกอบ breadcrumb พร้อมการติดตามคลิก

อุปกรณ์ประกอบฉาก Breadcrumb พร้อมการติดตามคลิก

ตัวเลือกการติดตามคลิกอื่น ๆ

คลิกตัวอย่างองค์ประกอบเค้าโครง

คลิกการติดตามตัวอย่าง defaultcrumb

คลิกสไตล์การติดตามและชื่อคลาสที่ใช้กับองค์ประกอบ Breadcrumb

useBreadCrumb ตัวอย่าง:

อาร์กิวเมนต์ useBreadCrumb และผลตอบแทน

ตัวอย่าง autogen

gatsby-config.js ไม่รวมอาร์เรย์และการยกเว้น

ตัวอย่างส่วนประกอบ breadcrumb กับ autogen

อุปกรณ์ประกอบฉาก breadcrumb กับ autogen

รูปแบบ autogen และชื่อคลาสที่ใช้กับองค์ประกอบ breadcrumb

gotchas

เข้าถึงตัวอย่างเราเตอร์ getprops

เข้าถึงตัวอย่างเราเตอร์ `getprops`