如何解决将 sanity.io 的块输入添加到 next.js 博客文章
我正在使用 sanity.io 在 next.js 上开发博客,但在使用代码输入插件时遇到问题。
在理智方面一切都很好。我的问题是在 next.js [slug].js
文件中使用它。
这个问题是我的代码中的任何地方都没有 serializer.js 文件/组件,甚至在工作室根文件夹中也没有。我已经看到这适用于 gatsby,但我不知道如何将其应用于 Next.js
这是我目前拥有的:
import groq from 'groq'
import imageUrlBuilder from '@sanity/image-url'
import BlockContent from '@sanity/block-content-to-react'
import client from '../../client'
import Layout from '../../components/layout'
import utilStyles from '../../styles/utils.module.css'
import styles from '../../components/layout.module.css'
function urlFor (source) {
return imageUrlBuilder(client).image(source)
}
const Post = (props) => {
const {
title = 'Missing title',name = 'Missing name',categories,authorImage,mainImage,code,body = []
} = props
console.log(props)
return (
<Layout>
<article>
<div className={styles.container}>
<figure>
<img src={urlFor(mainImage).url()} />
</figure>
<h1 className={utilStyles.headingXl}>{title}</h1>
{categories && (
<ul className="inline">
Category:
{categories.map(category =>
<li key={category}>
<span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 bg-indigo-700 rounded">{category}</span>
</li>)}
</ul>
)}
<BlockContent
blocks={body}
imageOptions={{fit: 'max'}}
{...client.config()}
{...code}
/>
</div>
</article>
</Layout>
)
}
const query = groq ` *[_type == "post" && slug.current == $slug][0]{
title,"name": author->name,"categories": categories[]->title,"authorImage": author->image,body,}`
Post.getInitialProps = async function(context) {
const {slug = ""} = context.query
return await client.fetch(query,{ slug })
}
export default Post
我真的很感谢这里的帮助!谢谢
解决方法
您可以使用 BlockContent
属性将代码块类型的序列化程序传递给您的 serializers
。
const serializers = {
types: {
code: props => (
<pre data-language={props.node.language}>
<code>{props.node.code}</code>
</pre>
)
}
}
// ...
<BlockContent
blocks={body}
imageOptions={{fit: 'max'}}
{...client.config()}
{...code}
serializers={serializers}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。