Блог Гэтсби переключен с .md на .mdx - теперь шаблон сообщения блога не возвращает заголовок сообщения из основного материала .mdx
Резюме
Я преобразовал свой блог Гэтсби из использования .md к .mdx с помощью gatsby-plugin-mdxследуя руководству Томаса Ванга Как преобразовать существующий блог Gatsby для использования многомерных выражений.
Когда я бежал gatsby develop Я потерял макет сообщения и сгенерированный заголовок сообщения (который пришел из .mdx frontmatter) за мои посты.
Я ранее использовал dangerouslySetInnerHTML и тот же шаблон (за исключением изменений, указанных в приведенном выше руководстве), и он работал должным образом с .md файлы.
Я думаю, это как-то связано с <MDXRenderer>{post.body}</MDXRenderer> игнорируя код за его пределами при создании страницы с моим blog-post.js шаблон.
Я получил макет обратно, объявив макет по умолчанию в параметрах плагина в моем gatsby-configно я не могу вернуть титул. Я знаю, что могу просто написать заголовок в.mdxно я хочу, чтобы он генерировался автоматически. В идеале я хотел бы получить доступ к своему<Layout /> компонент изнутри blog-post.js шаблон, так что мне не нужно устанавливать его из gatsby-config параметры плагина тоже.
РЕДАКТИРОВАТЬ
С тех пор я обновил код в моем blog-post.jsв соответствии со строками стартера Gatsby mdx, но я все еще не могу получить название (текущий код показан ниже). Я также пытался добавить навигацию к следующему / предыдущему посту, но это тоже не отображается. Любая помощь будет действительно оценена.
Релевантная информация
Мой шаблон сообщения blog-post.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { rhythm } from "../utils/typography"
class BlogPostTemplate extends React.Component {
render() {
const post = this.props.data.mdx
const { previous, next } = this.props.pageContext
console.log(this.props.pageContext)
return (
<Layout location={this.props.location}>
<h1>{post.frontmatter.title}</h1>
<p>{post.frontmatter.date}</p>
<MDXRenderer>{post.body}</MDXRenderer>
<hr
style={{
marginBottom: rhythm(1),
}}
/>
<ul
style={{
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: 0,
}}
>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← {previous.frontmatter.title}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
{next.frontmatter.title} →
</Link>
)}
</li>
</ul>
</Layout>
)
}
}
export default BlogPostTemplate
export const pageQuery = graphql`
query($slug: String!) {
site {
siteMetadata {
title
}
}
mdx(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
body
}
}
`
gatsby-node.js
const path = require(`path`)
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: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allMdx {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
}
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Oliver Holms`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/templates/blog-post.js"),
default: require.resolve("./src/components/layout.js"),
},
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 2000,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
],
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
`gatsby-plugin-emotion`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 2000,
},
},
`gatsby-transformer-json`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-feed-mdx`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
feeds: [
{
serialize: ({ query: { site, allMdx } }) => {
return allMdx.edges.map(edge => {
return Object.assign({}, edge.node.frontmatter, {
description: edge.node.excerpt,
date: edge.node.frontmatter.date,
url:
site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
guid:
site.siteMetadata.siteUrl + "/blog" + edge.node.fields.slug,
custom_elements: [{ "content:encoded": edge.node.html }],
})
})
},
query: `
{
allMdx(
sort: { order: DESC, fields: [frontmatter___date] },
) {
edges {
node {
excerpt
html
fields { slug }
frontmatter {
title
date
}
}
}
}
}
`,
output: "/rss.xml",
title: "RSS Feed for www.oliverholms.com",
// optional configuration to insert feed reference in pages:
// if `string` is used, it will be used to create RegExp and then test if pathname of
// current page satisfied this regular expression;
// if not provided or `undefined`, all pages will have feed reference inserted
match: "^/blog/",
},
],
},
},
],
}
Пример.mdx
---
title: "Post Title"
date: "2020-08-01"
---
Body Text
Окружающая среда
System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.125
Safari: 13.1.2
npmPackages:
gatsby: ^2.23.12 => 2.24.47
gatsby-image: ^2.4.16 => 2.4.16
gatsby-plugin-emotion: ^4.3.10 => 4.3.10
gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1
gatsby-plugin-mdx: ^1.2.34 => 1.2.34
gatsby-plugin-sharp: ^2.6.27 => 2.6.27
gatsby-plugin-typography: ^2.5.10 => 2.5.10
gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12
gatsby-remark-images: ^3.3.25 => 3.3.25
gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12
gatsby-remark-smartypants: ^2.3.10 => 2.3.10
gatsby-source-filesystem: ^2.3.23 => 2.3.24
gatsby-transformer-json: ^2.4.11 => 2.4.11
gatsby-transformer-sharp: ^2.5.13 => 2.5.13
npmGlobalPackages:
gatsby-cli: 2.12.87