如何在 Gatsby 中像页面一样从 markdown 创建组件？答案

【问题标题】：How can I create components from markdown in Gatsby like a page?如何在 Gatsby 中像页面一样从 markdown 创建组件？
【发布时间】：2019-12-08 07:48:16
【问题描述】：

我正在学习 Gatsby 并尝试扩展他们的教程，从而为您提供一个类似博客的网站。每个帖子都是从markdown文件生成的，用Graphql查询并通过onCreateNode和createPages处理。

我想为可以包含在这些生成的页面上的作者简历创建降价文件。然后，如果 bio 发生更改，markdown 将在一个地方更改，而不是手动更改该作者编写的每个 markdown 文件。

是否可以为组件生成类似的工作流程？或者我可以将作者的姓名/简历文件名传递给执行查询并处理结果降价的组件吗？

编辑：考虑到这一点，我认为降价对于我的 bios 与组件相比没有多大好处。有一个用于格式的组件 AuthorBio 和几个组件（如 JohnDoeBio 或 JaneSmithBio）返回一个 AuthorBio 并在 props 中传递一些信息来为它们渲染，这会是一种糟糕的形式吗？我相当肯定我可以从我的 markdown 中引用这些组件，或者让我的模板根据 frontmatter 选择它们，尽管这可能会导致很大的切换......

【问题讨论】：

标签： graphql markdown gatsby

【解决方案1】：

我有完全相同的思考过程！我就是这样解决的：

BlogPostTemplate.jsx

<Layout>
  <ShortBio {...authorData} /> // show the author bio on top of the blog post
  <div
    className="blog-post"
    dangerouslySetInnerHTML={{ __html: html }} // your markup as HTML
  />
</Layout>

ShortBio.jsx

export const ShortBio = ({ authorPic, authorName, datePublished, readingTime }) => {
  const postInfo = `${readingTime} · ${datePublished}`;
  return (
    <AuthorDiv>
      <ImageAvatars src={authorPic} alt={authorName} />

      <TextStylesDiv>
        <Typography>{author}</Typography>
        <Typography>{shortBioText}</Typography>
        <Typography>{postInfo}</Typography>
      </TextStylesDiv>

    </AuthorDiv>
  );
};

GraphQL：

export const blogQuery = graphql`
  query ($slug: String!) {
    blog: markdownRemark(fields: {slug: {eq: $slug}}) {
      html
      frontmatter {
        title
        date(formatString: "DD MMMM YYYY")
        author
      }
      excerpt(pruneLength: 165)
      fields {slug}
      wordCount {
        words
      }
    }
  }
`;

利用 Gatsby 和 GraphQL 的强大功能，通过标记中的元数据确定作者。查看 GraphQL 查询：我定义了一个作者标签，因此我可以在博客文章的标记中动态设置作者。

或者我可以将作者的姓名/简历文件名传递给一个组件是否进行查询并处理生成的降价？

是的，在 Markdown 的前端使用作者标签。

---
title: Hello World
date: "2018-01-15"
author: "Solid Snake"
---

编辑：正如我所考虑的那样，我没有看到降价的太多好处对于我的 BIOS 与组件。有一个组件会是不好的形式吗 AuthorBio 用于格式和几个组件，如 JohnDoeBio 或 JaneSmithBio 返回一个 AuthorBio 并传入一些信息为他们渲染的道具？我相当肯定我可以参考这些我的降价中的组件或让我的模板根据 frontmatter，虽然这可能会导致大的转变......

如果您可以自信地声明作者的数量很少，那么创建几个静态作者组件就可以了。务实。照你说的做。

【讨论】：