Docsify で実装するサイト横断ナビゲーション
Real Terms は，Docsify 5 をクライアントサイドレンダラーとして使用しています。ハッシュルーティング，サイドバー，検索，記事本文のレンダリングは Docsify が担います。一方，画面上端のナビゲーションには公式の Navbar 機能を使用していません。Blocs 6 for Mac で構築した親サイトおよび VitePress で構築した Significant Bit とユーザー体験を統一するため，eMotionGraphics のサイト横断インターフェースとして app.js と theme.css で独自に実装しています。
本シリーズでは，三つのサイトの構成と言語別 URL を前提として整理し，公式 Navbar を採用しない理由，起動順，DOM 構造，スクロール制御，ルート遷移，レスポンシブ表示の順に実装を解説します。外部モジュールは使用しません。以下では，Docsify の Navbar 機能を「公式 Navbar」，独自に実装した header.eg-site-nav を「サイトナビゲーション」と表記します。
サイト横断ナビゲーション
0. システム構成と言語別 URL の設計
emotiongraphics.jpは，同一オリジン上に構築方式の異なる三つのサイトを配置しています。フォトギャラリー，旅行記や製作物を提供する親サイト（本稿執筆時点ではHomeとAboutのみを想定），技術文書を公開するSignificant Bit，AIに関する記事を公開するReal Termsです。サイト横断ナビ…
1. 公式 Navbar を採用しない理由
Docsifyの公式Navbarは，ドキュメント内のページを案内するための機能です。loadNavbar: trueを設定して_navbar.mdを配置すると，Markdownから#app内の.app-navが生成されます。リンクはDocsifyのハッシュルーティングを前提とし，狭い画面ではサイドバーへ統合できます。こ…
2. Docsify の起動順とサイトナビのマウント
英語用のHTMLシェルはsite/index.html，日本語用はsite/ja/index.htmlです。各シェルのbodyには，主要な要素としてDocsifyのマウント先である#app，言語別設定を格納するwindow.RT，実行に必要なスクリプトを記述します。サイトナビゲーションのマークアップは，HTMLシェルに…
3. サイトナビの DOM 構造とツールバー
ensureSiteNav()の実行後には，次のDOM構造が生成されます。これらの要素はHTMLシェルには存在せず，すべてJavaScriptによって追加されます。ロゴ，ハンバーガーボタン，サイトリンク，ツールバーは，同じheaderの内部に配置します。Docsifyのレンダリング領域である#appと，共有ボタンを保持…
4. スクロール制御とルート遷移
サイトナビゲーションを常時表示すると，長い週次記事で本文に利用できる表示領域が狭くなります。そのため，Real Termsでは下方向のスクロール時にサイトナビゲーションを非表示にし，上方向のスクロール時とページ先頭付近で再表示します。この挙動は，VitePressで構築したSignificant Bitと共通です。表示…
5. レスポンシブ表示と CSS の責任範囲
デスクトップ表示では，サイトリンクとツールバーを横一列に配置し，ハンバーガーボタンをdisplay: noneで非表示にします。ビューポート幅が768px以下になるとハンバーガーボタンを表示し，サイトリンクとツールバーを全画面パネルへ移します。このブレークポイントは，VitePressで構築したSignificant…