93 lines
3.5 KiB
Markdown
93 lines
3.5 KiB
Markdown
# Pinnovate Cloud
|
||
|
||
Pinnovate Cloud 是一个基于 Next.js + TypeScript + TailwindCSS 搭建的云加速/网络优化服务站点，涵盖产品能力展示、定价、案例、新闻资讯与在线联系等模块，可静态导出或按 SSR 部署。
|
||
|
||
## 功能概览
|
||
- 页面：首页（Hero、优势、流程、CTA、客户推荐）、产品与服务、定价、成功案例、新闻资讯、关于我们、联系我们、登录占位页。
|
||
- 内容：content/news/*.md 存放新闻 Markdown，通过 lib/content.ts + gray-matter 解析 frontmatter，marked 渲染详情，构建时静态生成。
|
||
- 表单：components/Contact.tsx 集成 Formspree（https://formspree.io/f/xkgvgzal）提交，带表单校验、提交状态与联系方式卡片。
|
||
- 组件：导航、页脚、CTA、案例列表、新闻列表、核心优势等复用组件，Tailwind 响应式布局。
|
||
- 部署：支持静态导出、SSR、Docker 镜像，内置 Vercel/Netlify 配置、Nginx 示例与 PowerShell 一键部署脚本。
|
||
|
||
## 技术栈
|
||
- Next.js 15 / React 19、TypeScript
|
||
- TailwindCSS、Lucide React 图标
|
||
- gray-matter + marked 解析 Markdown 内容
|
||
- 部署与运维：Dockerfile、docker-compose.yml、nginx.conf、vercel.json、netlify.toml、deploy.ps1
|
||
|
||
## 目录结构
|
||
`
|
||
.
|
||
├─pages/ # 路由页（首页、features、pricing、cases、news、about、contact、login 等）
|
||
│ └─news/[slug].tsx # 新闻详情的静态路由
|
||
├─components/ # UI 组件（Navbar、Hero、Features、CaseList、NewsList、Contact 等）
|
||
├─content/news/ # 新闻 Markdown 数据源
|
||
├─lib/content.ts # 内容读取与 frontmatter 解析
|
||
├─public/ # 图片与静态资源
|
||
├─styles/ # 全局样式
|
||
├─deploy.ps1 # 多平台一键部署脚本
|
||
├─Dockerfile / docker-compose.yml / nginx.conf
|
||
├─netlify.toml / vercel.json / DEPLOYMENT.md
|
||
└─package.json # 脚本与依赖
|
||
`
|
||
|
||
## 快速开始
|
||
- 环境：Node.js 18+，npm
|
||
- 安装依赖：
|
||
pm install
|
||
- 本地开发：
|
||
pm run dev，访问 http://localhost:3000
|
||
- 生产构建：
|
||
pm run build
|
||
- 生产启动：
|
||
pm run start
|
||
|
||
## 内容维护（新闻）
|
||
- 在 content/news/ 下新增 .md 文件即可被列表与详情读取，示例 frontmatter：
|
||
`md
|
||
---
|
||
title: 标题
|
||
date: 2025-09-15
|
||
summary: 一句话摘要
|
||
tags: [CDN, 性能, 安全]
|
||
---
|
||
|
||
正文内容，支持 Markdown 语法。
|
||
`
|
||
- 构建时会按照 date 降序生成新闻列表，[slug].tsx 用 marked 渲染正文。
|
||
|
||
## 常用脚本
|
||
-
|
||
pm run dev：本地开发
|
||
-
|
||
pm run build /
|
||
pm run start：SSR 构建与生产运行
|
||
-
|
||
pm run build:static /
|
||
pm run export：静态导出到 out/
|
||
-
|
||
pm run preview：构建后本地预览
|
||
-
|
||
pm run type-check、
|
||
pm run lint：类型与代码质量检查
|
||
-
|
||
pm run docker:build、
|
||
pm run docker:run：Docker 构建与运行
|
||
-
|
||
pm run deploy:vercel、
|
||
pm run deploy:netlify：云平台部署命令占位
|
||
|
||
## 部署指引
|
||
- 静态站点：运行
|
||
pm run build:static，将 out/ 部署到静态托管（Netlify、GitHub Pages 等）。
|
||
- SSR：
|
||
pm run build && npm run start，或使用 Dockerfile/docker-compose.yml 与
|
||
ginx.conf。
|
||
- 一键脚本：PowerShell 执行 ./deploy.ps1 -Platform static|vercel|netlify|github|docker。
|
||
- Vercel/Netlify：可直接使用仓库内 ercel.json、
|
||
etlify.toml，或通过脚本触发。
|
||
|
||
## 配置提示
|
||
- 联系表单收件端点在 components/Contact.tsx 中可替换。
|
||
- Tailwind 主题色在 ailwind.config.js 中调整，静态资源放置于 public/。
|