gatsby - 在 Gatsby.js 中处理帖子和第二种 Markdown 内容

Question

除了帖子之外，我正在尝试向我的 gatsby 项目添加第二种类型的内容，即“资源”。 获取资源正常，但帖子消失了。

设置第二种内容的步骤是什么，以便我从一个帖子转到另一个帖子和(在我的例子中)资源？

具备以下条件:

在gatsby-config.js中:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/src/pages`,
    name: 'pages',
  },
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/src/resources`,
    name: 'resources',
  }
}

在/templates 中，我添加了 resource.js:

import React from 'react';
import Helmet from 'react-helmet';

export default function Template({data}) {
  const {markdownRemark: resource} = data;
  return (
    <div>
      <h1>{resource.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML= {{__html:resource.html}} />
    </div>
  )
}

export const resourceQuery = graphql`
  query ResourceByPath($path: String!) {
    markdownRemark(frontmatter: { path: {eq: $path} }) {
      html
      frontmatter {
        path
        title
      }
    }
  }
`

我的index.js(我希望在其中列出我的资源)正在列出资源。但在 page-2 上，我有相同的代码，我获得的是资源，而不是帖子。

这是gatsby-node.js:

const path = require('path');

exports.createPages = ( {boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;

  const postTemplate = path.resolve(`src/templates/post.js`);

  return graphql(`{
    allMarkdownRemark {
      edges {
        node {
          html
          id
          frontmatter {
            path
            title
            date
          }
        }
      }
    }
  }`)
  .then(res => {
    if(res.errors) {
      return Promise.reject(res.errors);
    }

    res.data.allMarkdownRemark.edges.forEach(({node}) => {
      createPage({
        path: node.frontmatter.path,
        component: postTemplate
      })
    })
  })
}

Answer 1

我不会详细介绍，因为one of the Gatsby issues中讨论了类似的问题。并附有解决方案示例。