跳转到内容
ShipSaaSShipSaaS Docs

页面

本文档涵盖了 ShipSaaS 模板中的页面系统，如何自定义现有页面，以及如何为您的特定需求创建新页面。

核心功能

Section titled “核心功能”

ShipSaaS 模板包含多种页面类型，您可以根据需要自定义：

  • 自定义法律页面（Cookie 政策、隐私政策、服务条款）
  • 维护版本发布的更新日志
  • 创建营销和信息页面（关于、联系、等待列表、路线图）
  • 为您的特定需求添加完全自定义的页面

页面结构

Section titled “页面结构”

ShipSaaS 中的页面使用 TanStack Router 基于文件的路由进行组织：

法律页面

Section titled “法律页面”

法律页面内容存储在 content/pages 目录中，通过 src/routes/(legals)/ 中的路由渲染：

  • Cookie 政策：src/routes/(legals)/cookie.tsx
  • 隐私政策：src/routes/(legals)/privacy.tsx
  • 服务条款：src/routes/(legals)/terms.tsx

更新日志

Section titled “更新日志”

发布说明存储在 content/changelog 目录中，并显示在更新日志页面上：

  • 更新日志：src/routes/(pages)/changelog.tsx — 每个发布都有自己的 Markdown 文件

营销页面

Section titled “营销页面”

营销页面通过 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

自定义现有页面

Section titled “自定义现有页面”

法律页面

Section titled “法律页面”

法律页面以 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...

要自定义法律页面：

  1. 打开 content/pages 中相应的 Markdown 文件
  2. 更新元数据（标题、描述、日期）
  3. 以 Markdown 格式修改内容
  4. 保存文件 — 页面将自动更新

更新日志

Section titled “更新日志”

更新日志作为 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）。

创建新页面

Section titled “创建新页面”

1. 基于内容的页面

Section titled “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. 基于组件的页面

Section titled “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>
  );
}

页面路由

Section titled “页面路由”

路由常量在 src/lib/routes.ts 中定义：

src/lib/routes.ts

export const Routes = {
  Root: '/',
  Login: '/auth/login',
  Register: '/auth/register',
  Dashboard: '/dashboard',
  Settings: '/settings',
  // ...
};

受保护的路由

Section titled “受保护的路由”

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,
});

下一步

Section titled “下一步”