页面
学习如何在 ShipSaaS 模板中自定义和创建新页面
本文档涵盖了 ShipSaaS 模板中的页面系统，如何自定义现有页面，以及如何为您的特定需求创建新页面。
核心功能
ShipSaaS 模板包含多种页面类型，您可以根据需要自定义：
- 自定义法律页面（Cookie 政策、隐私政策、服务条款）
- 维护版本发布的更新日志
- 创建营销和信息页面（关于、联系、等待列表、路线图）
- 为您的特定需求添加完全自定义的页面
页面结构
ShipSaaS 中的页面使用 TanStack Router 基于文件的路由进行组织：
法律页面
法律页面内容存储在 content/pages 目录中，通过 src/routes/(legals)/ 中的路由渲染：
- Cookie 政策：
src/routes/(legals)/cookie.tsx - 隐私政策：
src/routes/(legals)/privacy.tsx - 服务条款：
src/routes/(legals)/terms.tsx
更新日志
发布说明存储在 content/changelog 目录中，并显示在更新日志页面上：
- 更新日志：
src/routes/(pages)/changelog.tsx— 每个发布都有自己的 Markdown 文件
营销页面
营销页面通过 src/routes/(pages)/ 中的路由渲染：
- 关于：
src/routes/(pages)/about.tsx - 联系：
src/routes/(pages)/contact.tsx - 价格：
src/routes/(pages)/pricing.tsx - 等待列表：
src/routes/(pages)/waitlist.tsx - 路线图：
src/routes/(pages)/roadmap.tsx
自定义现有页面
法律页面
法律页面以 Markdown 格式编写，位于 content/pages 目录中：
content/pages/privacy.md
---
title: Privacy Policy
description: Our commitment to protecting your privacy and personal data
date: "2025-03-10"
---
## Introduction
Welcome to our Privacy Policy...要自定义法律页面：
- 打开
content/pages中相应的 Markdown 文件 - 更新元数据（标题、描述、日期）
- 以 Markdown 格式修改内容
- 保存文件 — 页面将自动更新
更新日志
更新日志作为 Markdown 文件存储在 content/changelog 中：
content/changelog/v1.0.0.md
---
title: "Initial Release"
description: "Our first official release with core features"
date: "2024-03-01"
version: "v1.0.0"
published: true
---
### Core Features
- **User Authentication**: Secure login and registration
- **Dashboard**: Intuitive dashboard for managing your projects要添加新发布，在 content/changelog 中创建新的 Markdown 文件（例如 v1.1.0.md）。
创建新页面
1. 基于内容的页面
对于内容丰富的页面，在 content/pages 中添加新的 Markdown 文件并创建对应的路由：
src/routes/(pages)/faq.tsx
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/(pages)/faq')({
component: FAQPage,
});
function FAQPage() {
return (
<div className="max-w-4xl mx-auto space-y-8 py-12">
<h1 className="text-3xl font-bold">FAQ</h1>
{/* Your content here */}
</div>
);
}2. 基于组件的页面
对于需要复杂交互的页面，创建新的路由文件：
src/routes/(pages)/pricing.tsx
import { createFileRoute } from '@tanstack/react-router';
import { messages } from '@/messages';
import { seo } from '@/lib/seo';
export const Route = createFileRoute('/(pages)/pricing')({
head: () => ({
...seo('pricing', {
title: messages.pricing.title,
description: messages.pricing.description,
}),
}),
component: PricingPage,
});
function PricingPage() {
return (
<div className="max-w-4xl mx-auto space-y-8">
<h1 className="text-center text-3xl font-bold">
{messages.pricing.title}
</h1>
{/* Pricing components */}
</div>
);
}页面路由
路由常量在 src/lib/routes.ts 中定义：
src/lib/routes.ts
export const Routes = {
Root: '/',
Login: '/auth/login',
Register: '/auth/register',
Dashboard: '/dashboard',
Settings: '/settings',
// ...
};受保护的路由
ShipSaaS 使用中间件进行路由保护。用户仪表盘和用户设置等界面通过 src/middlewares/ 中定义的 authRouteMiddleware 进行保护，管理员的用户管理界面通过 adminRouteMiddleware 进行保护：
src/routes/dashboard.tsx
import { createFileRoute } from '@tanstack/react-router';
import { authRouteMiddleware } from '@/middlewares/auth-middleware';
export const Route = createFileRoute('/dashboard')({
beforeLoad: ({ context }) => authRouteMiddleware(context),
component: DashboardLayout,
});