abearxiong
7a99b69887
- Created pnpm workspace configuration in `pnpm-workspace.yaml`. - Implemented basic app setup in `src/app.ts` using `@kevisual/router`. - Generated documentation files in `src/generated/docs.ts` for showcase CMS templates. - Added inline script to read and compile markdown files into TypeScript constants in `src/inline.ts`. - Set up main application entry point in `src/main.ts` to integrate routing and plugins. - Established routing structure in `src/routes/index.ts` and `src/routes/md.ts` for handling markdown-related tasks. - Implemented a route for initializing web todo tasks with dynamic content generation based on selected template type.
281 lines
7.6 KiB
Markdown
281 lines
7.6 KiB
Markdown
# Showcase CMS
|
||
|
||
展示网站模板集合 - 快速构建专业的静态展示网站或高交互动态网站。
|
||
|
||
---
|
||
|
||
## 模板类型对比
|
||
|
||
| 特性 | 展示型模板(astro) | 互动型模板(next.js) |
|
||
|------|-----------|-----------|
|
||
| **核心定位** | 信息展示为主 | 用户交互为主 |
|
||
| **渲染模式** | 静态生成 (SSG) | 混合渲染 (SSR/SSG/ISR) |
|
||
| **内容管理** | Markdown/MDX 文件 | Headless CMS + API |
|
||
| **用户系统** | 无 | 多用户 + 权限管理 |
|
||
| **交互程度** | 低（浏览为主） | 高（登录、评论、购买） |
|
||
| **性能表现** | 极致轻量、快速加载 | 高并发、动态内容 |
|
||
| **适用场景** | 企业官网、作品集、博客、文档 | 电商、门户、社区、后台系统 |
|
||
| **学习曲线** | 简单 | 中等 |
|
||
| **部署难度** | 简单 | 中等 |
|
||
| **SEO** | 优秀 | 优秀 |
|
||
|
||
---
|
||
|
||
## 展示型模板 (Astro)
|
||
|
||
适用于：以信息展示为主的网站，强调性能、SEO和内容管理便捷性。
|
||
|
||
### 适用场景
|
||
|
||
- 企业官网（纯信息展示）
|
||
- 个人作品集、摄影集、设计展示
|
||
- 技术博客、文档站点、知识库
|
||
- 活动页面、 Landing Page
|
||
- 新闻资讯、媒体发布
|
||
|
||
### 核心特点
|
||
|
||
1. **极简架构**
|
||
- 纯静态生成，零运行时依赖
|
||
- 支持 Markdown/MDX 内容创作
|
||
- 文件即路由，目录结构清晰
|
||
|
||
2. **高性能**
|
||
- 首屏加载 < 100ms
|
||
- 自动图片优化
|
||
- 按需加载 JavaScript
|
||
- 支持边缘部署 (Vercel Edge, Cloudflare Pages)
|
||
|
||
3. **开箱即用**
|
||
- 内置语法高亮
|
||
- 主题切换 (亮色/暗色)
|
||
- 响应式图片
|
||
- SEO 元标签自动生成
|
||
|
||
### 功能模块
|
||
|
||
| 模块 | 功能点 |
|
||
|------|--------|
|
||
| 首页 | Hero区域、核心数据、客户Logo、订阅 |
|
||
| 关于我们 | 公司简介、发展历程、团队介绍、资质认证 |
|
||
| 产品/服务 | 产品分类、详情介绍、规格参数 |
|
||
| 成功案例 | 案例展示、客户评价、Logo墙 |
|
||
| 新闻动态 | 新闻列表、分类、RSS订阅 |
|
||
| 人才招聘 | 职位列表、福利介绍、简历投递 |
|
||
| 联系我们 | 联系信息、表单、地图 |
|
||
| 博客/文章 | 文章列表、标签分类、阅读时间 |
|
||
| 双语支持 | i18n路由、翻译文件管理 |
|
||
|
||
### 技术栈
|
||
|
||
```yaml
|
||
框架: Astro 4.x
|
||
UI 库: 原生 CSS / TailwindCSS (可选)
|
||
内容: Markdown / MDX
|
||
搜索: Pagefind (本地搜索)
|
||
部署: Vercel / Netlify / Cloudflare Pages
|
||
```
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
astro-website/
|
||
├── src/
|
||
│ ├── components/ # 可复用组件
|
||
│ ├── layouts/ # 页面布局
|
||
│ ├── pages/ # 页面路由
|
||
│ ├── content/ # Markdown/MDX 内容
|
||
│ ├── styles/ # 全局样式
|
||
│ └── utils/ # 工具函数
|
||
├── public/ # 静态资源
|
||
├── astro.config.mjs # 配置文件
|
||
└── package.json
|
||
```
|
||
|
||
---
|
||
|
||
## 互动型模板 (Next.js)
|
||
|
||
适用于：以用户交互为主的网站，需要登录、动态内容、在线交易等功能。
|
||
|
||
### 适用场景
|
||
|
||
- 电商平台、B2B商城
|
||
- 门户网站、内容社区
|
||
- 会员制网站、SaaS产品
|
||
- 在线教育、培训平台
|
||
- 需要后台管理的各类网站
|
||
|
||
### 核心特点
|
||
|
||
1. **企业级架构**
|
||
- App Router 路由系统
|
||
- Server Components
|
||
- 完整的后台管理系统集成
|
||
- 多语言 i18n 支持
|
||
|
||
2. **完整业务支持**
|
||
- 用户注册/登录
|
||
- 产品目录管理
|
||
- 新闻发布系统
|
||
- 在线询盘/表单
|
||
- 会员中心
|
||
|
||
3. **灵活扩展**
|
||
- 支持多种 CMS (Strapi, Contentful, Sanity)
|
||
- API 路由自动生成
|
||
- 组件库按需引入
|
||
- 微前端集成能力
|
||
|
||
### 功能模块
|
||
|
||
| 模块 | 功能点 |
|
||
|------|--------|
|
||
| 首页 | Hero、核心数据、客户Logo、订阅 |
|
||
| 关于我们 | 公司历程、团队介绍、资质认证、办公环境 |
|
||
| 产品中心 | 产品分类、详情、对比、规格参数、购物车 |
|
||
| 解决方案 | 行业方案、定制服务、成功案例 |
|
||
| 新闻动态 | 新闻列表、分类、RSS订阅、媒体资源 |
|
||
| 成功案例 | 案例详情、客户评价、Logo墙 |
|
||
| 服务支持 | 知识库、FAQ、下载中心、在线客服 |
|
||
| 人才招聘 | 职位列表、简历投递、校园招聘 |
|
||
| 联系我们 | 表单、地图、客服系统、多分支机构 |
|
||
| 合作伙伴 | 合作伙伴门户、渠道政策、专属登录 |
|
||
| 会员中心 | 账户管理、订单历史、收藏、消息通知 |
|
||
| 在线商城 | 商品管理、支付集成、物流查询、退换货 |
|
||
| 投资者关系 | 公告、财报、治理结构（上市公司） |
|
||
| 用户系统 | 注册登录、权限管理、OAuth认证 |
|
||
| CMS后台 | 内容管理、产品管理、媒体管理、统计分析 |
|
||
| 双语支持 | 语言切换、翻译管理、SEO本地化 |
|
||
|
||
### 技术栈
|
||
|
||
```yaml
|
||
框架: Next.js 14+ (App Router)
|
||
UI 库: React / TailwindCSS / Shadcn UI
|
||
状态管理: Zustand / React Query
|
||
表单: React Hook Form + Zod
|
||
认证: NextAuth.js / Clerk
|
||
CMS: Strapi / Contentful / Sanity (可选)
|
||
数据库: PostgreSQL / MySQL (可选)
|
||
部署: Vercel / AWS / Docker
|
||
```
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
nextjs-website/
|
||
├── src/
|
||
│ ├── app/ # App Router 页面
|
||
│ ├── components/ # 可复用组件
|
||
│ ├── lib/ # 工具函数和配置
|
||
│ ├── hooks/ # 自定义 Hooks
|
||
│ ├── types/ # TypeScript 类型
|
||
│ ├── services/ # API 服务层
|
||
│ └── store/ # 状态管理
|
||
├── public/ # 静态资源
|
||
├── next.config.js # 配置文件
|
||
└── package.json
|
||
```
|
||
|
||
---
|
||
|
||
## 共享组件库 (待开发)
|
||
|
||
两个模板共享同一套组件库，保证视觉一致性：
|
||
|
||
```
|
||
packages/ui/
|
||
├── Button/ # 按钮组件
|
||
├── Card/ # 卡片组件
|
||
├── Modal/ # 弹窗组件
|
||
├── Form/ # 表单组件
|
||
├── Navigation/ # 导航组件
|
||
├── Footer/ # 页脚组件
|
||
├── Input/ # 输入框组件
|
||
├── Select/ # 选择器组件
|
||
├── Table/ # 表格组件
|
||
├── Pagination/ # 分页组件
|
||
├── Carousel/ # 轮播组件
|
||
├── Dropdown/ # 下拉菜单
|
||
├── Toast/ # 提示组件
|
||
└── Skeleton/ # 骨架屏组件
|
||
```
|
||
|
||
---
|
||
|
||
## 如何选择
|
||
|
||
```
|
||
需要选择展示型还是互动型？
|
||
├── 内容是否主要是静态信息展示？
|
||
│ ├── 是 → 选择 Astro 展示型模板
|
||
│ └── 否 → 继续
|
||
├── 是否需要用户登录注册？
|
||
│ ├── 是 → 选择 Next.js 互动型模板
|
||
│ └── 否 → 继续
|
||
├── 是否需要在线交易/支付？
|
||
│ ├── 是 → 选择 Next.js 互动型模板
|
||
│ └── 否 → 可能只需要展示型
|
||
└── 是否需要复杂的动态交互功能？
|
||
├── 是 → 选择 Next.js 互动型模板
|
||
└── 否 → 选择 Astro 展示型模板
|
||
```
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
### 展示型模板 (Astro)
|
||
|
||
```bash
|
||
# 克隆模板
|
||
git clone https://github.com/your-org/showcase-cms
|
||
cd showcase-cms/templates/astro-website
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
```
|
||
|
||
### 互动型模板 (Next.js)
|
||
|
||
```bash
|
||
# 克隆模板
|
||
git clone https://github.com/your-org/showcase-cms
|
||
cd showcase-cms/templates/nextjs-website
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
```
|
||
|
||
---
|
||
|
||
## 文档链接
|
||
|
||
- [展示型模板功能拆分](docs/website-features-breakdown.md)
|
||
- [互动型模板功能拆分](docs/enterprise-website-features.md)
|
||
|
||
---
|
||
|
||
## 贡献指南
|
||
|
||
欢迎贡献代码或提出建议。请先阅读贡献指南。
|
||
|
||
---
|
||
|
||
## 许可证
|
||
|
||
MIT License
|