GatsbyJS 中的 Markdown 文件在轉換時未按預期轉換為 HTML

Question

我正在使用 Github 上的Gatsby 入門博客構建一個帶有博客的網站。我更改了默認樣式、頁面和一些設置，但我在gatsby-node文件中保留了相同的代碼，該文件獲取所有 markdown 文件，然后您可以使用 graphQL 查詢。

這就是它應該被格式化為 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...