在 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} />