javascript - Gatsby Mdx frontmatter 为空

Question

我有一个定义了 frontmatter 的 mdx gatsby 页面。

---
title: About Me
path: /about
description: Some information about me.
---

# About Me
[Twitter](https://twitter.com/RainFire336)

我在 gatsby-config.js 中配置了默认布局:

{
  resolve: 'gatsby-plugin-mdx',
  options: {
    defaultLayouts: {
      default: require.resolve("./src/components/page-layout.tsx")
    },
    gatsbyRemarkPlugins: [
      'gatsby-remark-images',
      {
        resolve: 'gatsby-remark-prismjs',
        options: {
          showLineNumbers: true,
          prompt: {
            user: 'rain',
          },
        },
      },
    ],
  },
}

布局尝试使用它的 Prop 访问 frontmatter:

import React from 'react';
import { Layout } from './layout';
import { Card } from './card';
import { Metadata } from './metadata';

interface Props {
  children: React.ReactNode;
  uri: string;
  pageContext: { frontmatter: any };
}

export default function (p: Props) {
  const { children, uri, pageContext } = p;
  return (
    <Layout>
      <Metadata {...pageContext.frontmatter} url={uri} />
      <Card style={{ width: '50%' }}>{children}</Card>
    </Layout>
  );
}

问题是 frontmatter 总是一个空对象: 所以形成一个问题。我如何访问我的 frontmatter？

Answer 1

有完全相同的问题。重新运行 gatsby develop 对我不起作用。

有效的方法:

每当我在 front-matter 添加一个新的键/值时，我需要在重新运行 gatsby develop< 之前删除我的 Gatsby 应用程序根目录下的 .cache 文件夹。然后我能够通过布局中的 pageContext.frontmatter 访问正确的 front matter。

同样值得注意的是，frontmatter 应该在 MDX 文件中的任何导入之前。像这样:

---
foo: 'bar'
---

import './something.js'

# My great MDX

TLDR:

删除Gatsby项目根目录下的.cache文件夹