我從 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
        }
    }
`;

如果您的包裝器（ <Layout> 、 <article>和<div>的父級<BlockContent> ）設置了定義的有限max-width （或width ），則子級將永遠不會水平跨越，除非它們是absolute定位的，默認情況下，它不會。 像這樣的 CSS 規則應該有效：

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

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

在這種情況下， .children的跨度永遠不會超過1000px 。