Gatsby - Выделение контента проектов из контента блога - PullRequest
Новая
       21

Gatsby - Выделение контента проектов из контента блога

0 голосов
/ 06 марта 2020

Контекст

У меня есть проект Gatsby, в котором есть рабочий раздел блога по адресу /blog/
(src/pages/blog.js)

. Проект создает отдельные страницы для каждого сообщения блога на основе например, содержимое находится в каталоге content/blog/post1.mdx.

Все сообщения сопоставляются с /blog/ с использованием результатов запроса graphQL для центрального канала блога.
Видно ниже: 

//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
          }
        }
      }
    }
  }
`


В настоящее время он настроен на 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

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

Я спотыкаюсь, когда дело доходит до изменения gatsby-node.js, чтобы приспособить новый тип контента, и это где я в основном нужна помощь .

Тогда мне, конечно, нужно отредактировать src/pages/blog.js и сделать src/pages/projects.js для запроса и отображения так же, как и на странице блога, но я еще не зашел так далеко.

1 Ответ

0 голосов
/ 07 марта 2020

В gatsby-node вы в настоящее время запрашиваете все MDX независимо от того, где они находятся. 

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

Но вы можете отфильтровать их в зависимости от того, где они найдены, используя fileAbsolutePath (что соответствует либо «блогу», либо «блогу»). '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
        }
      }
    }
  }
}

Затем вы просто повторяете тот же процесс циклического просмотра результатов и использования API createPage для создания страницы для каждого (скорее всего, с использованием нового созданного вами шаблона, например blog-post.js)

Как всегда, проводник graphiql - это отличное место для изучения вашей схемы и экспериментов с построением этих запросов, прежде чем вводить их в код.

...