見出し画像

Notion Blogで目次を表示する

この記事はこちらのクロスポストです

Notionの記事に追加したTable Of ContentsをNotion Blogで表示するカスタマイズです。

原始的なやり方ですが機能はしているので参考にどうぞ

修正内容

Notionでは各文章の塊や画像などがブロック単位に分かれており、Notion BlogではこのBlockたちをループで回して各エレメントを作成しています。

ループで描画用の配列にエレメントを順次追加していく感じですね。

見出しについても同様に一つのブロックとして処理されるので、見出しのみを配列に残しておいて全ての見出しBlockのエレメント作成が済んでから目次を作る処理を入れています。

流れとしては

* 目次項目配列 + 見出し情報配列を作成し初期化しておく
* Table Of ContentsのBlockの場合、描画配列に目次項目配列を渡しておく(参照渡しとなる)
* Blocksループで見出しのID作成し見出し情報配列へ
* Blocksループ完了後、見出し情報配列から目次項目配列の中身を作成する
* Table Of Contentsに反映される

と言う感じです、ちょっと分かりにくいかもしれませんが💦

コードをここに晒して説明するのは難しいので、実際の修正点についてはサンプルのコミットからどうぞ。

Notionデータ

あとがき

自分の場合は冒頭に短い文面、その後目次を置いてスタートするのでTable Of Contentsは多用しています。できればTable Inlineなんかも表示したいんですけどねぇ〜🤔

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
残念なプログラマ🤪 エラートラップ?なにそれ😇

こちらでもピックアップされています

コーディングやWeb
コーディングやWeb
  • 11本

プログラミングの話やらHeroku等のサービスやらいろいろ

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。