oopy Notionブログ: floating table of contents カスタムプラグイン

oopyのNotionブログに適用できる floating table of contents です。

[特徴]

1. Notionで右側に表示される floating table of contents のUIとほぼ同じように実装しました。（hover時に表示されるポップオーバーを除く）
2. indicator をクリックするとスクロール移動し、indicator で現在位置を知らせます。

[導入方法]

1. oopy 管理ページ > HTML編集 > body に以下の script タグを追加して保存
2. <script src="https://roseline124.github.io/custom-js/…;
3. キャッシュ削除後、強制再読み込み

[oopyのfloating-tocとの違い]

oopyが作成した実験的機能の floating-toc も存在します。
https://www.oopy.io/ko/guides/tips-and-tricks/floating-toc

このカスタムプラグインは、oopyの floating-toc とは異なり、

1. table of contents ブロックがなくても heading を検知して indicator で表示します。
2. ページごとに設定しなくても、heading があるすべてのページで動作します。
3. floating-toc は heading tag のテキストをすべて表示しますが、このプラグインはコンテンツ領域を邪魔しないよう、indicator に hover した際に 4〜6文字だけを表示します。（欠点）

[guseod24]

• 現在はNotionのpopoverも同じように再現しました！