gatsby plugin breadcrumb

Gatsby-plugin-breadcrumb

فتات الخبز لجاتسبي

• تثبيت
• الاستخدام
• مسكات
  • امنح هذه القراءة السريعة لرؤية المشكلات الشائعة التي قد تواجهها أثناء استخدام هذا البرنامج المساعد!

إصدارات غاتسبي

يجب أن يعمل هذا البرنامج المساعد بشكل جيد على Gatsby V2 و V3 و V4.

تثبيت

yarn add gatsby-plugin-breadcrumb

أو

npm install gatsby-plugin-breadcrumb

الاستخدام

هناك طريقتان لاستخدام gatsby-plugin-breadcrumb لإضافة فتات الخبز إلى موقع Gatsby الخاص بك: انقر فوق التتبع والتلقائي.

انقر فوق تتبع

انقر فوق تتبع إنشاء خبز الخبز من المسار الذي تم نقله (النقر) من قبل المستخدم. الطريقتان لاستخدام تتبع النقر هما:

• باستخدام مكون <Breadcrumb /> :

  • أضف المكون الإضافي gatsby-plugin-breadcrumb إلى gatsby-config.js

  • استيراد واستخدام مكون <Breadcrumb /> ، ويمرر الدعائم المطلوبة ، على الصفحات التي ترغب في رؤية الخبز.

    • انقر فوق مثال تتبع
    • الدعائم الخبز
    • خبز مع مكون تخطيط
    • خبز مع فتات افتراضية
    • تصميم الخبز

• باستخدام خطاف useBreadcrumb : يتيح لك خطاف useBreadcrumb التحكم في فتات الخبز الخاصة بك ، عن طريق استدعاء useBreadcrumb وتمرير خصائص الكائن المطلوبة. يمكّنك استخدام الخطاف من تمرير فتات الخبز إلى مكونك المخصص الخاص بك ، ولكن لا يزال يستفيد من gatsby-plugin-breadcrumbs انقر فوق منطق التتبع.

  • أضف المكون الإضافي gatsby-plugin-breadcrumb إلى gatsby-config.js

  • استيراد واستخدام خطاف useBreadcrumb ، ويمرر خصائص الكائن المطلوبة.

    • useBreadcrumb مثال
    • useBreadcrumb الدعائم/العوائد

تلقائي

سيقوم Autogen (الذي تم إنشاؤه تلقائيًا) بإنشاء فتات الخبز لكل صفحة وحقنها في pageContext Page Gatsby تحت خاصية breadcrumb .

• أضف المكون الإضافي gatsby-plugin-breadcrumb إلى gatsby-config.js وتحديد خيار useAutoGen إلى true

• احصل على صفيف crumbs من كائن breadcrumb في pageContext

• استيراد واستخدام مكون <Breadcrumb /> ، ويمرر الدعائم المطلوبة على الصفحات التي ترغب في رؤية Breadcrumb

  • مثال التوجيهي
  • الدعائم الخبز
  • تصميم الخبز

استخدام مكون <Breadcrumb /> ليس شرطا. إذا كنت ترغب في إنشاء مكون الخبز الخاص بك ، وقم بتمرير بيانات Breadcrumb من pageContext ، فهذا خيار دائمًا.

انقر فوق تتبع مثال:

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 /> فتات الخبز الافتراضية ، مع السماح لك أيضًا بتخصيص فتات الخبز هذه إذا كنت ترغب في ذلك.

الدعائم الخبز مع تتبع النقر

دعم	يكتب	وصف	أمثلة	مطلوب
موقع	هدف	يمكنك الوصول إلى موقع جهاز التوجيه	انظر REACH ROUTER MOCITION PROP ، الذي تم تمريره بواسطة Gatsby إلى كل صفحة.	مطلوب
Crumblabel	خيط	اسم الخبز	"About Us"	مطلوب
عنوان	خيط	العنوان الذي يسبق فتات الخبز	"Breadcrumbs: " ، ">>>"	خياري
Crumbseparator	خيط	فاصل بين كل خبز	" / "	خياري

انقر فوق خيارات تتبع

بدلاً من إضافة مكون <Breadcrumb /> إلى كل صفحة ، يتمثل خيار آخر في إضافته إلى مكون التخطيط.

انقر فوق تتبع مثال مكون تخطيط

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

انقر فوق تتبع مثال DefaultCrumb

أثناء استخدام خيار تتبع النقر مع مكون <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	تنطبق على عنوان Breadcrumb ( <span> )
breadcrumb	يتم تطبيقه على حاوية Breadcrumb ( <nav> )
breadcrumb__list	تم تطبيقه على القائمة المطلوبة على Breadcrumb ( <ol> )
breadcrumb__list__item	يتم تطبيقه على كل "فتات" خبز ( <li> )
breadcrumb__link	يتم تطبيقه على رابط Breadcrumb ( <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 >
  )
}

usebreadcrumb الحجج والعوائد

يأخذ خطاف useBreadcrumb كائنًا بالخصائص التالية:

دعم	يكتب	وصف	أمثلة	مطلوب
موقع	هدف	يمكنك الوصول إلى موقع جهاز التوجيه	انظر REACH ROUTER MOCITION PROP ، الذي تم تمريره بواسطة Gatsby إلى كل صفحة.	مطلوب
Crumblabel	خيط	اسم الخبز	"About Us"	مطلوب
Crumbseparator	خيط	فاصل بين كل خبز	" / "	خياري

useBreadcrumb يعيد ما يلي:

قيمة	يكتب	وصف
فتات	صفيف	مجموعة من فتات الخبز الحالية

سيحدد خطاف useBreadcrumb ما إذا كان يحتاج إلى إضافة أو إزالة أو عدم القيام بأي شيء باستخدام فتات الخبز بناءً على الموقع الذي تمريره. تحتاج فقط إلى تمرير الدعائم المطلوبة ( location ، crumbLabel ).

مثال التوجيهي

CODESANDBOX.IO DEMO

يستخدم AutoGen (تم إنشاؤه تلقائيًا ، خريطة سيتيميس سابقًا) للاعتماد على gatsby-plugin-sitemap ، والذي ينشئ ملف Sitmap XML في المجلد /public لموقعك في نهاية بناء الموقع. تسبب هذا في مشاكل عند الانتشار في خدمات مثل 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 ، يستخدم خيار Array exclude في تكوين هذا البرنامج المساعد مكتبة Match Wildcard. يمكنك كتابة سلاسل Wildcard لاستبعاد المسارات التي لا تريد إنشاء فتات الخبز لها. يرجى مراجعة مكتبة Wildcard-Match لمزيد من التفاصيل حول كيفية كتابة سلاسل جديدة استبعاد.

  للترقية إلى V11 والحفاظ على سلوك مشابه للمسارات المستبعدة القديمة ، ما عليك سوى إضافة ** إلى بداية ونهاية سلاسل استبعادك

  مثال:

   // old
  exclude: [ '/books/', '/chapters/' ]
  
  // new
  exclude: [ '**/books/**', '**/chapters/**' ]
  

• يتم استخدام خيار كائن excludeOptions لتمرير الخيارات لتكوين مكتبة wildcard-match . يرجى الاطلاع على مكتبة Match Wildcard لمزيد من التفاصيل. سيستخدم حذف هذا الخيار الخيارات الافتراضية.

مثال مكون الخبز مع التلقائي

/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	ن/أ	مطلوب
عنوان	خيط	العنوان الذي يسبق فتات الخبز	"Breadcrumbs: " ، ">>>"	خياري
Crumbseparator	خيط	فاصل بين كل خبز	" / "	خياري
Crumblabel	خيط	تجاوز ملصق الفتات من مسار XML	"About Us"	خياري
hiddencrumbs	صفيف	أسماء مسارات الفتات للاختباء	['/books']	خياري
DisableLinks	صفيف	أسماء مسارات الفتات لإظهارها ، ولكن لا تكون روابط	['/books']	خياري
...استراحة	هدف	أي دعائم أخرى قد تمر بها	N/A: انتشار رابط الفتات المرحلية	خياري

للحصول على مثال على استخدام 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	تنطبق على عنوان Breadcrumb ( <span> )
breadcrumb	يتم تطبيقه على حاوية Breadcrumb ( <nav> )
breadcrumb__list	تم تطبيقه على القائمة المطلوبة على Breadcrumb ( <ol> )
breadcrumb__list__item	يتم تطبيقه على كل "فتات" خبز ( <li> )
breadcrumb__link	يتم تطبيقه على رابط Breadcrumb ( <a> )
breadcrumb__link__active	يضاف إلى الرابط الحالي ( <a> )
breadcrumb__link__disabled	يتم تطبيقه على الفتات التي تحتوي على روابط معطلة ( <span> )
breadcrumb__separator	المطبق على فواصل الخبز ( <span> )

مسكات

وهنا عدد قليل من gotchas. إذا لاحظت المزيد ، فيجب ذكر هنا تقديم PR أو إنشاء مشكلة.

• في خيار gatsby-config.js الخاص بك siteMetaData.siteUrl تأكد

• يجب أن تضطر Gatsby <Link />'s في موقعك to الخصائص التي تتطابق مع الخبز to خصائص فئة breadcrumb__link__active Active. تحتاج عناوين URL في موقعك أيضًا إلى مطابقة to الخبز للدروس النشطة ليصبح مفعولها.

  • قد تحتوي عناوين URL على مواقعك على مائلات زائدة ، وقد لا يكون الخبز to عناوين URL. يتمثل أحد الخيارات في استخدام المكون الإضافي Gatsby-Plugin-Remove-Trailing-Trailing-Slashes لضمان تطابق عنوان URL الخاص بك وتطبيق فئة breadcrumb__link__active Active.

  • يمكنك أيضًا تمرير مكون <Breadcrumb> getProps Proper to Tove to Tove عندما يتم تطبيق الفئة النشطة.

    الوصول إلى مثال 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 >
      )
    }