我不知道如何告诉盖茨比创建一个页面
注入的可能性filter
值以便将其传递到页面
询问。
你不能。在页面查询中过滤数据的唯一方法是使用上下文传递数据。就像您在标签页面中所做的那样:
createPage({
path: tagPath,
component: path.resolve(`src/templates/tags.js`),
context: {
tag,
},
})
最简单和本机的方法是使用/tag/tag-name
page,旨在按标签名称过滤,否则,您将需要获取 URL 参数并在 JavaScript 中使用它filter https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter函数过滤页面查询中的所有数据。由于您缺少博客页面的渲染部分...类似这种方法应该有效:
const BlogTemplate=({ data }){
if(typeof window !== "undefined"){
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const urlTag= urlParams.get('tag');
const filteredPosts= data.allMarkdownRemark.edges.node.filter(node=> node.frontmatter.tag.includes(urlTag))
const loopData= urlParams.has('tag') ? filteredPosts : data
}
return loopData.allMarkdownRemark.edges.node.map(node=> <h1 key={node.title}>{node.title}</h1>)
}
注意:当然,可以根据您的需要进行调整,但要明白其中的意思。
另请注意,您需要将所有窗口逻辑包装在typeof window !== "undefined"
条件,因为在苏维埃社会主义共和国window(和其他全局对象)不可用 https://www.gatsbyjs.com/docs/debugging-html-builds/.
关键部分是使用还是使用data
或你的filteredPosts
取决于URL参数是否存在,因此如果存在,则需要过滤数据,否则,需要使用“默认”data
(未过滤)。
很难猜测代码的行为方式,但这个想法依赖于根据 URL 更改可迭代数据,如果需要,请使用一些钩子。
根据您的查询,您的博客似乎不包含任何内容tag
博客模板查询中的字段,因此您需要添加它以允许filter
循环工作。
一旦代码正常工作,您将需要添加适当的控件以避免在缺少某些字段时发生代码破坏,但要遵循的想法和路径是这样的。