将包含Markdown的YAML转换为在Gatsby中显示可以通过以下步骤实现:
gatsby new my-gatsby-project
cd my-gatsby-project
npm install gatsby-transformer-remark gatsby-plugin-react-helmet react-helmet
gatsby-config.js
中添加必要的插件。打开文件并添加以下内容:module.exports = {
plugins: [
'gatsby-transformer-remark',
'gatsby-plugin-react-helmet'
]
}
content
的文件夹。content
文件夹中创建一个Markdown文件,命名为post.md
,并在其中添加Markdown内容。post.yaml
,并在其中添加YAML数据。src/pages
目录下创建一个名为markdownPage.js
的文件。markdownPage.js
文件中添加以下代码:import React from 'react'
import { graphql } from 'gatsby'
import { Helmet } from 'react-helmet'
const MarkdownPage = ({ data }) => {
const { markdownRemark } = data
const { frontmatter, html } = markdownRemark
return (
<div>
<Helmet>
<title>{frontmatter.title}</title>
</Helmet>
<h1>{frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
export default MarkdownPage
src/templates
目录下创建一个名为markdownTemplate.js
的文件。markdownTemplate.js
文件中添加以下代码:import React from 'react'
import { graphql } from 'gatsby'
import MarkdownPage from '../pages/markdownPage'
const MarkdownTemplate = ({ data }) => {
return (
<MarkdownPage data={data} />
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
export default MarkdownTemplate
gatsby-node.js
文件中添加以下代码:const path = require('path')
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
const markdownTemplate = path.resolve('src/templates/markdownTemplate.js')
resolve(
graphql(`
{
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.error(result.errors)
reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: markdownTemplate,
context: {
slug: node.fields.slug
}
})
})
})
)
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === 'MarkdownRemark') {
const value = path.basename(node.fileAbsolutePath, '.md')
createNodeField({
name: 'slug',
node,
value: `/${value}`
})
}
}
gatsby develop
http://localhost:8000/post
,其中post
是你在第7步中创建的Markdown文件的文件名,不包括文件扩展名。你应该能够看到Markdown内容在Gatsby中成功显示。这样,你就可以将包含Markdown的YAML转换为在Gatsby中显示了。你可以在Gatsby中创建多个页面来显示不同的Markdown内容,并在每个页面中使用不同的YAML数据。
领取专属 10元无门槛券
手把手带您无忧上云