Javascript 构建Wordpress博客档案:使用GatsbyJS按日期过滤

Javascript 构建Wordpress博客档案:使用GatsbyJS按日期过滤,javascript,reactjs,wordpress,graphql,gatsby,Javascript,Reactjs,Wordpress,Graphql,Gatsby,目前正在努力使用盖茨比为Wordpress博客建立档案。我试图将其设置为导航到“localhost:8000/blog/11-19”这样的url,并显示2019年11月的所有博客文章。现在我确实已经设置了一个网站,在那里根据日期成功创建了url,但是当我尝试循环查询并实际生成博客内容时,什么也没有出现。我的盖茨比节点文件: const path = require('path') module.exports.createPages = async ({ graphql, actions })

目前正在努力使用盖茨比为Wordpress博客建立档案。我试图将其设置为导航到“localhost:8000/blog/11-19”这样的url,并显示2019年11月的所有博客文章。现在我确实已经设置了一个网站,在那里根据日期成功创建了url,但是当我尝试循环查询并实际生成博客内容时,什么也没有出现。我的盖茨比节点文件:

const path = require('path')

module.exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
  const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')
  const blogArchiveFilter = path.resolve('./src/templates/blog-filter-archive.js')

  const res = await graphql(`
      query {
        allWordpressPost {
          edges {
            node {
              slug
              date(formatString:"MM-YY")
            }
          }
        }
        allWordpressCategory {
          edges {
            node {
              slug
            }
          }
        }
      }
    `)

  res.data.allWordpressPost.edges.forEach((edge) => {
    createPage({
      component: blogPostTemplate,
      path: `/blog/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      }
    })
  })

  res.data.allWordpressPost.edges.forEach((edge) => {
    createPage({
      component: blogArchiveFilter,
      path: `/blog/${edge.node.date}`,
      context: {
        slug: edge.node.date,
      }
    })
  })

  res.data.allWordpressCategory.edges.forEach((edge) => {
    createPage({
      component: blogCategoryFilter,
      path: `/blog/category/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      }
    })
  })

}
我的模板文件(在本例中是blogArchiveFilter--blog filter archive.js):

看一看,看一看
import React from 'react'
import { graphql, Link } from 'gatsby'

import Layout from '../components/layout'
import BlogNav from '../components/blognav'

import blogStyles from '../components/modules/blog.module.css'

export const query = graphql`
  query($slug: Date!) {
    allWordpressPost (filter: { date: { eq: $slug }}) {
      edges {
        node {
          title
          slug
          content
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }
`






export default ({ data }) => {
  return (
    <Layout>
      <div className={blogStyles.blog_container}>
        <div className={blogStyles.blogContent_container}>
          <ol>
            {data.allWordpressPost.edges.map((edge) => {
              return (
                <div className={blogStyles.blogPost_container}>
                  <li className={blogStyles.blog_list}>
                    <h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}></Link></h2>
                    <p className={blogStyles.blog_date}>{edge.node.date}</p>
                    <p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} />
                  </li>
                </div>
              )
            })}
          </ol>
        </div>
        <BlogNav />
      </div>

    </Layout>
  )
}
query($slug: Date!){
    allWordpressPost (filter: { date: { gt: $slug, lt: "2019-12" }}) {
      edges {
        node {
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  }