如何解决在 frontmatter 元数据中包含超赞的品牌图标
我正在对 Gatsby 入门版进行一些更改,但遇到了字体很棒的品牌图标的烦人问题。问题是,与大多数图标(称为 faPhone 或类似名称)不同,品牌图标还需要前缀,fab
。
所以我可以让它们在我的帖子正文中工作,如下所示:<Icon icon={['fab','github']} />
问题是当我想将它包含在 frontmatter 元数据中时,例如:
---
category: 'socials'
title: 'Github'
icon: 'fab github'
content: 'janedoegithub'
---
我试过像上面的例子一样传递它,作为 2 个单独的字符串,作为一个列表,但似乎没有任何效果。有大佬知道怎么解决吗?
编辑:这两种格式也不起作用
---
category: 'socials'
title: 'Github'
icon:
- fab
- github
content: 'janedoegithub'
---
---
category: 'socials'
title: 'Github'
icon: ['fab','github']
content: 'janedoegithub'
---
当我尝试它们时,我收到此错误:
GRAPHQL
There was an error in your GraphQL query:
Cannot query field "icon" on type "MdxFrontmatter".
If you don't expect "icon" to exist on the type "MdxFrontmatter" it is most
likely a typo.
However,if you expect "icon" to exist there are a couple of solutions to common
problems:
- If you added a new data source and/or changed something inside
gatsby-node.js/gatsby-config.js,please try a restart of your development server
- The field might be accessible in another subfield,please try your query in
GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have
- You want to optionally use your field "icon" and right Now it is not used
anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL
schema. A quick fix is to add at least one entry with that field ("dummy
content")
It is recommended to explicitly type your GraphQL schema if you want to use
optional fields. This way you don't have to add the mentioned "dummy content".
Visit our docs to learn how you can define the schema for "MdxFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-deFinitions
File: src/components/ContactInfo/index.js:25:15
这是错误中提到的index.js:
import React from 'react';
import { useStaticQuery,graphql } from 'gatsby';
import InfoBlock from 'components/ui/InfoBlock';
import Container from 'components/ui/Container';
import TitleSection from 'components/ui/TitleSection';
import * as Styled from './styles';
const ConctactInfo = () => {
const { mdx,allMdx } = useStaticQuery(graphql`
query {
mdx(frontmatter: { category: { eq: "socials section" } }) {
frontmatter {
title
subtitle
}
}
allMdx(filter: { frontmatter: { category: { eq: "socials" } } },sort: { fields: fileAbsolutePath }) {
edges {
node {
id
frontmatter {
title
icon
content
}
}
}
}
}
`);
const sectionTitle = mdx.frontmatter;
const socials = allMdx.edges;
return (
<Container section>
<TitleSection title={sectionTitle.title} subtitle={sectionTitle.subtitle} center />
{socials.map((item) => {
const {
id,frontmatter: { title,icon,content }
} = item.node;
return (
<Styled.ContactInfoItem key={id}>
<InfoBlock icon={icon} title={title} content={content} center />
</Styled.ContactInfoItem>
);
})}
</Container>
);
};
export default ConctactInfo;
解决方法
据我了解您的问题,您希望将 icon
数据字段从降价传递到模板/组件。在这种情况下,您可以使用:
---
category: 'socials'
title: 'Github'
icon:
- fab
- github
content: 'janedoegithub'
---
注意:注意缩进
或者:
---
category: 'socials'
title: 'Github'
icon: ['fab','github']
content: 'janedoegithub'
---
您可以通过两种方式将数组存储在 Markdown 文件中。
然后,一旦您的 GraphQL 查询检索并过滤了您的结果,您的组件可能如下所示:
<Icon icon={markdownData.icon} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。