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

时间:2019-07-30 20:46:39

标签: graphql markdown gatsby

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

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

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

编辑:考虑到这一点,我认为个人档案与组件的降价销售并没有太大好处。如果格式具有组件AuthorBio以及像JohnDoeBio或JaneSmithBio这样的几个组件返回AuthorBio并传递了一些在道具中呈现的信息,将是不好的形式吗?我相当确定我可以从markdown中引用这些组件,或者让我的模板根据frontmatter选择它们,尽管这可能会导致较大的切换...

1 个答案:

答案 0 :(得分:2)

我的思维过程完全相同!这是我解决的方法:

  

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   为他们渲染的道具?我相当确定我可以参考这些   降价中的组件,或让我的模板根据   前题,尽管这可能会导致较大的切换...

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