markdown - Markdown 在 GatsbyJS 中无法正确显示
问题描述
我一直在尝试使用 markdown 内容为博客生成帖子,但除了图片和粗体文本之外,其余文本都无法正确显示。
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>
但在网站上,它不显示为标题:
解决方案
您的代码和查询都没有问题。代码按预期工作,您正在检索和打印数据。您只是缺少每个降价标签的样式以“将其显示为标题”。
只需在组件中添加 CSS(或 SCSS)样式。例如,在与您的组件相同的文件夹中添加一个样式文件并添加(在您的Post
):
import './myPostStyles.scss'
在您的 SCSS 文件中:
h2 {
font-size: 44px;
color: red;
}
其余的标签也是如此。作为全局标签样式,我建议将它们添加到全局文件中,而不是组件本身中。
推荐阅读
- python - 在给定货币价值和糖果价格的情况下购买糖果的方式数量
- docker - 使用 Docker 在 Virtuoso 中加载 DBPedia Turtle 时出错
- r - 数据框的相关矩阵,按日期
- excel - 带过滤器的数据验证
- java - 单元测试一个简单的内存缓存
- wordpress - 活动图像大小 Woocommerce 产品页面
- sql - 将多个字段合并为一个
- .net-core - 有没有办法在 netcore webapi 应用程序上配置“JwtBearerOptions”?
- java - 数组子集问题 [O(n) 时间复杂度的最小空间]
- python - cached_property 何时重置?