GithubXDiscord

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" 属性。