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

Posted 2023-03-08

【中文标题】在 frontmatter 元数据中包含 fontawesome 品牌图标

【英文标题】：Including fontawesome brand icons on frontmatter metadata

【发布时间】：2021-09-28 10:24:48

【问题描述】：

我正在对 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;

【参考方案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 />  

【讨论】：

不幸的是，这些都不适合我。当 gatsby 尝试预提取查询时出现此错误？

抱歉，我想在 cmets 中发布错误，但它太长了，所以我把它放在问题本身中。

localhost:8000/___graphql 显示了什么？您应该先在那里测试您的查询。更改源时也运行gatsby clean