标注块

标注块用于强调需要引起注意的内容。通常使用图标和彩色背景来实现视觉上的突出显示。

数据结构

标注块的 Notion API 数据结构如下：

{
  "type": "callout",
  "callout": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a callout",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a callout",
        "href": null
      }
    ],
    "icon": {
      "type": "emoji",
      "emoji": "💡"
    },
    "color": "gray_background"
  }
}

• rich_text: Callout 的文本内容和样式信息。
• icon: Callout 旁边显示的图标信息。可以是 Emoji 或外部图像 URL。
• color: Callout 的背景颜色。

React 组件

Notionpresso 中渲染标注块的组件如下：

import React from "react";
import type { CalloutArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
import Icon from "./internal/icon";

type CalloutProps = {
  children?: React.ReactNode;
} & CalloutArgs;

const Callout: React.FC<CalloutProps> = ({ children, ...props }) => {
  const { callout } = props;

  return (
    <div
      className={`notion-block notion-callout ${getColorCss(callout.color)}`}
    >
      <div className="notion-callout-content">
        <div className="notion-callout-icon" aria-hidden="true">
          <Icon icon={callout.icon} />
        </div>
        <div className="notion-callout-text">
          <RichText props={callout.rich_text} />
        </div>
      </div>
      {children}
    </div>
  );
};

export default Callout;

使用示例

标注块的使用示例如下：

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

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

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

图标处理

标注块的图标通过 Icon 组件处理。这个组件支持 Emoji 和外部图像 URL。根据图标类型选择合适的渲染方式。

样式

标注块的样式可以通过以下 CSS 类进行自定义：

• .notion-block: 所有 Notion 块的默认样式
• .notion-callout: Callout 块的特定样式
• .notion-callout-content: Callout 内容的样式
• .notion-callout-icon: Callout 图标的样式
• .notion-callout-text: Callout 文本的样式

如果需要额外的样式，可以对这些类进行编写 CSS。例如：

.notion-callout {
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.notion-callout-icon {
  margin-right: 12px;
  font-size: 24px;
}

.notion-callout-text {
  flex: 1;
}

颜色处理

标注块的 color 属性决定了背景颜色。使用 getColorCss 工具函数生成合适的 CSS 类。这个函数将 Notion 的颜色名称转换为 CSS 类。

嵌套支持

标注块可以包含其他块。这通过 children prop 处理。例如，可以在标注块中包含列表或其他文本块。

注意事项

• 标注块用于强调重要信息或警告。然而，过度使用可能会分散注意力。因此，应适当使用。
• 图标和背景颜色的组合应满足可访问性标准。特别是文本和背景之间应有足够的对比度。
• 对于屏幕阅读器用户，建议为图标提供适当的替代文本。