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