3. サイトナビの DOM 構造とツールバー

ensureSiteNav() の実行後には，次の DOM 構造が生成されます。これらの要素は HTML シェルには存在せず，すべて JavaScript によって追加されます。

text

header.eg-site-nav
└── div.eg-site-nav-inner
    ├── a.eg-site-nav-logo
    ├── button.eg-site-nav-toggle
    └── div#eg-site-nav-menu.eg-site-nav-end
        ├── nav.eg-site-nav-links
        └── div.page-toolbar
            ├── div.appearance-row
            │   ├── span.appearance-label
            │   └── button.appearance-toggle
            └── nav.lang-switch

ロゴ，ハンバーガーボタン，サイトリンク，ツールバーは，同じ header の内部に配置します。Docsify のレンダリング領域である #app と，共有ボタンを保持する .rt-share-float は，この DOM 構造には含まれません。

オリジン相対 URL によるサイトリンク

サイトリンクの定義は siteNavLinks() が返します。いずれのリンクにも，Docsify のハッシュルーティングは使用しません。

function siteHomeHref() {
  return RT.lang === "ja" ? "/ja/" : "/";
}

function siteNavLinks() {
  var ja = RT.lang === "ja";
  return [
    { text: "Home", href: siteHomeHref() },
    {
      text: "Real Terms",
      href: RT.publicBase,
      current: true,
    },
    {
      text: "Significant Bit",
      href: ja ? "/docs/ja/" : "/docs/",
    },
    { text: "About", href: ja ? "/ja/about/" : "/about/" },
  ];
}

各リンクの役割は次のとおりです。

ロゴと Home
発行元である eMotionGraphics のホームを参照します。英語では /，日本語では /ja/ です。Real Terms のトップである /ai/ は参照しません。
Real Terms
現在表示しているサイトを示します。リンク先は，言語に応じて /ai/ または /ai/ja/ です。current: true によって常に aria-current="page" が付くため，Docsify 内のルートが変わっても，サイトナビゲーション上の現在地は Real Terms のままです。
Significant Bit
VitePress で構築した Significant Bit を参照します。リンク先は /docs/ または /docs/ja/ です。
About
eMotionGraphics の About ページを参照します。リンク先は /about/ または /ja/about/ です。

Home，Real Terms，Significant Bit，About というラベルは，英語ページと日本語ページで共通です。

サイトナビゲーション内の機能

外観切替と言語切替は，それぞれのプラグインが ensureToolbar() を介して .eg-site-nav-end へ追加します。ensureSiteNav() の実行時点では .page-toolbar を生成せず，ensureToolbar() が最初に呼ばれた時点で追加します。ensureToolbar() は内部で ensureSiteNav() を呼ぶため，ツールバーを追加する前にサイトナビゲーションの存在が保証されます。

外観設定の保存キーは vitepress-theme-appearance です。Significant Bit と同じキーを使用するため，/docs/ と /ai/ の間でライトモードとダークモードの選択を共有できます。HTML シェルの <head> に置いたインラインスクリプトが，スタイルシートの適用前に html.dark を設定し，スタイル未適用コンテンツの一時表示（Flash of Unstyled Content，FOUC）を抑制します。

サイトナビゲーションのロゴには，CSS フィルターによる色反転を使用しません。ライトモード用の logo-ex-black-text.svg とダークモード用の logo-ex-white-text.svg を同じ位置へ配置し，html.dark の有無によって表示を切り替えます。

言語切替では，言語別のベースパスだけを変更し，現在のハッシュを維持します。たとえば，/ai/#/2026/weekly/CW36.md から日本語へ切り替えると，遷移先は /ai/ja/#/2026/weekly/CW36.md です。英語版と日本語版で記事のファイル名を統一しているため，同じハッシュを引き継げます。

サイトナビゲーション外の機能

検索には Docsify 公式の search プラグインを使用します。このプラグインは <section class="search"> を .sidebar へ挿入します。サイトナビゲーションの横幅と要素配置を Significant Bit に揃えるため，検索 UI はサイトナビゲーションへ移動しません。

共有ボタンは .rt-share-float として document.body へ直接追加します。配置は top: calc(var(--rt-site-nav-height) + 0.65rem)，z-index は 20 です。サイトナビゲーションの transform の影響を受けないため，サイトナビゲーションがスクロールによって非表示になっても，共有ボタンは表示されたままです。また，z-index が通常時のサイトナビゲーションの 40 より小さいため，両者が重なる場合はサイトナビゲーションを優先します。

サイドバー内の Real Terms ロゴである .app-name-lockup も，サイトナビゲーションには含めません。sidebarBrand プラグインが Docsify の .app-name-link を置換して生成します。これにより，サイトナビゲーションには発行元のワードマーク，サイドバーには媒体のロックアップを配置し，両者の役割を分離しています。

3. サイトナビの DOM 構造とツールバー ​

オリジン相対 URL によるサイトリンク ​

サイトナビゲーション内の機能 ​

サイトナビゲーション外の機能 ​

3. サイトナビの DOM 構造とツールバー

オリジン相対 URL によるサイトリンク

サイトナビゲーション内の機能

サイトナビゲーション外の機能