开箱即用的中英双语 SaaS 营销网站模板,基于 Next.js 16 + React 19 + Tailwind v4,内置从品牌介绍到线索转化的完整营销漏斗与内容中心,静态导出一键部署,买断可商用、可改、可去署名。

⚠️ 本商品是营销网站模板,不包含用户登录、数据库或后台业务系统;演示图片仅供预览需自行替换;环境要求 Node.js 20+ 与 pnpm 11。

它是什么 · 适合谁

知序 Zhixu 是面向 B2B / SaaS 团队的营销网站模板,覆盖从品牌介绍、产品教育到线索转化的完整链路。

适合:企业官网、产品发布站、营销落地页、演示 Demo 站。

内置以人力资源 / 企业协作为背景的原创 SaaS 叙事,可直接改成你自己的产品文案。

它不是含登录、数据库、后台业务的完整 HR SaaS——而是一套可自由改造的营销前端。

页面与信息架构

• / 语言选择页
• /[locale]/ 本地化首页与完整营销漏斗(Hero / 产品界面示意 / 客户背书 / 功能区块 / 价格 / 评价 / 转化 CTA)
• /features 产品功能详情
• /integrations 应用集成目录
• /pricing 价格方案 + 常见问题(月付 / 年付切换)
• /book-a-demo 预约产品演示
• /contact 联系销售与支持
• /about 公司故事、使命与数据
• /changelog 产品更新日志
• /articles 团队洞察文章列表与详情(MDX)

技术栈与特性

技术栈:Next.js 16 App Router · React 19 · TypeScript · Tailwind CSS v4 + 全局设计令牌。

内容:本地 MDX + YAML front matter,自动中文阅读时间,静态路由生成,GFM 表格 / 列表与自定义 MDX 组件。

体验:中文字体栈与阅读节奏优化;桌面 / 平板 / 移动端响应式;移动端折叠菜单;FAQ 手风琴;遵循 prefers-reduced-motion。

构建:output: export 纯静态导出,产物可放任意 CDN / 静态托管。

内容系统:MDX 文章 + 配置化营销数据

模板分两层内容,各司其职:

1. 营销数据(功能 / 价格 / 集成 / FAQ / 更新日志)集中在 src/config/product.ts——改数组即生效,不碰组件。
2. 文章 / 博客用本地 MDX 撰写(content/articles/zh-CN、/en),YAML front matter 管理标题 / 摘要 / 日期 / 分类 / 作者 / 封面。

文章内置 9 个开箱组件、无需 import:

• Callout 提示框 · PullQuote 重点引语 · Figure 带图注配图
• Steps/Step 操作步骤 · Checklist 检查清单 · MetricGrid/Metric 数据组
• LinkCard 延伸阅读 · Badge 状态标记 · Details 折叠详情

支持 GFM 表格 / 列表,自动计算中文阅读时间,generateStaticParams 生成静态文章路由。写 Markdown 就能排出专业文章,不必碰前端代码。

目录结构及说明

zhixu-saas-template/
├─ src/
│  ├─ app/                Next.js App Router 页面
│  │  ├─ [locale]/        本地化页面(首页/功能/集成/价格/预约演示/联系/关于/更新日志/文章)
│  │  ├─ (landing)/       语言选择落地
│  │  ├─ globals.css      设计令牌(颜色/字体)
│  │  └─ icon.svg         站点图标
│  ├─ config/             站点配置(改文案主要在这里)
│  │  ├─ brand.ts         品牌名/站点描述/页脚
│  │  ├─ contact.ts       通用/销售/支持/隐私邮箱与办公地址
│  │  ├─ product.ts       功能/价格/集成/FAQ/更新日志(双语数据)
│  │  ├─ seo.ts           SEO / Open Graph / Twitter
│  │  ├─ forms.ts · preset.ts · site.ts   表单模式/预设/站点
│  │  └─ content/home.ts  首页各区块内容
│  ├─ components/         UI 组件(含 mdx-components.tsx —— 9 个文章组件)
│  ├─ i18n/               config.ts(locale 列表)· dictionary.ts(公共文案)
│  └─ lib/                文章读取与工具
├─ content/articles/      文章 MDX 源(zh-CN / en)
├─ public/                静态资源(含仅预览的演示图片,上线前替换)
├─ docs/                  买家文档(zh-CN / en:产品/快速开始/部署/授权/退款…)
├─ scripts/               内容校验 / 发布打包脚本
├─ .env.example           环境变量样例
└─ next.config.ts · tsconfig.json · package.json · pnpm-workspace.yaml

改动指引:文案与营销数据集中在 src/config/(尤其 product.ts、content/home.ts);文章写在 content/articles/{zh-CN,en}/.mdx;设计令牌在 src/app/globals.css 顶部;品牌图标 src/app/icon.svg;演示图片在 public/ 下,上线前务必替换。

授权说明

本商品为买断商业授权:一次购买,可用于你自己或客户的商业项目,可按需修改、可去页脚署名,并向获许可客户交付成品站。含 12 个月产品更新与邮件支持;完整条款见包内 docs/zh-CN/LICENSE.md。

禁止:作为独立模板 / 源码包转售、再分发、再许可、共享、出租;发布到公共代码仓库;加入主题市场 / 无代码平台等允许第三方下载导出源码的服务。

交付与部署

付款后在订单详情页获取:加密源码包下载链接 + 解压密码 + 授权证书。

环境:Node 20+ / pnpm 11。

快速开始:

cp .env.example .env.local
pnpm install --frozen-lockfile
pnpm dev

访问 /zh-CN/ 或 /en/。

主要改动入口:

• 品牌 src/config/brand.ts
• 联系 src/config/contact.ts
• 功能 / 价格 / 集成 / FAQ src/config/product.ts
• 首页 src/config/content/home.ts
• SEO src/config/seo.ts

上线前把示例域名换成你的 NEXT_PUBLIC_SITE_URL,替换 OG 图与演示图片。一键部署 Vercel / Netlify / Cloudflare Pages。

支持与退款

支持:含 12 个月产品更新与邮件支持,范围含安装、文档内配置、可复现构建失败、未修改模板中的确认缺陷,目标 3 个工作日内首次响应。

不含:定制设计、内容撰写、第三方账号配置、代部署、后端开发、法律合规审查。

退款:源码类下载后原则不退(法律强制除外)。购买 14 天内,若压缩包损坏且无替代、未修改模板无法按文档在受支持环境构建、或同一订单重复扣款,可申请退款。

更新日志 1.0.0(2026-09-09)

• 完成商业化产品整理
• 新增买断商业许可
• 新增第三方与演示素材声明
• 集中品牌 / 联系 / SEO / 预设 / 表单配置
• 新增安全的 Demo 与 Endpoint 表单模式
• 新增内容校验、静态链接检查、发布打包与干净安装验证
• 补齐中英文买家文档

购买前须知

• 本商品是营销网站模板,不包含用户登录、数据库或后台业务系统
• 演示图片(public/images/)仅供预览、不含生产使用授权,买家须自行替换
• 环境要求 Node.js 20+ 与 pnpm 11
• 第三方依赖各自适用其开源许可:Next.js / React / gray-matter / rehype-slug / remark-gfm 为 MIT,Lucide 为 ISC,next-mdx-remote 为 MPL-2.0