Notion 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].tsx で block.Type が quote の場合の表示を追加していきます。
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 で引用ブロックに対応する方法を解説しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます