前提
NotionをベースにSuperを用いてWebサイト構築する際のお役立ち情報を記載する。
なお検証・調査時期は2022年6月~7月くらい
そもそもSuperとは何かについては以下の記事が事例等もあってわかりやすい。
基礎知識
構築の基礎
まずやるのは/(home)となるページを選定し、共有リンクを発行すること。
最初のCreate a new siteのモーダルで入れるやつ。
ここで指定したNotion page URLのページが所謂indexページになる。
Notion page URLはNotionで「共有」から「Webで公開」した際に取得できるリンク。
以降このNotionのページ配下に配置したページはすべてNotion側の仕様で「Webで公開」され、Super側でも自動的に公開される。
なお登録ドメイン/ページタイトルという構造で公開されるので、導線を設置していなくてもURL直叩きで見られるようになるので注意。
サイトとして公開される範囲について
個人的に最も重要な仕様だと思ったのが、同じワークスペース内でもあくまでCreate a new siteで指定したページ配下のみが公開され、それ以外はSuperの関心事には含まれないというもの。
これはSuperというよりNotionの仕様の話ではあるが、不注意でセンシティブ情報を知らぬ間にインターネットの海に放流していたみたいなことを防ぐためには理解しておくべきことである。
具体例
以下実例で解説する。
とあるワークスペースでこのようなページ構成になっていたとする。
TESTとAAAAAAAという親ページが2つあり、子ページがそれぞれぶら下がっている。
ここでTESTをNotionの「共有」から「Webで公開」すると、TEST配下がすべて公開される。
このTESTのURLをSuperのNotion page URLにいれて公開すると以下のようになる。
ここで覚えておくべきなのはAAAAAAAはNotionの仕様で「Webで公開」されていないし、当然Superにも関与しない。
さらに親ページとして最初にNotion page URLで公開したページ配下に存在しないページは「Webで公開」してSuper側でAdd new pageで指定してもSuepr側では404になる。
これはドキュメントでも強調して記載されている。
Important: If you want to show pages on your site, they must be public in Notion and must be child pages of the site's home page. This prevents Notion pages you don't own from loading on your site, as well as pages in your workspace you may not want others to see.
つまり今回の例で言えば、AAAAAAA配下のBBBBBBを「Webで公開」してAdd new pageに指定しても、/(home)として最初に親として指定したTESTの配下に無いページなのでSuperでは読み込まれない。
「Webで公開」されてはいるのでNotionのURLでは公開されているが、Superでは公開されない。
削除の仕様
これは簡単かつ当たり前だが、Notion本体を消すとSuperからも消えるが、Super側で消してもNotion側は消えない。
便利なテクニック
導線を表示したくないページの隠し方
基本的にNotionの仕様で子ページを作るとその親ページに子ページへの導線ができてしまい、消せない。
これは導線としては隠しておきたいけど子ページにしたい際に不便である。
そのため以下のような手順でSuperで生成したサイトでは導線を隠すことができる。
- トグルリスト(
>で出てくるやつ)を作る - その中に隠したいページを入れる
- 該当トグルリストのカラーから背景色をブラウンとかにする
- Super側のCSS設定で背景色がブラウンの要素を
display: noneにする
.notion-toggle {
display: none !important;
}偉大なReference
トグルの中を2カラムにする
もともとトグルリストの中身は2カラムにすることができず、高度なテクニックを用いて実装する必要があり、構築していた2022年6月に苦しんだが、Notionのアップデートで解決した。
ちなみにこれ以前はこういうテクニックを使った。
