问题描述
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 标签,但出于某种原因,文本本身忽略任何样式,只是水平跨越,而不管页面容器如何。我猜这个不可破坏的空间实体 ( ) 造成了这种混乱。清理该内容的最佳方法是什么? 先谢谢大家!
解决方法
首先,修复所有凌乱的缩进,这将有助于更好地查看结构(另外还有一些错误的封闭元素和不必要的引号):
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
。