Rich-Text-React-Renderer 不渲染 h1 或段落之间的空格

问题描述 投票：0回答：2

我正在关注 Gatsby.JS 的教程，该教程告诉您如何在 Contentful 上呈现博客文章。

我完全按照教程进行操作，看起来就像在教程中 - h1 标签自动呈现为 h1，无需配置任何额外选项。此外，段落之间会自动呈现空格。我的应用程序中并非如此。

BlogPost

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

Rendered Post

我需要配置任何额外的选项才能使 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
2个回答
0
投票

答案是向此特定 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;
  }
}

然后，这会更改 Contentful 中的 h1 样式，并在段落之间添加空格

0
投票

您需要启用该选项

preserveWhitespace
，

它将按原样渲染所有空白。

https://www.npmjs.com/package/@contentful/rich-text-react-renderer#preserving-whitespace

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.