CODE:LIFE

NotionReact

notion-blog に 記事のサムネイル画像を表示する方法

avatar

notion-blog は notion に書いた記事をそのままブログとして公開できて素晴らしく便利。

しかし、デフォルトでは記事のサムネイル画像表示に対応していない。分からないなりにもなんとか実装することが出来たのでその方法を共有する。

An image from Notion

 

実装手順

  1. blog テーブルのプロパティに Thumb(Files & media)を追加
  2. index.tsx に Thumb を読み込むコードを追加
  3. Thumb を img タグに展開するコードを追加

最初は難しく考えていたのですが、汎用性の高い作りになっていたので手順としてまとめると3ステップのみで実装できました。

1. blog テーブルのプロパティに Thumb(Files & media)を追加

プロパティの追加で名前を「Thumb」PROPERTY TYPEを「Files & media」にする

An image from Notion

 

2. index.tsx に Thumb を読み込むコードを追加

notion-blog/src/pages/blog/index.tsx ( line 37-39 )

posts.map(post => {
  post.Authors = post.Authors.map(id => users[id].full_name)
})

以下のように post.Thumb を追加する

posts.map(post => {
    post.Authors = post.Authors.map(id => users[id].full_name)
    post.Thumb = post.Thumb && `/api/asset?assetUrl=${encodeURIComponent(post.Thumb)}&blockId=${post.id}`
})

これによってThumbにセットされた画像ファイルのURLを取得し、asset APIにて外部公開できるURLに変換している。ページのプロパティを新たに追加してもきちんとパースしてくれる作りは素晴らしい。おかげてここまで簡単にデータを取得できる。

 

3. Thumb を img タグに展開するコードを追加

notion-blog/src/pages/blog/index.tsx ( line 89-95 )

<p>
  {(!post.preview || post.preview.length === 0) &&
    'No preview available'}
  {(post.preview || []).map((block, idx) =>
    textBlock(block, true, `${post.Slug}${idx}`)
  )}
</p>

記事のプレビュー部分(最初のdividerまでの10ブロック)を表示する箇所。

この上部にサムネイル画像を表示するように書き加える。

{post.Thumb && (
  <Link href="/blog/[slug]" as={getBlogLink(post.Slug)}>
    <a>
      <img src={post.Thumb} />
    </a>
  </Link>
)}
<p className="preview">
  {(!post.preview || post.preview.length === 0) &&
    'No preview available'}
  {(post.preview || []).map((block, idx) =>
    textBlock(block, true, `${post.Slug}${idx}`)
  )}
</p>

post.Thumb && で サムネイル画像ファイルがセットされている場合のみimgタグを生成する。

img タグは <Link href="/blog/[slug]" as={getBlogLink(post.Slug)}> で囲み、クリックした場合に記事ページに遷移できるようリンクを貼る。

 

おまけ

実はブラウザでソースを見ると取得結果のオブジェクトがあり、ここで表示されているデータであれば同様の方法でページ生成時に組み込める。

An image from Notion

今回は紹介していないが、Tags プロパティを span タグとして展開している。

次回はこっちの作り方を紹介しよう。

An image from Notion