GatsbyJS 中的 Markdown 文件在转换时未按预期转换为 HTML

Question

我正在使用 Github 上的 Gatsby starter blog 创建一个带有博客的网站。我更改了默认样式、页面和一些设置，但我在 gatsby-node 文件中保留了相同的代码，该文件获取所有降价文件，然后您可以使用 graphQL 查询获取这些文件。

This 应该是 HTML 的格式。但下面的截图显示了网站上的格式有多么不同。 Markdown 格式不正确。当我使用开发人员控制台检查它时，我可以看到正确的 HTML 标签，但它没有格式化

显然，我做错了什么，但我不知道是什么。

源代码如下：

gasty-node.js:

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
                date(formatString: "MMMM DD, YYYY")
                description
                path
                tags
              }
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  const posts = result.data.allMarkdownRemark.edges

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.fields.slug,
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Blog-post 模板

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    <Layout location={location} title={siteTitle}>
      <SEO
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      <div className="post-wrapper">
        <article id="post">
          <header className="sm:mb-5 md:mt-10 md:mb-10 lg:mb-20">
            <h1
              className="sm:text-2xl md: md:text-3xl lg:text-5xl font-bold mt-10"
              id="post-title"
            >
              {post.frontmatter.title}
            </h1>
            <p className="text-gray-600" id="post-date">
              {" "}
              - {post.frontmatter.date}
            </p>
          </header>
          <section
            id="post-body"
            dangerouslySetInnerHTML={{ __html: post.html }}
          />

          <hr className="mb-10" />

          <footer>
            <Bio />
          </footer>
        </article>

        <nav id="post-nav">
          <ul>
            {previous && (
              <li className="text-black font-bold text-lg border border-black hover:bg-black hover:text-white rounded p-5">
                <Link to={previous.fields.slug} rel="prev">
                  ← {previous.frontmatter.title}
                </Link>
              </li>
            )}{" "}
            {next && (
              <li className="text-black font-bold text-lg border border-black hover:bg-black hover:text-white rounded p-5">
                <Link to={next.fields.slug} rel="next">
                  {next.frontmatter.title} →
                </Link>
              </li>
            )}
          </ul>
        </nav>
      </div>
    </Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`

Answer 1

您的代码正确设置了 markdown 文件的内容，没有错误：您的 dangerouslySetInnerHTML 工作正常。你只是缺少样式。

只需添加一个 CSS/SCSS 文件并添加所需的样式。在您的 BlogPostTemplate 组件中：

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import './yourStyles.scss' // <-- here you are importing your styles

请注意 yourStyles.scss 中的路径与 BlogPostTemplate 中的路径指向同一文件夹。

在您的 yourStyles.scss 中添加您需要的内容：

h1, h2, h3 {
  font-size: 3rem;
  color: blue;
}

// and so on...