block-types > 标题块
标题块
标题块用于表示文档的结构,支持三个级别(标题 1、标题 2、标题 3)。
数据结构
标题块的 Notion API 数据结构如下(以标题 1 为例):
{
"type": "heading_1",
"heading_1": {
"rich_text": [
{
"type": "text",
"text": {
"content": "This is a heading",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "This is a heading",
"href": null
}
],
"color": "default",
"is_toggleable": false
}
}
type
: "heading_1", "heading_2", 或 "heading_3" 其中之一。rich_text
: 包含标题文本内容和样式信息的数组。color
: 指定标题的颜色。is_toggleable
: 表示是否使用切换功能。
React 组件
Notionpresso 中用于渲染标题块的组件如下:
import React, { useMemo } from "react";
import type { HeadingsProps, HeadingConfig } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
const Headings: React.FC<HeadingsProps> = ({ children, type, ...props }) => {
const {
[type]: { color, rich_text: texts, is_toggleable },
} = props;
const { headingTag: HeadingTag, headingClassName } =
useMemo<HeadingConfig>(() => {
switch (type) {
case "heading_2":
return { headingTag: "h2", headingClassName: "notion-h2" };
case "heading_3":
return { headingTag: "h3", headingClassName: "notion-h3" };
default:
return { headingTag: "h1", headingClassName: "notion-h1" };
}
}, [type]);
return (
<div
className={`notion-block ${headingClassName} ${getColorCss(color)}`}
>
<HeadingTag className={`notion-h-content ${headingClassName}-content`}>
<RichText props={texts} />
</HeadingTag>
{children}
</div>
);
};
export default Headings;
使用示例
以下是使用标题块的示例:
import { Notion } from "@notionpresso/react";
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
这里 blocks
是从 Notion API 接收到的块数据数组。
样式
标题块的样式可以通过以下 CSS 类进行自定义:
.notion-block
: 应用于所有 Notion 块的基本样式.notion-h1
,.notion-h2
,.notion-h3
: 针对每个标题级别的特定样式.notion-h1-content
,.notion-h2-content
,.notion-h3-content
: 针对每个标题内容的样式
如果需要额外的样式,可以针对这些类编写 CSS。
注意事项
- 标题块是表示文档结构的重要元素,因此建议使用适当的标题级别。
- 如果
is_toggleable
属性为 true,则该标题将具有切换功能。在这种情况下,可能需要额外的逻辑。