我从 Sanity 获得的富文本问题

Question

import React from "react"
import {
  Link,
  graphql
} from "gatsby"
import Image from "gatsby-image"
import BlockContent from "@sanity/block-content-to-react"

import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({
  data,
  location
}) => {
  const post = data.sanityPost
  const siteTitle = data.site.siteMetadata ? .title || `Title`
  const {
    previous,
    next
  } = data

  return ( <
    Layout location = {
      location
    }
    title = {
      siteTitle
    } >
    <
    SEO title = {
      post.title
    }
    description = {
      post.title
    }
    /> <
    article className = "blog-post"
    itemScope itemType = "http://schema.org/Article" >
    <
    header >
    <
    h1 itemProp = "headline" > {
      post.title
    } < /h1> <
    p > {
      post.publishedDate
    } < /p> <
    /header> <
    div >
    <
    BlockContent blocks = {
      post._rawBody
    }
    projectId = "i9vps5pu"
    dataset = "production" /
    >
    <
    /div>

    <
    div style = {
      {
        margin: "2rem 0"
      }
    } > {
      post.postImage && ( <
        Image fluid = {
          post.postImage.asset.fluid
        }
        alt = {
          post.title
        }
        />
      )
    } <
    /div> <
    hr / >
    <
    /article> <
    nav className = "blog-post-nav" >
    <
    ul style = {
      {
        display: `flex`,
        flexWrap: `wrap`,
        justifyContent: `space-between`,
        listStyle: `none`,
        padding: 0,
      }
    } >
    <
    li > {
      previous && ( <
        Link to = {
          `/${previous.slug.current}`
        }
        rel = "prev" > ←{
          previous.title
        } <
        /Link>
      )
    } <
    /li> <
    li > {
      next && ( <
        Link to = {
          `/${next.slug.current}`
        }
        rel = "next" > {
          next.title
        }→ <
        /Link>
      )
    } <
    /li> <
    /ul> <
    /nav> <
    /Layout>
  )
}

export default BlogPostTemplate

export const pageQuery = graphql `
  query NewsPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    sanityPost(_id: { eq: $id }) {
      _id
      title
      publishedDate(formatString: "MMMM DD, YYYY")
      _rawBody
      postImage {
        asset {
          fluid {
            ...GatsbySanityImageFluid
          }
        }
      }
    }
    previous: sanityPost(_id: { eq: $previousPostId }) {
      slug {
        current
      }
      title
    }
    next: sanityPost(_id: { eq: $nextPostId }) {
      slug {
        current
      }
      title
    }
  }
`

这是来自模板文件夹中的 blog-post.js 文件的代码。 我遇到的主要问题是我从理智中恢复过来的内容，每个文本元素都有预期的 html 标记，但由于某种原因，文本本身忽略了任何样式，只是水平跨越，而与页面容器无关。我猜这个不可破坏的空间实体（）会造成这种混乱。清理该内容的最佳方法是什么？ 提前谢谢大家！

Answer 1

首先，修复所有凌乱的缩进，这将有助于更好地查看结构（另外还有一些错误的闭合元素和不必要的引号）：

import React from 'react';
import {
  Link,
  graphql,
} from 'gatsby';
import Image from 'gatsby-image';
import BlockContent from '@sanity/block-content-to-react';

import Layout from '../components/layout';
import SEO from '../components/seo';

const BlogPostTemplate = ({ data, location }) => {
  const post = data.sanityPost;
  const siteTitle = data.site.siteMetadata ? title || `Title`;
  const { previous, next } = data;

  return <Layout location={location} title={siteTitle}>
    <SEO title={post.title} description={post.title} />
    <article className="log-post" itemScope itemType="ttp://schema.org/Article">
      <header>
        <h1 itemProp='headline'>{post.title}</h1>
        <p> {post.publishedDate}</p>
      </header>
      <div>
        <BlockContent blocks={post._rawBody} projectId='9vps5pu' dataset='production' />
      </div>

      <div style={{ margin: '2rem 0' }}> {
        post.postImage && <Image fluid={post.postImage.asset.fluid} alt={post.title} />}
      </div>
      <hr />
    </article>
    <nav className='blog-post-nav'>
      <ul
        style={{ display: `flex`, flexWrap: `wrap`, justifyContent: `space-between`, listStyle: `none`, padding: 0 }}>
        <li> {previous && (<Link to={`${previous.slug.current}`} rel='prev'> ←{previous.title} </Link>)} </li>
        <li> {next && (<Link to={`/${next.slug.current}`} rel='next'> {next.title}→ </Link>)} </li>
      </ul>
    </nav>
  </Layout>;
};

export default BlogPostTemplate;

export const pageQuery = graphql`
    query NewsPostBySlug(
        $id: String!
        $previousPostId: String
        $nextPostId: String
    ) {
        site {
            siteMetadata {
                title
            }
        }
        sanityPost(_id: {eq: $id}) {
            _id
            title
            publishedDate(formatString: 'MMMM DD, YYYY')
            _rawBody
            postImage {
                asset {
                    fluid {
                        ...GatsbySanityImageFluid
                    }
                }
            }
        }
        previous: sanityPost(_id: {eq: $previousPostId}) {
            slug {
                current
            }
            title
        }
        next: sanityPost(_id: {eq: $nextPostId}) {
            slug {
                current
            }
            title
        }
    }
`;

如果您的包装器（<BlockContent> 的<Layout>、<article> 和 <div> 父级）设置了定义的有限 max-width（或 width），则子级将永远不会水平跨越，除非它们是 @ 987654328@ 定位，默认情况下不会。像这样的 CSS 规则应该可以工作：

.parent-wrapper {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.children {
  position: relative;
  display: inherit; // or inline-block
}

在这种情况下，.children 的跨度永远不会超过 1000px。