编号列表项块

编号列表项块用于创建有序列表。每个项目以顺序编号开始。

数据结构

编号列表项块的 Notion API 数据结构如下：

{
  "type": "numbered_list_item",
  "numbered_list_item": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a numbered list item",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a numbered list item",
        "href": null
      }
    ],
    "color": "default"
  }
}

• rich_text: 列表项的文本内容和样式信息。
• color: 文本的颜色。

React 组件

Notionpresso 中用于渲染编号列表项块的组件如下：

import React from "react";
import type { NumberedListItemArgs } from "../types";
import { getColorCss, numberedListItemMarker } from "../utils";
import RichText from "./internal/rich-text";

type NumberedListProps = {
  children?: React.ReactNode;
} & NumberedListItemArgs;

const NumberedListItem: React.FC<NumberedListProps> = ({
  children,
  ...props
}) => {
  const {
    numbered_list_item: { rich_text: texts, color },
  } = props;
  const { marker, format } = numberedListItemMarker.getMarker(props);

  return (
    <ol
      data-notion-marker-format={format}
      className={`notion-block notion-list-numbered ${getColorCss(color)}`}
    >
      <li className="notion-display-contents">
        <div className="notion-list-numbered-content">
          <span
            data-notion-marker-format={format}
            className="notion-list-marker"
          >
            {marker}
          </span>
          <p>
            <RichText props={texts} />
          </p>
        </div>
        {children}
      </li>
    </ol>
  );
};

export default NumberedListItem;

使用示例

使用编号列表项块的示例如下：

import { Notion } from "@notionpresso/react";

function MyNotionPage({ blocks }) {
  return (
    <Notion>
      <Notion.Blocks blocks={blocks} />
    </Notion>
  );
}

这里 blocks 是从 Notion API 接收到的块数据数组。

样式

编号列表项块的样式可以通过以下 CSS 类进行自定义：

• .notion-block: 所有 Notion 块的默认样式
• .notion-list-numbered: 编号列表项块的特定样式
• .notion-list-numbered-content: 列表项内容的样式
• .notion-list-marker: 编号样式

如果需要更多样式，可以对这些类进行样式编写。

编号生成方式

编号生成方式由 numberedListItemMarker.getMarker 函数决定。该函数会考虑当前项的位置和嵌套级别，返回适当的编号或字母。默认情况下，编号顺序如下：

1. 顶级级别：1, 2, 3, ...
2. 第二级别：a, b, c, ...
3. 第三级别：i, ii, iii, ...

可以根据需要进行自定义。

处理嵌套列表

编号列表项块也可以嵌套。嵌套列表通过 children prop 处理。嵌套级别不同，编号生成方式也会有所不同，这由 numberedListItemMarker.getMarker 函数处理。

注意事项

• 编号列表项块在连续使用时会自动组合成一个列表。
• 使用嵌套列表时，建议使用适当的缩进以明确层次结构。
• 编号生成方式遵循 Notion 的默认样式，但可以通过 CSS 进行自定义。
• 如果列表中断后再重新开始，编号生成可能会重新开始，因此需要小心。