block-types > 引用块
引用块
引用块用于显示来自其他来源的引用文本。通常以视觉上独特的样式呈现。
数据结构
引用块的 Notion API 数据结构如下:
{
"type": "quote",
"quote": {
"rich_text": [
{
"type": "text",
"text": {
"content": "This is a quote",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "This is a quote",
"href": null
}
],
"color": "default"
}
}
rich_text
: 包含引用文本及其样式信息的数组。color
: 指定引用文本的颜色。
React 组件
Notionpresso 中用于渲染引用块的组件如下:
import React from "react";
import type { QuoteArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
type QuoteProps = {
children?: React.ReactNode;
} & QuoteArgs;
const Quote: React.FC<QuoteProps> = ({ children, ...props }) => {
const {
quote: { color, rich_text: texts },
} = props;
return (
<div className={`notion-block notion-quote ${getColorCss(color)}`}>
<div className="notion-quote-content">
<p>
<RichText props={texts} />
</p>
{children}
</div>
</div>
);
};
export default Quote;
使用示例
引用块的使用示例如下:
import { Notion } from "@notionpresso/react";
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
这里 blocks
是来自 Notion API 的块数据数组。
样式
引用块的样式可以通过以下 CSS 类进行自定义:
.notion-block
: 应用于所有 Notion 块的基本样式.notion-quote
: 引用块的特定样式.notion-quote-content
: 引用文本的样式
如果需要额外的样式,可以对这些类进行 CSS 编写。通常,引用块具有以下样式特征:
- 左侧或两侧的粗边框
- 略微的缩进
- 背景色变化
- 字体样式变化(例如,斜体)
例如,可以应用以下 CSS:
.notion-quote {
border-left: 4px solid #ccc;
padding-left: 16px;
margin-left: 0;
margin-right: 0;
font-style: italic;
background-color: #f9f9f9;
}
嵌套支持
引用块可以包含其他块。这通过 children
prop 处理。例如,可以在引用文本中包含列表或其他文本块。
注意事项
- 通常,引用块用于短引用文本。对于长引用文本,为了提高可读性,可能需要将其分成多个引用块。
- 最好在引用块下方添加单独的段落块,以指明引用文本的来源。
- 为了考虑可访问性,对于屏幕阅读器用户,建议添加适当的 ARIA 属性。例如,可以使用
role="blockquote"
属性。