Question

我一直在尝试使用降价内容为博客生成帖子，但是除了图片和粗体文字之外，其余文字均无法正确显示。

index.md

---
slug: "/news/forest/second-transnational-meeting"
date: "2020-10-01"
title: "FOREST: 2nd Transnational Meeting"
tag: "FOREST"
---
## 16th-17th September 2020, questions, answers, and parallels between at Forest Training Center Pichl, Austria


The 1st-day agenda dealt with requirements and standards for forestry workers in Austria.The
presentations were followed by questions, answers, and parallels of the same topics in the project
partners’ countries.

![1](./first-image.jpg)


![2](./second-image.jpg)

The next day, the hosts organized a practical workshop on safety regulations and working standards in
the experimental forest of the Forestry Training Center Pilch. A tight link between theory and practice!

![3](./third-image.jpg)


![4](./fourth-image.jpg)

**Lots of information and rich experience!**

gatsby-config.js

{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            loading: `lazy`,
            maxWidth: 300
          }
        },
      ],
    }
  },

和帖子模板：

export default function Post({ data }) {
  const { frontmatter, html } = data.markdownRemark;

    return (
        <Layout>
            <Seo title = {frontmatter.title}/>
            <section>
            <div className="font-lora">
                <div className="text-2xl font-bold">{frontmatter.title}</div>
                <div className="text-xl">{frontmatter.date}</div>
                <br/>
                <ShareButtons slug={frontmatter.slug}/>
                <br/>
            </div>
            </section>
            <section
                dangerouslySetInnerHTML={{ __html: html }}
            />
        </Layout>
    )
}

export const query = graphql`
{
    markdownRemark {
      frontmatter {
        date(formatString: "MMMM DD YYYY")
        slug
        tag
        title
      }
      excerpt(pruneLength: 250)
      html
    }
  }
  
`;

但是，如果我在GraphiQL中使用查询，则生成的HTML如下：

<h2>16th-17th September 2020, questions, answers, and parallels between at Forest Training Center Pichl, Austria</h2>

但是在网站上，它不会显示为标题：

Answer 1

您的代码和查询都没有错。该代码按预期工作，正在检索和打印数据。您只缺少每个markdown标签的样式以“将其显示为标题”。

只需在您的组件中添加CSS（或SCSS）样式即可。例如，将样式文件添加到与组件相同的文件夹中，然后添加（在Post中）：

import './myPostStyles.scss'

在您的SCSS文件中：

h2 {
  font-size: 44px;
  color: red;
}

其余的标签都由儿子负责。作为全局标签样式，我建议将它们添加到全局文件中，而不是在组件本身中。

Markdown在GatsbyJS中无法正确显示

1 个答案: