我可以将参数从 js / tsx 文件中的页面传递到 gatsby-node.js 中的 onCreatePage 函数吗？

问题描述

我有一个 Gatsby 站点，使用在 Typescript（tsx 文件）和 javascript（这是一个学习项目）中创建的简单页面。我想在我的网站上添加一个面包屑区域。我为 gatsby-node.js 文件改编了官方 Gatsby Breadcrumbs plugin 中的代码。到目前为止，以下是我网站的不同部分：

布局：

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery,graphql } from "gatsby"

import Breadcrumbs from "./breadcrumbs"
import Header from "./header"
import SEO from "../components/SEO"

import "../styles/layout.css"

const Layout = ({ description,breadcrumb,children,location,Meta,title }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
          description
        }
      }
    }
  `)

  const MetaDescription = description || data.site.siteMetadata.description
  const yearsText = new Date().getFullYear() !== 2021 ? '2021-' + new Date().getFullYear() : new Date().getFullYear();

  return (
    <div className="flex flex-col min-h-screen">
      <SEO
        description={ MetaDescription }
        Meta={ Meta }
        title={ title }
      />
      <Header pathname={ location } siteTitle={ data.site.siteMetadata.title || `Technoh` } />
      <div className="conteneur-principal flex-grow my-auto">
        <main className="container lg:mx-auto">
          <Breadcrumbs crumbs={ breadcrumb } />
          {children}
        </main>
      </div>
      <footer className="bg-black text-white flex items-center h-10">
        <div class="container lg:mx-auto">© {yearsText} | Construit avec amour et <a className="text-white underline" href="https://www.gatsbyjs.org">Gatsby</a></div>
      </footer>
    </div>
  )
}

Layout.defaultProps = {
  lang: `fr`,Meta: [],description: ``,}

Layout.propTypes = {
  children: PropTypes.node.isrequired,description: PropTypes.string,Meta: PropTypes.arrayOf(PropTypes.object),title: PropTypes.string.isrequired,}

export default Layout

面包屑组件：

import { Link } from "gatsby"
import React from "react"

type BreadcrumbsProps = {
  crumbs: object
}

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ crumbs }) => {
  const breadcrumbs = (
    <div className="mb-4 text-sm fil-ariane">
      <Link
        to="/"
      >
        Accueil
      </Link>
      {/* The breadcrumb trail should be displayed here */}
    </div>
  )

  // Do not display anything on the Home page
  return crumbs !== {} ? breadcrumbs : (null)
}

export default Breadcrumbs

示例页面：

import React from "react"
import { StaticImage } from "gatsby-plugin-image"
import { PageProps } from "gatsby"

import Layout from "../../components/layout-fr"

const PageCreationNouveauSiteWeb = (props: PageProps) => {
  /**
   * This is where I need help.
   * I want to add a property to an object that will be available inside gatsy-node's onCreatePage.
   * This title should be used instead of the page's location.
   */
  props.pageContext = {
    title: "Création de site web"
  }

  return (
    <Layout
      description="Création de site web et de plate-forme de commerce électronique"
      breadcrumb={ props.pageContext }
      location={ props.location }
      title="Création de site web"
    >
      <h1>Création de site web et de plate-forme de commerce électronique</h1>
      <div className="flex">
        <div className="text-2xl">Et si votre site web se démarquait à la fois par son design et sa rapidité&nbsp;?</div>
        <StaticImage
          alt="Nos sites web sont toujours rapides"
          className="text-lg"
          height={ 450 }
          layout="constrained"
          placeholder="blurred"
          src="../../images/site-web-rapide.jpg"
        />
      </div>
    </Layout>
  )
}

export default PageCreationNouveauSiteWeb

最后是 gatsby-node.js onCreatePage 函数：

exports.onCreatePage = ({ page,pathPrefix,actions }) => {
  const { createPage,deletePage } = actions
  const trailingSlashes = false;

  let acc = ''
  let crumbs = []
  let pathname = ''

  const splitUrl = pathPrefix
    ? page.path.replace(new RegExp(`^${pathPrefix}`),'').split('/')
    : page.path.split('/')
  splitUrl.forEach((split,index) => {
    if (index === 0 && split === '') {
      // root or 'home' section of path
      crumbs = [
        ...crumbs,{
          pathname: '/',crumbLabel: defaultOptions.autoGenHomeLabel || 'Accueil',},]
    } else if (index !== 0 && split !== '') {
      // remaining sections of path
      acc += `/${split}`

      /**
       * This should use the added page's property to determine the appropriate label.
       */
      let crumbLabel = page.location

      // if trailingSlashes add a trailing slash to the end of each crumb. Excluding root (/) and crumbs including a "." (ex: 404.html)
      if (trailingSlashes && index !== 0 && acc.indexOf('.') === -1) {
        pathname = `${acc}/`
      } else {
        pathname = acc
      }

      crumbs = [
        ...crumbs,{
          pathname,crumbLabel,]
    } else {
      // catch empty path sections
      crumbs = [...crumbs]
    }
  })

  const breadcrumb = {
    location: page.path,crumbs,}

  // inject breadcrumbs into page context
  const { context: oldPageContext } = page
  deletePage(page)

  createPage({
    ...page,context: {
      ...oldPageContext,})
}

有什么方法可以创建一个属性或变量在每个页面文件中，这些属性或变量可以在 onCreatePage 函数内部访问并用于标记面包屑？我知道我可以在 onCreatePage 函数中创建一组页面位置和标签。我想知道是否可以使用页面文件中定义的内容。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）