如何从 Gatsby MDX frontmatter 获取 SEO 组件的关键字？

Question

更新：所以这段代码对我有用。请注意，数组的第一个和最后一个字母只有引号。我最初的选择在每个单词周围都有引号，所以这就是盖茨比没有选择它们的原因。

这是正确的代码行

 keywords: ["website, tutorial, web design"]

原问题

所以我有一篇关于 frontmatter 的博客文章，我正在尝试将关键字添加到我的博客文章中，以便将其传递到我的 SEO 组件中。但是，我不知道添加关键字的正确方法，因为我的终端中不断出现错误

所以这是我的示例frontmatter

      ---
      keywords: ["website", "tutorial", "web design"]
      description: "Learn how to build a site."
      ---

我也尝试从我的 gatsby 配置文件中复制相同的样式

      ---
      keywords: "website, tutorial, web design"
      description: "Learn how to build a site."
      ---

但它仍然对我不起作用。

我的描述适用于我的 SEO 组件，但我不知道如何从我的 mdx 博客 frontmatter 中传递关键字

        const description = mdx.frontmatter.description
        const keywords = mdx.frontmatter.keywords

        return (
          <Layout>
            <SEO
              title={post.frontmatter.title}
              description={description}
              keywords={keywords}
            />

如果我只说 keywords="test keyword" 并将其传递到我的 SEO 组件中，我知道关键字有效，它会显示在我的网站上，但我不知道如何映射 MDX 文件中的关键字以显示在我的网站

这是我的 SEO 组件

      import React from "react"
      import PropTypes from "prop-types"
      import { Helmet } from "react-helmet"
      import { useStaticQuery, graphql } from "gatsby"

      function SEO({ description, title, keywords, siteUrl, lang, meta }) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  description
                  keywords
                  title
                  siteUrl
                }
              }
            }
          `
        )

        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata.title
        const metaUrl = siteUrl || site.siteMetadata.siteUrl
        const metaKeywords = keywords || site.siteMetadata.keywords

        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:siteurl`,
                content: metaUrl,
              },
              {
                name: `keywords`,
                content: metaKeywords,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
            ].concat(meta)}
          />
        )
      }

      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }

      SEO.propTypes = {
        description: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }

      export default SEO

然后在我的模板文件夹代码中的 blogPost.js 中

        const Template = ({ data }) => {
          const post = data.mdx
          const { mdx } = data
          const alt = mdx.frontmatter.alt
          const title = mdx.frontmatter.title
          const date = mdx.frontmatter.date
          const author = mdx.frontmatter.author
          const description = mdx.frontmatter.description
          const keywords = mdx.frontmatter.keywords

          return (
            <Layout>
              <SEO title={post.frontmatter.title} description={description} keywords={keywords} />

然后mdx文件的frontmatter同上

Answer 1

您必须调整您的 SEO 组件以接收关键字。它应该看起来像：

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

function SEO({ description, lang, meta, image: metaImage, title, keywords }) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            keywords
            siteUrl
          }
        }
      }
    `
  )
  const metaDescription = description || site.siteMetadata.description
  const image =
    metaImage && metaImage.src
      ? `${site.siteMetadata.siteUrl}${metaImage.src}`
      : null

  const keywords= keywords || site.siteMetadata.keywords // here you get your props or your metadata

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          name: "keywords",
          content: keywords.join(","),
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ]
        .concat(
          metaImage
            ? [
                {
                  property: "og:image",
                  content: image,
                },
                {
                  property: "og:image:width",
                  content: metaImage.width,
                },
                {
                  property: "og:image:height",
                  content: metaImage.height,
                },
                {
                  name: "twitter:card",
                  content: "summary_large_image",
                },
              ]
            : [
                {
                  name: "twitter:card",
                  content: "summary",
                },
              ]
        )
        .concat(meta)}
    />
  )
}

除虚拟内容外，得到如下语句：

  const keywords= keywords || site.siteMetadata.keywords 

它将获取您的props keywords 或您的siteMetadata。加：

    {
      name: "keywords",
      content: keywords.join(","),
    },

因此，您的数据应该看起来像您尝试过的第一种方法：

  ---
  keywords: ["website, tutorial, web design"]
  description: "Learn how to build a site."
  ---