Header 与 Footer 定制

Header 结构

顶部导航栏由 TopHeader 组件实现，位于 src/app/_components/TopHeader.tsx。它包含以下部分：

站点 Logo 和名称（左侧）
导航菜单项（中间）
语言切换、主题切换等功能按钮（右侧）

修改站点名称和 Logo

站点名称

站点名称按语言定义在 src/config/navigation.ts 的 SITE_NAME_REGISTRY 中：

export const SITE_NAME_REGISTRY: Record<string, string> = {
  en: "My Site",
  "zh-hans": "我的站点",
};

修改对应语言的值即可更新站点名称。

Logo

Logo 配置在 src/config/branding.ts 的 BRANDING 对象中：

export const BRANDING = {
  logoWebp: "/logo/site-logo.webp",
  // ...
};

替换步骤：

将新 Logo 文件放入 public/logo/ 目录
修改 BRANDING.logoWebp 为新文件路径
建议使用 WebP 格式，尺寸约 128x128px

修改导航项

固定导航项

固定导航项定义在 src/config/navigation.ts 中，通过 NAV_ITEM_REGISTRY 和 NAV_ITEM_ORDER 控制：

// 导航项注册表 - 定义每个导航项的属性
export const NAV_ITEM_REGISTRY = {
  blog: {
    labelKey: "nav.blog",
    href: "/blog",
  },
  docs: {
    labelKey: "nav.docs",
    href: "/docs",
  },
  twitter: {
    labelKey: "nav.twitter",
    href: "/twitter",
  },
  // ...
};

// 导航项顺序 - 控制显示顺序
export const NAV_ITEM_ORDER = ["blog", "docs", "twitter", "youtube"];

添加新导航项

// 1. 在 NAV_ITEM_REGISTRY 中注册
export const NAV_ITEM_REGISTRY = {
  // ...已有项
  tools: {
    labelKey: "nav.tools",
    href: "/tools",
  },
};

// 2. 在 NAV_ITEM_ORDER 中添加（控制显示位置）
export const NAV_ITEM_ORDER = ["blog", "docs", "tools", "twitter", "youtube"];

删除导航项

从 NAV_ITEM_ORDER 数组中移除对应的 key 即可隐藏该导航项，无需删除注册表中的定义。

首页导航

首页特定的导航配置在根目录 config.json 的 nav 数组中：

{
  "nav": [
    { "label": "Blog", "href": "/blog" },
    { "label": "Docs", "href": "/docs" }
  ]
}

导航支持 Mega Menu 下拉菜单，由 NavGroup 数据驱动。当某个导航项关联了 NavGroup 数据时，悬停会展开一个多列的下拉面板，展示分组内的子项目和描述信息。

NavGroup 数据来源于 content/nav/ 目录下的配置文件。

Footer 结构

页脚由 GlobalFooter 组件实现，位于 src/app/_components/GlobalFooter.tsx。它包含：

站点简介
链接分组（多列布局）
社交媒体链接
版权信息

修改 Footer

链接分组

Footer 的链接分组定义在 src/config/footer.ts 的 FOOTER_SECTIONS 中：

export const FOOTER_SECTIONS = [
  {
    titleKey: "footer.product",
    links: [
      { labelKey: "footer.blog", href: "/blog" },
      { labelKey: "footer.docs", href: "/docs" },
    ],
  },
  {
    titleKey: "footer.community",
    links: [
      { labelKey: "footer.twitter", href: "/twitter" },
      { labelKey: "footer.youtube", href: "/youtube" },
    ],
  },
];

社交链接

社交媒体链接定义在 FOOTER_SOCIAL_LINKS 中：

export const FOOTER_SOCIAL_LINKS = [
  {
    label: "Twitter",
    href: "https://twitter.com/yourhandle",
    icon: "twitter",
  },
  // ...
];

添加 GitHub 链接示例

export const FOOTER_SOCIAL_LINKS = [
  // ...已有链接
  {
    label: "GitHub",
    href: "https://github.com/your-org/your-repo",
    icon: "github",
  },
];

修改版权信息

版权文字通常在 GlobalFooter.tsx 组件底部，或通过翻译文件 src/locales/ 中的 footer.copyright key 控制。修改对应的翻译值即可。