如何像页面一样从 Gatsby 中的降价创建组件？

Question

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

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

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

编辑： 正如我所考虑的那样，我认为降价对我的 BIOS 和组件没有太大好处。有一个组件 AuthorBio 用于格式和几个组件，如 JohnDoeBio 或 JaneSmithBio，return 一个 AuthorBio 带有一些信息传递到 props 来为他们呈现，这是否是一种不好的形式？我相当确定我可以从我的 markdown 中引用这些组件，或者让我的模板根据 frontmatter 选择它们，尽管这可能会导致一个大的切换...

Answer 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 查询：我定义了作者标签，因此我可以在博客的标记中动态设置作者 post.

Or could I pass the author's name/bio file name to a component that does a query and processes the resulting markdown?

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

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

Edit: As I've considered this, I don't see much benefit of a markdown for my bios vs a component. Would it be bad form to have a component AuthorBio for the format and several components like JohnDoeBio or JaneSmithBio that return an AuthorBio with some information passed in props to render for them? I am fairly certain I can reference these components from my markdown or let my template choose them based on frontmatter, though that might lead to a large switch...

如果您可以自信地声明作者的数量保持较小，则创建多个静态作者组件是可以的。要务实。按照你说的去做。

如何像页面一样从 Gatsby 中的降价创建组件？

How can I create components from markdown in Gatsby like a page?

markdown

graphql

gatsby