MkSaaS 页面模块功能详解
深入了解 MkSaaS 模板的页面模块，包括落地页、定价页、关于页、联系页、法律页面等丰富的内置页面，帮助您快速构建完整的 SaaS 网站
做 SaaS 离不开那几个页面：一个能转化的落地页、一个说清楚价格的定价页、合规必备的法律页面、还有一个真正能用的联系表单。每个项目都从头写一遍，既费时间又容易风格不统一。MkSaaS 把这些页面全部做好了，设计统一、开箱即用，改起来也方便。
本文介绍页面模块都包含什么、页面怎么组织的、以及如何按你的需求定制。
MkSaaS 的页面模块
这些不是占位用的线框图——每个页面都是生产级别的成品，有真正的设计、响应式布局，国际化也做好了：
- 🎨 设计精美 - 所有页面都经过精心设计，提供一致且现代的用户体验
- 🚀 开箱即用 - 无需从零开始开发，直接使用即可快速上线
- 📄 功能完整 - 涵盖营销、法律、用户交互等各类页面需求
- 🔧 易于定制 - 基于 MDX 和 React 组件，可以轻松定制内容和样式
- 🌍 多语言支持 - 内置国际化支持，轻松创建多语言页面
- 🔍 SEO 优化 - 内置 SEO 优化功能，提升搜索引擎排名
核心功能详解
1. 落地页（Landing Page）
落地页决定第一印象。加载慢或者看不懂的落地页，用户还没看到产品就走了。MkSaaS 的落地页有清晰的视觉层次、醒目的 CTA 和快速的加载速度。
主要特性：
- 精美的设计 - 经过精心设计的视觉层次，吸引用户注意力
- 高转化率 - 优化的布局和 CTA 按钮，提升用户转化率
- 品牌定制 - 可以轻松定制颜色、字体、内容等，适配您的品牌风格
- 响应式设计 - 完美适配各种设备，提供优秀的浏览体验
- 性能优化 - 优化的加载速度，确保快速呈现内容
您可以在 演示站点 体验完整的落地页效果，查看如何通过精美的设计吸引用户并引导转化。
2. 定价页（Pricing Page）
定价页是用户做购买决策的地方。如果用户不能快速看懂每个方案包含什么，他们会直接离开。MkSaaS 的定价页有对比表格、FAQ 部分和清晰的 CTA，全部通过一个配置文件驱动。
主要特性：
- 定价表格 - 清晰的定价表格，展示不同套餐的功能和价格
- FAQ 部分 - 内置常见问题部分，解答用户关于定价的疑问
- 配置化定制 - 可以通过配置文件轻松定制定价方案和功能列表
- 视觉对比 - 清晰的视觉对比，帮助用户选择最适合的套餐
- CTA 优化 - 优化的行动号召按钮，引导用户完成购买
您可以在 演示站点 体验完整的定价页功能，查看如何通过清晰的定价展示促进用户转化。
3. 关于页（About Page）
用户更愿意为「人」买单，而不是一个没有温度的公司。关于页讲清楚你为什么做这个产品、你相信什么——这种信任是功能列表建立不起来的。MkSaaS 提供了一个简洁的关于页模板，填入你自己的故事就好。
主要特性：
- 公司介绍 - 展示公司背景、使命和愿景
- 产品故事 - 讲述产品的发展历程和核心理念
- 品牌定制 - 可以轻松定制内容，适配您的品牌故事
- 视觉设计 - 精美的视觉设计，提升品牌形象
您可以在 演示站点 体验完整的关于页效果，查看如何通过故事化的内容建立用户信任。
4. 联系页（Contact Page）
用户想联系你的时候，任何阻碍都是在赶客。一个能用的联系表单配合邮件通知，确保你不会漏掉任何一个潜在客户或支持请求。MkSaaS 把整个链路都串好了：表单、校验、通过 Resend 发送邮件。
主要特性：
- 联系表单 - 完整的联系表单，收集用户信息和消息
- 邮件通知 - 用户提交消息后，您会收到邮件通知
- 表单验证 - 内置表单验证，确保数据准确性
- 用户体验 - 友好的用户界面，降低用户操作难度
您可以在 演示站点 体验完整的联系页功能，查看如何通过便捷的联系方式提升用户满意度。
5. 法律页面（Legal Pages）
上线之前你得有隐私政策、服务条款和 Cookie 政策。因为缺了这些被罚款或吃官司可不值得。MkSaaS 三个都有，MDX 格式，改成你自己的条款就行。
主要特性：
- 隐私政策 - 详细的隐私政策页面，说明如何处理用户数据
- 服务条款 - 完整的服务条款页面，明确使用规则和条款
- Cookie 政策 - Cookie 使用政策页面，符合 GDPR 等法规要求
- MDX 格式 - 基于 MDX 格式，可以轻松编辑和更新内容
- 多语言支持 - 支持为不同语言创建不同的法律页面版本
包含的页面：
您可以在演示站点查看这些法律页面的实际效果，它们为您的 SaaS 应用提供了必要的法律保护。
6. 更新日志（Changelog）
用户希望看到产品在持续迭代。一个定期更新的 changelog——新功能、Bug 修复、改进——传递的是产品还活着的信号。MkSaaS 从独立的 MDX 文件自动生成更新日志列表，按日期排序。
主要特性：
- 版本管理 - 每个发布版本都有独立的 MDX 文件
- 版本详情 - 详细的版本信息，包括新功能、改进和修复
- 自动排序 - 按日期自动排序，最新版本显示在最前面
- 美观展示 - 精美的版本卡片设计，提升阅读体验
- SEO 优化 - 优化的 SEO 设置，提升搜索引擎可见性
您可以在 演示站点 体验完整的更新日志功能，查看版本发布信息的展示方式。
页面系统架构
页面组织方式
MkSaaS 的页面系统采用清晰的目录结构组织：
- 法律页面 - 存储在
content/pages目录，通过(legal)路由渲染 - 营销页面 - 通过
(pages)路由渲染，包括关于、联系等页面 - 更新日志 - 存储在
content/changelog目录，自动生成列表页面
路由系统
MkSaaS 提供了灵活的路由系统，支持：
- 受保护路由 - 需要用户登录才能访问的页面
- 公开路由 - 所有用户都可以访问的页面
- 重定向规则 - 智能的重定向规则，提升用户体验
- 多语言路由 - 支持多语言路由，为不同地区用户提供本地化体验
页面定制方式
MkSaaS 支持两种页面定制方式：
- 基于 MDX 的页面 - 对于内容丰富但交互简单的页面，使用 MDX 格式编写
- 基于组件的页面 - 对于需要复杂交互的页面，使用 React 组件构建
高级功能
SEO 优化
MkSaaS 中的每个页面都自动获得 SEO 处理。你在 frontmatter 或页面配置里设好标题、描述和 OG 图片，框架会搞定剩下的事：
- 元数据管理 - 每个页面支持自定义标题、描述和图片
- 结构化数据 - 自动生成 JSON-LD 结构化数据，帮助 Google 理解页面内容
- URL 优化 - 干净、可读的 URL，没有多余的尾斜杠和无用参数
- 规范链接 - 同一页面可通过多个 URL 访问时，避免重复内容惩罚
- Open Graph - 链接分享到 Twitter、LinkedIn 或微信时会显示正确的预览卡片
多语言支持
给任何页面添加新语言都遵循同一个模式——在原始文件旁边创建一个 .zh.mdx（或其他语言）文件，路由会自动处理：
- 文件命名约定 - 使用
.zh.mdx后缀创建中文版本 - 自动路由 - 根据用户语言偏好自动显示对应语言版本
- 内容同步 - 不同语言版本可以共享相同的元数据
- 翻译管理 - 使用翻译文件管理页面文本内容
性能优化
页面默认在构建时静态生成，意味着每次请求不需要服务端计算，加载速度很快：
- 静态生成 - 基于 Next.js 的静态生成，提供极快的加载速度
- 代码分割 - 每个页面只加载它实际需要的 JavaScript，包体积小
- 图片优化 - Next.js 的
Image组件自动处理响应式尺寸、格式转换和懒加载 - 缓存策略 - 静态资源配合合理的缓存头做激进缓存
实际应用场景
MkSaaS 的页面模块适用于各种 SaaS 应用场景：
- 产品展示 - 使用落地页展示产品功能和价值主张
- 用户转化 - 使用定价页引导用户选择合适套餐并完成购买
- 品牌建设 - 使用关于页讲述品牌故事，建立用户信任
- 用户支持 - 使用联系页收集用户反馈和问题
- 合规运营 - 使用法律页面满足法规要求，保护用户权益
- 产品更新 - 使用更新日志向用户展示产品进展
与其他模块的集成
页面不是孤立存在的——它们和 MkSaaS 的其他模块紧密协作：
- 身份验证 - 受保护页面在服务端检查 Better Auth 会话，未登录用户直接跳转到登录页，不会闪现私有内容
- 支付系统 - 定价页的「订阅」按钮通过 Server Action 直接创建 Stripe Checkout 会话，不需要额外的 API 胶水代码
- 邮件系统 - 联系表单提交走 Resend 发送，用的是和应用其他部分一样的本地化 React Email 模板
- 分析系统 - 每个页面在生产环境自动加载你配置的分析工具（Google Analytics、Plausible 等）
- 组件系统 - 所有页面共用同一套 Radix UI + Tailwind 组件库，按钮、卡片、排版风格保持一致
总结
页面模块帮你省掉了 SaaS 上线前最无聊的那部分工作：又一次从头搭落地页、定价页、法律页面和联系表单。这些页面已经做好了样式、响应式、翻译和 SEO。
具体来说：
- 快速上线 - 无需从零开始，直接使用即可快速上线
- 保持一致 - 统一的设计语言，确保页面风格一致
- 提升转化 - 优化的页面设计，提升用户转化率
- 合规运营 - 完整的法律页面，满足法规要求
立即体验：
更多文章
邮件列表
加入我们的社区
订阅邮件列表，及时获取最新消息和更新