Question

我正在学习Gatsby，并尝试扩展其教程，这使您拥有了一个类似于博客的网站。每个帖子都是从markdown文件生成的，并通过Graphql查询并通过onCreateNode和createPages处理。

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

是否有可能为组件生成类似的工作流程？还是可以将作者的姓名/生物文件名传递给进行查询并处理最终降价的组件？

编辑：考虑到这一点，我认为个人档案与组件的降价销售并没有太大好处。如果格式具有组件AuthorBio以及像JohnDoeBio或JaneSmithBio这样的几个组件返回AuthorBio并传递了一些在道具中呈现的信息，将是不好的形式吗？我相当确定我可以从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查询：我已经定义了一个author标签，因此我可以仅在博客文章的标记中动态设置一个author。

或者我可以将作者的姓名/生物文件名传递给查询并处理结果的降价？

是的，在标记的最前面使用author标签。

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

编辑：考虑到这一点，我认为降价不会带来太多好处对于我的BIOS与组件。具有组件会是不好的形式吗格式的AuthorBio以及JohnDoeBio或 JaneSmithBio返回带有一些传入信息的AuthorBio 为他们渲染的道具？我相当确定我可以参考这些降价中的组件，或让我的模板根据前题，尽管这可能会导致较大的切换...

如果您可以肯定地说作者数量很少，那么可以创建几个静态作者组件。务实。像你说的那样做。

如何像页面一样通过Gatsby中的markdown创建组件？

1 个答案: