时间戳

首页 > 解决方案 > 采购 MDX 文件以编程方式在 Gatsby 中创建投资组合页面

gatsby - 采购 MDX 文件以编程方式在 Gatsby 中创建投资组合页面

问题描述

我是一个新手，试图构建一个 Gatsby 站点，该站点以编程方式为/content/portfolio使用以下 url 结构放置的 MDX 文件生成页面：sitename/portfolio/single-portfolio-item. 该网站正在运行gatsby-starter-blog-theme。

以下是我遵循的步骤：

  1. 创建一个新的 gatsby 站点：gatsby new gatsby-portfolio https://github.com/gatsbyjs/gatsby-starter-blog-theme并使用gatsby develop.

  2. 为投资组合 MDX 帖子创建目录：content/portfolio

  3. 创建一个投资组合帖子：content/portfolio/pf1.mdx具有以下内容：

---
title: Portfolio item 1ˆ
date: 2019-04-15
image: ./sunset-beach.jpg
imageAlt: A beach at sunset with crashing waves.
---

Hello, world! This is a demo post for `gatsby-theme-blog`.

Delete me, and get writing!
  1. 编辑gatsby-config.js以便content/portfolio通过在插件部分中添加以下行来处理文件：
  {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `portfolio`,
        path: `${__dirname}/content/portfolio/`,
      },

  1. 停止服务器并gatsby develop再次运行

  2. 在 GraphiQL 中查找投资组合帖子allMdx并在那里找到它：

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "slug": "hello-world/"
        },
        {
          "slug": "my-second-post"
        },
        {
          "slug": "pf1/"
        }
      ]
    }
  },
  "extensions": {}
}

但在这里我卡住了。

就像我说的，在检查 GraphiQL 时，我可以在 上看到新帖子allMdx，但在 上看不到allMdxBlogPosts。我不知道为什么它不存在，因此，为什么帖子没有在前端呈现。

而且我也不知道如何创建一个allPortfolioPosts节点并在前端呈现它的帖子。

谁能帮我吗？提前致谢！

标签： gatsby

解决方案

您正在使数据可查询，但从不查询它来创建页面。一种方法是使用文件系统路由 API。

在您的 pages 目录中创建一个文件，如：{Mdx.slug}.js. 该文件将为您拥有的每个 Mdx 节点生成一个页面（可在 localhost:8000/ 访问），并允许您访问该节点的 ID。

所以你可以做这样的事情：

import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../../components/layout"

const BlogPostPage = ({data}) => {
  const post = data.mdx
  return (
    <Layout>
      <article>
        <h2>{post.frontmatter.title}</h2>
        <MDXRenderer>{post.body}</MDXRenderer>
      </article>
    </Layout>
  )
}

export const query = graphql`
  query BlogPostById($id: String) {
    mdx(id: { eq: $id }) {
      body
      frontmatter {
        title
      }
    }
  }
`

export default BlogPostPage

推荐阅读