如何在 Gatsby 中查询特定语言的 markdown 文件？

Question

我有一个文件夹content/projects，其中包含以下方式的文件：

• project-a.de.md
• project-a.en.md
• project-b.de.md
• project-b.en.md

现在我如何构建一个组件来显示其中的一些项目，这些项目在其frontmatter 中有featured 标志并且是特定语言的？

我创建了以下组件：

import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useStaticQuery, graphql } from 'gatsby'
import Content from '../Content'
import { FeaturedProjectsQuery } from '../../../graphql-types'

const FeaturedProjects: React.FC = () => {
  const projects = useStaticQuery<FeaturedProjectsQuery>(graphql`
    query FeaturedProjects {
      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/(content/projects)/" }, frontmatter: { featured: { eq: true } } }) {
        nodes {
          frontmatter {
            title
          }
        }
      }
    }
  `)

  return (
    <Content>
      <h2>
        <FormattedMessage id="navigation.projects" />
      </h2>
      {projects.allMarkdownRemark.nodes.map(p => {
        return <div>{p.frontmatter?.title}</div>
      })}
    </Content>
  )
}

export default FeaturedProjects

这可行，但我必须在 TypeScript 中过滤当前语言（我通过 React 上下文），尽管我认为这是 GraphQL 查询的完美任务，因为它是为选择事物而设计的。

很遗憾，我不能在静态查询中使用变量。您将如何实现这一目标？

Tl;博士

我尝试使用变量创建查询，但 graphql 标记中不允许使用字符串插值。

... 
allMarkdownRemark(filter: { fileAbsolutePath: {
 regex: `/(content/projects).*\\.${lang}\\.md$/` ...
}
...

Answer 1

我过去解决这个问题的方法是查询我可能需要的所有数据（在这种情况下，任何语言的所有特色项目），然后使用 JS 根据当前语言环境进行过滤。这有在客户端加载更多数据的缺点，但不会影响静态呈现的 HTML 页面大小。

我使用的另一种方法是使用createPage API 将每种语言作为上下文传递，然后将其作为变量提供给您的查询，然后以每种语言简单地呈现每个页面并更改 URL在它们之间切换（即使用 Gatsby 的navigate）。这很好用，但您确实需要设计一种方法来确定每种语言的 URL，但无论如何您可能也会将其用于您的 rel="alternate" 链接。

Answer 2

看来string interpolation isn't supported - 太糟糕了！

您可以使用gatsby-plugin-pathdata 将lang 字段添加到您的节点。

在gatsby-config，在插件部分添加

{
  resolve: "gatsby-plugin-pathdata",
  options: {
    matchNodeType: "MarkdownRemark",
    extract: [
      {
        name: "lang",
         // Regex isn't my strong suit so the `selector` might need some work
         // This matches any 2 lower case letter, between 2 dots, followed by 
         // the `md` extension 
         // ====================
         // ex:  for `/path/to/the/file/project-b.de.md`, the `lang` field
         // will be `de`
        selector: /.+\/.*([a-z][a-z])+\.md$/, 
        replacer: "$1"
      }
    ]
  }
},

这会将field.lang 添加到您的所有降价文件中 - 这些字段也可用于过滤。

有了这个，您可以使用带有变量的查询来选择文件

query MyQuery($lang: String) {
  allMarkdownRemark(filter: {fields: {lang: {eq: $lang}}}) {
    nodes {
      frontmatter {
        title
      }
    }
  }
}

可能还有其他方法可以得到这个。

希望对你有帮助！