Dynamically generate Mdx pages based on file name
May 14, 2020
Ziel
MDX Seiten automatisch erzeugen, ohne path in Frontmatter zu setzen.
Slug aus Dateipfad
code
const { createFilePath } = require("gatsby-source-filesystem");
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions;
if (node.internal.type === "Mdx") {
const slug = createFilePath({
node,
getNode,
basePath: "notes",
trailingSlash: false,
});
createNodeField({
name: "slug",
node,
value: slug,
});
}
};
Pages erzeugen
code
const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
const result = await graphql(`
query {
allMdx {
edges {
node {
id
fields {
slug
}
}
}
}
}
`);
if (result.errors) {
reporter.panicOnBuild("ERROR: createPages", result.errors);
}
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve("./src/components/Layout/Post.jsx"),
context: { id: node.id },
});
});
};
Optional: Frontmatter path bevorzugen
Wenn vorhanden, nutze frontmatter.path, sonst fields.slug.