如何解决将Gatsby博客从.md切换到.mdx －现在，博客文章模板不会从.mdx前端返回帖子标题 我的blog-post.js帖子模板 gatsby-node.js gatsby-config.js 示例.mdx 环境
摘要
我按照Thomas Wang的How to convert an existing Gatsby blog to use MDX教程，将我的Gatsby博客从使用.md转换为.mdx并使用gatsby-plugin-mdx。
运行gatsby develop时，我的帖子失去了版式和生成的帖子标题（来自.mdx的前题）。
我以前使用的是dangerouslySetInnerHTML和相同的模板（除了上面的教程中指定的更改之外），并且可以正常使用.md文件。
我认为这与<MDXRenderer>{post.body}</MDXRenderer>无关，当使用我的blog-post.js模板创建页面时，忽略了其中的代码。
我已经在gatsby-config的插件选项中声明了默认布局，从而获得了布局，但是我无法找回标题。我知道我可以将标题写到.mdx中，但是我希望它是自动生成的。理想情况下，我想从<Layout />模板内部访问我的blog-post.js组件，这样我也不必从gatsby-config插件选项中进行设置。
编辑
此后，我已经按照Gatsby mdx入门程序的代码更新了blog-post.js中的代码，但是仍然无法获得标题（下面显示了当前代码）。我也在尝试添加下一个/上一个帖子导航，但也没有渲染。任何帮助将不胜感激。
相关信息
我的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,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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。