Sanity CMS 的前端未应用文本突出显示
Text highlight is not being applied at front-end in Sanity CMS
我正在尝试使用 Sanity Headless CMS 和前端 React 创建博客。
我做了一个装饰器来突出显示文本。如下图所示,在编辑器中,突出显示的文本具有黄色背景色。
但是,我没有在我的 React 前端看到黄色突出显示。
我错过了什么?
代码片段如下:
sanityblog/schemas/blockContent.js
import React from "react";
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
const highlightRender = (props) => (
<span style={{ backgroundColor: "yellow" }}>{props.children}</span>
);
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
lists: [{ title: "Bullet", value: "bullet" }],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
{
title: "Highlight",
value: "highlight",
blockEditor: {
icon: () => "H",
render: highlightRender,
},
},
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url",
},
{
title: "Open in new tab",
name: "blank",
description: "Read https://css-tricks.com/use-target_blank/",
type: "boolean",
},
],
},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: "image",
options: { hotspot: true },
},
{
type: "code",
},
],
};
src/components/OnePost.js
OnePost.js
负责渲染单个博客post。
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import sanityClient from "../client.js";
import BlockContent from "@sanity/block-content-to-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
export default function OnePost() {
const [postData, setPostData] = useState(null);
const { slug } = useParams();
const serializers = {
types: {
code: (props) => (
<SyntaxHighlighter
language={props.node.language}
style={coldarkDark}
showLineNumbers
lineNumberStyle={{
padding: "0 5px 0 0",
fontSize: 14,
borderRight: "1.5px solid darkgray",
marginRight: "10px",
}}
>
{props.node.code}
</SyntaxHighlighter>
),
},
};
useEffect(() => {
sanityClient
.fetch(
`*[slug.current == $slug]{
title,
slug,
mainImage{
asset->{
_id,
url
}
},
body,
"name": author->name,
"authorImage": author->image
}`,
{ slug }
)
.then((data) => setPostData(data[0]))
.catch(console.error);
}, [slug]);
if (!postData) return <div>Loading...</div>;
return (
<div className="col-11 col-sm-10 col-md-6 mx-auto mt-5">
<div>
<h1 className="font-weight-bold">{postData.title}</h1>
<div>
<h6 className="text-secondary">{postData.name}</h6>
</div>
</div>
<div className="text-muted">
<BlockContent
blocks={postData.body}
projectId={sanityClient.projectId}
dataset={sanityClient.dataset}
serializers={serializers}
/>
</div>
</div>
);
}
您需要序列化数据。
您已经为代码编辑器 window 执行了此操作,在您当前的序列化程序中,您说“如果类型是代码,运行 此组件”。
你也需要为语法高亮器做这个,也许这样的事情可以工作(还没有测试过)
marks: {
highlight: ({ children }) => {
return <HighLightComponent children={children} />;
},
},
我正在尝试使用 Sanity Headless CMS 和前端 React 创建博客。
我做了一个装饰器来突出显示文本。如下图所示,在编辑器中,突出显示的文本具有黄色背景色。
代码片段如下: sanityblog/schemas/blockContent.js
import React from "react";
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
const highlightRender = (props) => (
<span style={{ backgroundColor: "yellow" }}>{props.children}</span>
);
export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
lists: [{ title: "Bullet", value: "bullet" }],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
{
title: "Highlight",
value: "highlight",
blockEditor: {
icon: () => "H",
render: highlightRender,
},
},
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url",
},
{
title: "Open in new tab",
name: "blank",
description: "Read https://css-tricks.com/use-target_blank/",
type: "boolean",
},
],
},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: "image",
options: { hotspot: true },
},
{
type: "code",
},
],
};
src/components/OnePost.js
OnePost.js
负责渲染单个博客post。
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import sanityClient from "../client.js";
import BlockContent from "@sanity/block-content-to-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";
export default function OnePost() {
const [postData, setPostData] = useState(null);
const { slug } = useParams();
const serializers = {
types: {
code: (props) => (
<SyntaxHighlighter
language={props.node.language}
style={coldarkDark}
showLineNumbers
lineNumberStyle={{
padding: "0 5px 0 0",
fontSize: 14,
borderRight: "1.5px solid darkgray",
marginRight: "10px",
}}
>
{props.node.code}
</SyntaxHighlighter>
),
},
};
useEffect(() => {
sanityClient
.fetch(
`*[slug.current == $slug]{
title,
slug,
mainImage{
asset->{
_id,
url
}
},
body,
"name": author->name,
"authorImage": author->image
}`,
{ slug }
)
.then((data) => setPostData(data[0]))
.catch(console.error);
}, [slug]);
if (!postData) return <div>Loading...</div>;
return (
<div className="col-11 col-sm-10 col-md-6 mx-auto mt-5">
<div>
<h1 className="font-weight-bold">{postData.title}</h1>
<div>
<h6 className="text-secondary">{postData.name}</h6>
</div>
</div>
<div className="text-muted">
<BlockContent
blocks={postData.body}
projectId={sanityClient.projectId}
dataset={sanityClient.dataset}
serializers={serializers}
/>
</div>
</div>
);
}
您需要序列化数据。
您已经为代码编辑器 window 执行了此操作,在您当前的序列化程序中,您说“如果类型是代码,运行 此组件”。
你也需要为语法高亮器做这个,也许这样的事情可以工作(还没有测试过)
marks: {
highlight: ({ children }) => {
return <HighLightComponent children={children} />;
},
},