Site cover image
Notion Blog 公式APIで引用ブロックに対応する

Notion API がついに引用ブロックをサポートしました。

これが引用ブロックです。

これでブログに必要なブロックはすべてサポートされたんじゃないかなと思います。

このエントリでは、公式APIを使って引用ブロックを表示する方法を説明します。

APIクライアントを引用ブロックに対応する

APIで引用ブロックを取得するために、最初にライブラリのアップデートを行っておきましょう。

yarn を使っている場合は yarn add でアップデートすることができます。

$ yarn add @notionhq/client

それではAPIクライアントを引用ブロックに対応していきます。

引用ブロックを QuoteBlock 、引用を Quote と定義しておきます。

interface QuoteBlock extends Block {
  Quote: Quote
}

interface Quote {
  Text: RichText[]
}

インターフェイスを定義したら type: quote のとき QuoteBlock を返す処理を記述していきます。

case 'quote':
  const quote: Quote = {
    Text: item[item.type].text.map(item => {
      const text: Text = {
        Content: item.text.content,
        Link: item.text.link,
      }

      const annotation: Annotation = {
        Bold: item.annotations.bold,
        Italic: item.annotations.italic,
        Strikethrough: item.annotations.strikethrough,
        Underline: item.annotations.underline,
        Code: item.annotations.code,
        Color: item.annotations.color,
      }

      const richText: RichText = {
        Text: text,
        Annotation: annotation,
        PlainText: item.plain_text,
        Href: item.href,
      }

      return richText
    }),
  }

  block = {
    Id: item.id,
    Type: item.type,
    HasChildren: item.has_children,
    Quote: quote,
  }
  break

次に src/pages/blog/[slug].tsxblock.Typequote の場合の表示を追加していきます。

case 'quote':
  toRender.push(
    React.createElement(
      components.blockquote,
      { key: block.Id },
      block.Quote.Text.map(
        richText => richText.Text.Content
      ).join('')
    )
  )
  break

これで下記のように引用ブロックが表示できます。

引用ブロックです。

引用ブロックのスタイルを調整したい場合は src/styles/blog.module.css の中にある .post blockquote を変更しましょう。

以上です。

このエントリでは Notion Blog で引用ブロックに対応する方法を解説しました。

Thank you!
Thank you!
URLをコピーしました

コメントを送る

コメントはブログオーナーのみ閲覧できます