Question

上下文

我有一个Gatsby项目，其中包含content/blog/post1.mdx上的工作博客部分。
（/blog/）

例如，该项目根据目录//src/pages/blog.js class Blog extends React.Component { render() { const { data } = this.props const siteTitle = data.site.siteMetadata.title const posts = data.allMdx.edges return ( <Layout location={this.props.location} title={siteTitle}> <SEO title="Blog" /> <Section> <div className="row"> <div className="col"> <h1>Blog page</h1> <div> {posts.map(({ node }) => { const title = node.frontmatter.title || node.fields.slug return ( <div key={node.fields.slug}> <h3> <Link to={`blog${node.fields.slug}`}>{title}</Link> </h3> <small>{node.frontmatter.date}</small> <p dangerouslySetInnerHTML={{ __html: node.frontmatter.description || node.excerpt, }} /> </div> ) })} </div> </div> </div> </Section> </Layout> ) } } export default Blog export const pageQuery = graphql` query { site { siteMetadata { title } } allMdx(sort: { fields: [frontmatter___date], order: DESC }) { edges { node { excerpt fields { slug } frontmatter { date(formatString: "MMMM DD, YYYY") title description } } } } } `中的内容为每个博客帖子构建单独的页面。

使用针对中央博客供稿的graphQL查询结果将所有帖子映射到gatsby-config.js。
如下所示：

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },

当前已使用{的gatsby-node.js进行了设置

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

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

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  return graphql(
    `
      {
        allMdx(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages.
    const posts = result.data.allMdx.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: `blog${post.node.fields.slug}`,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    return null
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

...和一个看起来像这样的/projects/文档

content/project/project1.mdx

任务

我想拆分一个类似的设置，但是用于gatsby-config.js上的Project帖子。

目前，我在{ resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/content/project`, name: `project`, }, },上添加了项目目录。
并在gatsby-node.js

中添加了以下内容

src/pages/blog.js

在修改src/pages/projects.js以适应新的内容类型方面，我感到很沮丧，而这主要是我需要帮助的地方。

然后，我当然需要编辑handlePastEvent=()=>{ document.querySelector("#new-task-content-1").addEventListener("paste",function(e) { setTimeout(function(){ document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim(); },1); }); } handlePastEvent();并进行<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>来以与博客页面相同的方式进行查询和映射，但我还没有完成。

Answer 1

在gatsby-node中，无论当前在哪里，您都在查询allMdx。

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

但是您可以使用fileAbsolutePath（在路径名中匹配'blog'或'projects'）来过滤它们，具体取决于找到它们的位置

{
  allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/blog/"}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

您甚至可以合并两个查询，并为它们加上一个对您有意义的别名。

query myQuery {
  allMyBlogPosts: allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/blog/"}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
  allMyProjectPosts: allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/projects/"}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

然后，您只需重复遍历结果并使用createPage api为每个页面创建页面的相同过程（很可能使用您创建的新模板，例如blog-post.js）

与往常一样，graphiql explorer是探索架构并尝试将这些查询纳入代码之前进行构建的理想场所。

盖茨比-从博客内容中拆分项目内容

上下文

任务

1 个答案: