在 frontmatter 元数据中包含 fontawesome 品牌图标

Question

我正在对 Gatsby 启动器进行一些更改，但在 fontawesome 品牌图标方面遇到了一个烦人的问题。问题是，与大多数图标不同，称为 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;

Answer 1

据我了解您的问题，您希望将 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} />