Skip to main content
Version: Current

新增页面

以「在 locale 路由下增加一个普通内容页」为例。做完后对照 Route Map 补一行。

1. 创建页面组件​

在 src/components/Pages/ 下按模块建文件，例如 src/components/Pages/About/About_Example.jsx。

列表页可使用 CompactPageHeader；部门页优先复用 DivisionPageLayout，活动详情优先复用 ActivityDetailLayout。

import CompactPageHeader from '../../layout/CompactPageHeader';

export default function About_Example() {
  return (
    <>
      <CompactPageHeader title="示例页" subtitle="副标题" />
      <section className="mx-auto max-w-content px-4 py-8">...</section>
    </>
  );
}

不要在页面里再包一层 Navbar / Footer，MainLayout 已经提供。

2. 注册路由​

在 src/App.jsx 中 import 组件，并加到 /:locale 内部（不要带 /zh）：

<Route path="About/About_Example" element={<About_Example />} />

本地打开 http://localhost:5173/zh/About/About_Example 应能进入页面；/en/About/About_Example 也应可访问。

3. 补翻译（如需要）​

  1. 在合适的 src/locales/zh/*.json / en/*.json 增加 key。
  2. 组件内 useTranslation('about')。
  3. 若这是全新模块，新建命名空间并在 src/i18n/index.js 注册。见 国际化。

活动详情、部门正文可以保持中文，但 /en/ 路由必须存在。

4. 加入导航​

编辑 src/components/Navbar/Navbar.jsx：

  • 在对应 *Items 数组增加 { titleKey: '...', href: 'About/About_Example' }
  • titleKey 指向 nav.json
  • 使用已有的 LocalizedLink 渲染逻辑，不要手写 <a href="/zh/...">

外链则设 external: true 且 href 为完整 https://...。

5. 静态资源​

图片放到 public/images/<模块>/，组件中用 /images/...。见 管理图片。

6. 旧路径（可选）​

如果旧书签没有 locale 前缀，在 App.jsx 为该前缀增加 LegacyRedirect（已有 Activity / Resources / About / Honor_Wall / Partnership）。新顶级模块若需要兼容旧 URL，按同样方式加一条。

检查清单​

  • /:locale 下可打开中英路径
  • 内部链使用 LocalizedLink
  • 中英 JSON key 齐全（或明确不翻译）
  • Navbar / 页内入口符合产品预期
  • npm run build 通过