跳到主要内容
版本: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 通过