Anaguraプロジェクトの複数サイト（Hub、Blog、Dict-DB、Khokh Sudar、Linguistics）で、ナビゲーションとフッターを統一するため、JavaScriptによる動的生成システムを実装した。

課題：

各サイトで手動でナビゲーションリンクを管理していたため、リンク追加や変更のたびに、すべてのHTMLファイルを編集する必要があった。これは非効率で、エラーも発生しやすい。

解決策：

anagura-nav.jsに、すべてのナビゲーションデータを一元管理する配列を作成：

const NAVIGATION_DATA = [
  {
    id: 'hub',
    title: { ja: 'ハブ', mn: 'Төв', en: 'Hub' },
    url: '/anagura/',
    description: { ja: 'プロジェクトのハブ', mn: '...', en: '...' }
  },
  {
    id: 'blog',
    title: { ja: 'ブログ', mn: 'Блог', en: 'Blog' },
    url: '/blog/',
    description: { ... }
  },
  // ... 他のサイト
];

このデータから、各ページのナビゲーションバーとフッターのリンクを動的に生成する。言語も自動検出される（<html lang="ja">属性から）。

関連サイトリストの自動生成：

サイドバーの「関連サイト」リストも、同じデータから生成される。現在のページを除外し、残りのサイトをリスト表示：

function generateRelatedSites(currentSiteId) {
  const lang = document.documentElement.lang || 'ja';
  const sites = NAVIGATION_DATA.filter(site => site.id !== currentSiteId);

  const html = sites.map(site => `
    <li><a href="${site.url}">${site.title[lang]}</a></li>
  `).join('');

  return `<ul>${html}</ul>`;
}

フッターの著作権表示の統一：

すべてのサイトで、同じフッターテキストをJavaScriptで生成：

function generateFooterCopyright() {
  const year = new Date().getFullYear();
  return `© ${year} Itako999. All rights reserved.`;
}

これにより、年号が自動的に更新され、機械可読性も向上する。

Sticky/Scrolling Footer問題の解決：

フッターが短いページでは画面下部に固定され、長いページではコンテンツの最後に表示されるようにする必要があった。Flexboxで解決：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

.site-footer {
  flex-shrink: 0;
}

FOUT（Flash of Unstyled Content）の解決：

Webフォントの読み込み中、システムフォントが表示されてしまう問題を、フォントプリロードで解決：

<link rel="preload" href="/fonts/NotoSans.woff2" as="font" type="font/woff2" crossorigin>

現在、すべてのAnaguraサイトは統一されたナビゲーションシステムを使用している。新しいサイトを追加する際は、NAVIGATION_DATA配列に1つのエントリを追加するだけで、すべてのサイトに自動的に反映される。