文章/答案/技术大牛

发布

社区首页 >问答首页 >富文本反应-渲染器不呈现h1或段落之间的空格。

问富文本反应-渲染器不呈现h1或段落之间的空格。
EN

Stack Overflow用户

提问于 2022-09-09 08:57:24

回答 1查看 61关注 0票数 -1

我正在学习一个关于Gatsby.JS的教程，该教程告诉您如何在内容丰富的情况下呈现博客文章。

我完全遵循了教程，在本教程中，h1标记自动呈现为h1，而无需配置任何额外的选项。此外，空格会自动呈现在段落之间。在我的应用程序中，情况并非如此。

这篇文章在我的应用程序中呈现如下：

是否有任何额外的选项需要配置，以使h1呈现为h1，以及是否有我在内容中指定空间的空间？

这是我的代码：

    import React from 'react'

import Layout from '../components/Layout'
import { graphql } from 'gatsby'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
import { renderRichText } from "gatsby-source-contentful/rich-text" 
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Head from '../components/head'
import '../styles/global.css'

export const query = graphql`
query($slug: String!) {
    contentfulBlogPost(slug: {eq: $slug}) {
        title
        publishedDate(formatString: "MMMM Do, YYYY")
        body {
            raw
            references {
                ... on ContentfulAsset {
                    title
                    contentful_id
                    __typename
                    gatsbyImageData(width:750)
                    description
                }
            }
        }
    }
}`

const Blog = (props) => {
    const options = {
        renderNode: {
            "embedded-asset-block": (node) => {
                const { gatsbyImageData, description } = node.data.target
                if (!gatsbyImageData) {
                    // asset is not an image
                    return null
                }
                return (
                    <GatsbyImage image={getImage(gatsbyImageData)} alt={description} />
                )
            }
        }
    }

    return (
<Layout>
    <Head title={props.data.contentfulBlogPost.title} />
    <div className="blogtitlediv">
        <div className="innerblogtitlebox">
        <h1 class="text-5xl text-white text-center">{props.data.contentfulBlogPost.title}</h1>
        </div>
    </div>
   
   <div class="container py-8 px-8">
   <div class="my-10">
    {documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw), options)
    &&
    renderRichText(
        props.data.contentfulBlogPost.body, options
    )}
     <p className="date" class="flex flex-row-reverse italic py-6 mx-8">{props.data.contentfulBlogPost.publishedDate}</p>
     </div>
     </div>
</Layout>
    )
}

export default Blog

reactjs

contentful

richtext

回答 1

Stack Overflow用户

发布于 2022-09-09 11:43:21

答案是在这个特定的DIV中添加一种样式，其中Contentful的内容是呈现的，而不是整个div或整个页面。使用"className = {blogStyles.contentStyles}“如下所示：

<div class="my-10" className={blogStyles.contentStyles}>
    {documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw), options)
    &&
    renderRichText(
        props.data.contentfulBlogPost.body, options
    )}
     <p className="date" class="flex flex-row-reverse italic py-6 mx-8">{props.data.contentfulBlogPost.publishedDate}</p>
     </div>

然后您必须为名为blog.module.scss的内容创建一个新的样式文件。

我添加了从'./blog.module.scss导入的以下样式

 .contentStyles {

p {
    margin-top: 2rem;
  }

h1 {
    margin-top: 2rem;
    font-size: 3rem;
    }

h2 {
    margin-top: 2rem;
    font-size: 2rem;
  }
}

这将更改内容中的h1样式，并在段落之间添加空格。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73659662

复制

相似问题

问富文本反应-渲染器不呈现h1或段落之间的空格。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问富文本反应-渲染器不呈现h1或段落之间的空格。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问富文本反应-渲染器不呈现h1或段落之间的空格。
EN