🗒️
Fruition適用 + 改造
はじめに
ものを書くのにnoitonが便利なのだが、WebサイトもNotionベースに書き換えようと試みる。今回はfruitionを使うこととしてそれをもとにいろいろ改造してみたのでその記録をメモ。
fruitionの適用方法は他のサイトに記載があるので書かない。適用方法は以下のサイトを参考に適用している。
ここでは、その後の改造内容を忘れないようメモとして残しておく。ちなみに、試行錯誤した結果をそのまま載せているので、うまく動かなくても一切保証はしないのであしからず。
改造内容
ヘッダの改造
ヘッダ部のライトモード、ダークモード切り替えの削除しつつ、検索窓だけ残す設定。
（元のコードの164行目付近、<style>～</style>の中に追記）
表示幅の改造
Notionのコンテンツの幅が若干狭いので広げる改造。
通常コンテツは狭いのだが、ギャラリーは全幅を使うという点も気に入らないので、どちらも幅を同じにした。
（元のコードの164行目付近、<style>～</style>の中に追記）
フォントと行間変更
フォントと行間の変更。
Fruitionにはgoogle fontを用いたフォント変更の仕掛けが用意されている。しかしながら、複数のフォントを使う前提でなく、日本語と英語で違うフォントを使い分けるには適さない。関数を作り変えるのもめんどうなので、HTMLをベタ書きして対処。
（元のコードの164行目付近、<style>～</style>の中に追記）
これを書いてきて気づいたが、コードがmonospaceになっていない。
気になるが、とりあえずここは無視する。
表示されるけど、なぜかコンテンツページが404で返ってくる問題の解決
表示されるがなんか挙動がおかしい。気に入らないので、一応直しておく。
（元のコードの81行目付近）
google検索に引っ掛ける
（5月7日追記）
Fruitionを使ったコンテンツはgoogle検索に引っかからない。
理由はこのへんに書いてあるが、notionは検索エンジンからのリクエストを拒否するため。bing他ほとんどの検索エンジンは拒否するようだ。たぶんこれは無償版の制限で、有償版にしてネット検索を許可をONにすれば、きっとうまくいくのだろう。
たしかに、ブラウザではリターン200で返ってくるが、Google Search Consoleでは404が変えてきてgoogleのインデックスに登録されていない。
で、理由はブラウザのUser-Agentなので、それを書き換えるコードに変更。
（元のコードの113行目付近）
User-Agentはなんでもよいけどその上にあるUser-Agentを拝借した。
本筋ではないが、ヘッダ部がなぜか英語になるのでAccept-Languageヘッダも日本語に書き換えをしている。
これでインデックスされる、はず。
メタ情報の書き換え
（5月7日追記）
TwitterにURLをコピペ等とするとnotionの雰囲気が残っていまいちなので、metaタグなどの書き換えを追加改造。
（元のコードの113行目付近のMetaRewriter関数の中）
最終的な仕上がり
最終的な仕上がりは以下の通り。
とりあえずこんなもんでいいか。
