使用 Gatsby 在 React 代码中添加指向 CDN 的链接的位置答案

【问题标题】：Where to add link to CDN in React code using Gatsby使用 Gatsby 在 React 代码中添加指向 CDN 的链接的位置
【发布时间】：2019-02-15 07:49:59
【问题描述】：

我对 React、GraphQL 和 Gatsby 还很陌生。我正在按照教程进行操作，但无法完全弄清楚 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 标记应该去哪里...

这是我的 layout.js 文件...

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import {StaticQuery, graphql} from 'gatsby'
import Header from './header'
import './css/style.css'
import Footer from './footer'

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            description
            keywords
          }
        }
        allContentfulLink (sort: { fields: [createdAt], order: ASC }) {
          edges {
            node {
              title
              url
              createdAt
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: data.site.siteMetadata.description },
            { name: 'keywords', content: data.site.siteMetadata.keywords },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title}/>
          {children}
          <Footer data={data}>
          </Footer>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

我试图在头盔中添加标签，打开标签并插入其中，但都收到错误。

我不确定我做错了什么。

非常感谢任何帮助！

【问题讨论】：

您可以尝试将 Google 字体导入 CSS，如本答案所述：stackoverflow.com/questions/14676613/…

标签： javascript reactjs graphql gatsby

【解决方案1】：

最简单的方法是将gatsby-plugin-web-font-loader 添加到您的package.json，然后在gatsby-config.js 中配置插件：

{
  plugins: [
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Nunito']
        }
      }
    }
  ]
}

【讨论】：