我正在学习Gatsby,并尝试扩展其教程,这使您拥有了一个类似于博客的网站。每个帖子都是从markdown文件生成的,并通过Graphql查询并通过onCreateNode和createPages处理。
我想为作者简介创建降价文件,这些文件可以包含在这些生成的页面中。然后,如果更改了简历,则减价将在一个地方更改,而不是手动更改该作者编写的每个减价文件。
是否有可能为组件生成类似的工作流程?还是可以将作者的姓名/生物文件名传递给进行查询并处理最终降价的组件?
编辑:考虑到这一点,我认为个人档案与组件的降价销售并没有太大好处。如果格式具有组件AuthorBio以及像JohnDoeBio或JaneSmithBio这样的几个组件返回AuthorBio并传递了一些在道具中呈现的信息,将是不好的形式吗?我相当确定我可以从markdown中引用这些组件,或者让我的模板根据frontmatter选择它们,尽管这可能会导致较大的切换...
答案 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 为他们渲染的道具?我相当确定我可以参考这些 降价中的组件,或让我的模板根据 前题,尽管这可能会导致较大的切换...
如果您可以肯定地说作者数量很少,那么可以创建几个静态作者组件。务实。像你说的那样做。