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

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

下面是正确的代码行

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

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

这是我的例子

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

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

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

我还尝试从我的盖茨比配置文件中复制相同的样式

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

但这对我来说仍然不起作用

我的描述对于我的SEO组件来说很好，但是我不知道如何从我的mdx博客frontmatter中传递关键词

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

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

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

然后在我的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} />

const模板=（{data}）=>{
const post=data.mdx
常量{mdx}=数据
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
返回(

---

然后，mdx文件中的frontmatter与上面相同，您必须调整您的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)}
    />
  )
}

它将获取您的

道具

关键字

或您的

站点元数据

。另外：

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

因此，您的数据应该与您尝试的第一种方法类似：

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

---

您必须调整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)}
    />
  )
}

它将获取您的

道具

关键字

或您的

站点元数据

。另外：

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

因此，您的数据应该与您尝试的第一种方法类似：

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

---

我已经有一个关键字属性作为

const metaKeywords=keywords | | site.sitemata.keywords

传入，但是当我将你的.join添加到我的

内容中时：metaKeywords.join（“，”），它告诉我
类型错误：metaKeywords.join不是一个函数
你尝试过另一种方法吗（在.mdx中的关键字类型）？如果我只做
关键词：“一个词”
效果很好，但如果不止一个词，问题就会出现。请尝试使用您的第一种方法
关键词：[“网站、教程、网页设计”]
yeah
TypeError:metaKeywords.join不是一个函数
不断出现。它不断显示我的盖茨比配置文件中的主要关键字我已经有一个关键字道具作为
const metaKeywords=keywords | site.sitemata.keywords传入了，但是当我将你的.join添加到我的
内容：metaKeywords.join（，）中时，
它告诉我
TypeError:metaKeywords.join不是一个函数
你尝试过另一种方法吗（在.mdx中的关键字类型）？如果我只做
keywords:“一个词”
效果很好，但是如果它不止一个词，那么问题就会出现使用你的第一种方法
关键字：[“网站，教程，网页设计”]
yeah
TypeError:metaKeywords.join不是一个函数
一直显示。它一直显示我的gatsby配置文件中的主要关键字