- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
所以,我正在使用 gatsby-mdx从 MDX 文件创建站点的插件。我想在 SitePage 对象和 Mdx 对象之间创建一个关联,这样我就可以对 SitePage 边缘执行一个 graphQL 查询以构建站点导航。
我的大部分代码都在 TypeScript 中,所以如果您想知道这些是什么鬼,请忽略任何类型注释。
我的第一个想法是使用 onCreateNode
API,获取 MDX 节点,并使用 createNodeField
操作将其添加到 SitePage。一切正常,B-U-T gatsby-mdx 插件 adds a bunch of other info to their node稍后使用 setFieldsOnGraphQLNodeType
API(在 onCreateNode
API 之后发生)。我希望这些字段(例如 frontmatter 和 tableOfContents)在以后的 graphql 查询中可用,但它们没有使用这种方法。
setFieldsOnGraphQLNodeType
我想我可以像 gatsby-mdx 扩展 Mdx 节点一样扩展 SitePage 对象。
我在这里遇到的关键问题是我不知道如何创建 Mdx GraphQL 节点类型。
export const setFieldsOnGraphQLNodeType = ({type, actions, getNodes}: any, pluginOptions: any) => {
if (type.name === "SitePage") {
const {createParentChildLink} = actions
return new Promise((resolve) => {
return resolve({
"childMdx": {
type: new GraphQLObjectType({
name: 'Mdx'
}),
async resolve(sitePageNode: any) {
const allNodes = getNodes()
if (sitePageNode.component &&
(sitePageNode.component.endsWith(".mdx") || sitePageNode.component === DefaultLayout)
) {
const associatedMdx = allNodes.find((mdxNode: any) =>
mdxNode.internal.type === 'Mdx' && mdxNode.fileAbsolutePath === sitePageNode.component
)
if (associatedMdx) {
console.log("Found associated MDX node", associatedMdx.id)
console.log("Adding it to the sitepage node", sitePageNode.id)
return associatedMdx
}
}
}
}
})
})
}
return {}
}
我也试过简单地将类型作为字符串 ('Mdx') 传递,但也失败了。
该插件使用 createParentChildLink 在 onCreateNode
API 中创建文件节点和已解析的 MDX 节点之间的父子链接。操作 ( source )。
我试着实现那个...
export const onCreateNode = ({node, actions, getNodes}: OnCreateNodeArgument) => {
const {createParentChildLink} = actions
const allNodes = getNodes()
if (node.internal && node.internal.type === 'SitePage' && node.component &&
(node.component.endsWith(".mdx") || node.component === DefaultLayout)
) {
const associatedMdx = allNodes.find((mdxNode: any) =>
mdxNode && mdxNode.internal && mdxNode.internal.type === 'Mdx' &&
(mdxNode.fileAbsolutePath === node.component || mdxNode.fileAbsolutePath === node.context.fileAbsolutePath)
)
if (associatedMdx) {
console.log("Found associated MDX node", associatedMdx.id)
console.log("Adding it to the sitepage node as a child", node.id)
createParentChildLink({parent: node, child: associatedMdx})
}
}
}
起初,这似乎是成功的,但是 tableOfContents
property gatsby-mdx 添加到 Mdx 节点在 graphQL 查询中仍然不可用,例如:
{
allSitePage(filter: {fields: {childMdx: {id: {ne: null}}}}) {
edges {
node {
path
fields{
childMdx {
tableOfContents
fileAbsolutePath
frontmatter {
title
}
}
}
context {
roughFilePath
id
}
}
}
}
}
我是 creating some pages programmatically在 gatsby-node.js 中。
我看到了类似用例的建议,可以使用 node type mappings ,但我认为 SitePage 和 MDX 对象之间的映射需要一些技巧(具体来说,从 siteMetadata 读取一些内容并进行字符串比较),我认为这不适用于我的用例。
最佳答案
所以我终于找到了一个更好的解决方案(比我之前的尝试,它涉及将 mdx 节点泵入页面的 context
)。
Gatsby 有一个 undocumented method将节点相互链接:
Yes, you can can use createNodeField with the not-yet-documented ___NODE syntax to create links between nodes.
所以,步骤是这样的:
createPage
中,将Mdx节点的id
存入SitePage节点。onCreateNode
中,如果节点是SitePage
,使用createNodeField
,以Mdx___NODE
作为字段名,Mdx节点的id 作为值。我的gatsby-node.js
:
const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === "SitePage" && node.context && node.context.id) {
createNodeField({
name: "Mdx___NODE",
value: node.context.id,
node,
})
}
if (node.internal.type === "Mdx") {
const value = createFilePath({ node, getNode })
createNodeField({
// 1) this is the name of the field you are adding,
name: "slug",
// 2) this node refers to each individual MDX
node,
value: `/blog${value}`
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const { data, errors } = await graphql(`
{
allMdx {
edges {
node {
id
fields {
slug
}
}
}
}
}
`)
if (errors) throw errors
data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/components/posts-page-layout.js`),
context: { id: node.id }
});
});
};
结果:
希望对您有所帮助!
关于javascript - 连接两个 gatsby 节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54203423/
我正在尝试将图像的路径作为 Prop 传递给组件 注意:组件和索引页都可以通过相同的路径访问图像。当我将路径作为 Prop 传递时它不起作用 在下面的代码中,我尝试使用 GatbsyImage 和 S
我在 gatsby 中的主要字体是在 index.scss 文件夹中定义的,就像这样在 body 标签中。 body { font-family: "Trebuchet MS", "Helveti
我一直在遵循以下步骤:https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用,我重新安装了最新版本的 ga
语境 Gatsby , headless CMS 奇迹,旁边是 gatsby-plugin-advanced-sitemap 使生成一个强大的 sitemap.xml文件轻而易举。 该插件支持通过 s
目前,我有两个使用 gatsby.js 开发的站点部署到 example.com 和 blog.example.com。我想创建一个 blog.example.com 的子目录到 example.co
我一直在学习本教程 https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images但普通人不可能写出 50
我正在使用 Gatsby 的 createResolver API 将 markdown 转换为 html。它在顶层数据上运行良好。但是,我无法让它在嵌套更深的数组上工作。 这是有效的: functi
当我使用 Gatsby (V2) 路由到新页面时,我正在尝试传递数据 我希望然后能够检索该页面上的数据。这可能吗?我已经研究了很多但没有运气所以我觉得我一定错过了什么......谢谢 最佳答案 如果你
默认情况下,我的 Gatsby 网址类似于 2018-09-06-hexagon 有什么办法可以让他们变成/blog/2018/09/06/hexagon ? 这是我的 gatsby-node.js
我有一个 json 文件和一个包含图像的文件夹 plugins/ └── gatsby-source-cars/ ├── images/ ├── cars.json └── g
在生产环境中运行 gatsby。 16. 在开发机器上工作。 来自服务器的错误: success write out redirect data - 0.002s success Build mani
当我想安装 gatsby starter 时,我在终端中遇到了这些错误。 任何人都知道如何解决它? [4/4] 🔨 Building fresh packages... [6/13] ⠁ shar
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后,我尝试运行命令“gatsby new my-app”。我总是收到一个错误,其中指出: ERROR eating new site
我无法使用 gatsby cli 克隆 gatsby-starter-default.git,因为它使用的“git”url 被我们的防火墙规则阻止 我也尝试将以下内容添加到 git config 但仍
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后,我尝试运行命令“gatsby new my-app”。我总是收到一个错误,其中指出: ERROR eating new site
我按照健全性文档创建了一个 internalLink 类型,并根据有关将 internalLinks 与 graphql api 一起使用的提示,我将其创建为单独的类型,如下所示: export de
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt,但生产站点自动在 HTTP header 处添加
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它,但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt,但生产站点自动在 HTTP header 处添加
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它,但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats
我是一名优秀的程序员,十分优秀!