展示网站模板集合 - 快速构建专业的静态展示网站或高交互动态网站。

{
  "plugin"
}

---

特性	展示型模板(astro)	互动型模板(TanStack Router)
核心定位	信息展示为主	用户交互为主
渲染模式	静态生成 (SSG)	混合渲染 (SSR/SSG/ISR)
内容管理	Markdown/MDX 文件	Headless CMS + API
用户系统	无	多用户 + 权限管理
交互程度	低（浏览为主）	高（登录、评论、购买）
性能表现	极致轻量、快速加载	高并发、动态内容
适用场景	企业官网、作品集、博客、文档	电商、门户、社区、后台系统
学习曲线	简单	中等
部署难度	简单	中等
SEO	优秀	优秀

---

适用于：以信息展示为主的网站，强调性能、SEO和内容管理便捷性。

• 企业官网（纯信息展示）
• 个人作品集、摄影集、设计展示
• 技术博客、文档站点、知识库
• 活动页面、 Landing Page
• 新闻资讯、媒体发布

1. 极简架构

   • 纯静态生成，零运行时依赖
   • 支持 Markdown/MDX 内容创作
   • 文件即路由，目录结构清晰

2. 高性能

   • 首屏加载 < 100ms
   • 自动图片优化
   • 按需加载 JavaScript
   • 支持边缘部署 (Vercel Edge, Cloudflare Pages)

3. 开箱即用

   • 内置语法高亮
   • 主题切换 (亮色/暗色)
   • 响应式图片
   • SEO 元标签自动生成

模块	功能点
首页	Hero区域、核心数据、客户Logo、订阅
关于我们	公司简介、发展历程、团队介绍、资质认证
产品/服务	产品分类、详情介绍、规格参数
成功案例	案例展示、客户评价、Logo墙
新闻动态	新闻列表、分类、RSS订阅
人才招聘	职位列表、福利介绍、简历投递
联系我们	联系信息、表单、地图
博客/文章	文章列表、标签分类、阅读时间
双语支持	i18n路由、翻译文件管理

框架: 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

---

适用于：以用户交互为主的网站，需要登录、动态内容、在线交易等功能。

• 电商平台、B2B商城
• 门户网站、内容社区
• 会员制网站、SaaS产品
• 在线教育、培训平台
• 需要后台管理的各类网站

1. 企业级架构

   • TanStack Router 路由系统（基于 React Router）
   • 全类型安全的路由系统
   • 完整的后台管理系统集成
   • 多语言 i18n 支持

2. 完整业务支持

   • 用户注册/登录
   • 产品目录管理
   • 新闻发布系统
   • 在线询盘/表单
   • 会员中心

3. 灵活扩展

   • 支持多种 CMS (Strapi, Contentful, Sanity)
   • API 路由自动生成
   • 组件库按需引入
   • 微前端集成能力

模块	功能点
首页	Hero、核心数据、客户Logo、订阅
关于我们	公司历程、团队介绍、资质认证、办公环境
产品中心	产品分类、详情、对比、规格参数、购物车
解决方案	行业方案、定制服务、成功案例
新闻动态	新闻列表、分类、RSS订阅、媒体资源
成功案例	案例详情、客户评价、Logo墙
服务支持	知识库、FAQ、下载中心、在线客服
人才招聘	职位列表、简历投递、校园招聘
联系我们	表单、地图、客服系统、多分支机构
合作伙伴	合作伙伴门户、渠道政策、专属登录
会员中心	账户管理、订单历史、收藏、消息通知
在线商城	商品管理、支付集成、物流查询、退换货
投资者关系	公告、财报、治理结构（上市公司）
用户系统	注册登录、权限管理、OAuth认证
CMS后台	内容管理、产品管理、媒体管理、统计分析
双语支持	语言切换、翻译管理、SEO本地化

框架: TanStack Router + React
UI 库: React / TailwindCSS / Shadcn UI
状态管理: Zustand / TanStack Query
表单: React Hook Form + Zod
认证: Auth.js / Clerk
CMS: Strapi / Contentful / Sanity (可选)
数据库: PostgreSQL / MySQL (可选)
部署: Vercel / AWS / Docker

interactive-website/
├── src/
│   ├── routes/         # TanStack Router 路由配置
│   ├── components/     # 可复用组件
│   ├── lib/            # 工具函数和配置
│   ├── hooks/          # 自定义 Hooks
│   ├── types/          # TypeScript 类型
│   ├── services/       # API 服务层
│   └── store/          # 状态管理
├── public/             # 静态资源
├── vite.config.ts      # Vite 配置文件
└── package.json

---

两个模板共享同一套组件库，保证视觉一致性：

packages/ui/
├── Button/             # 按钮组件
├── Card/               # 卡片组件
├── Modal/              # 弹窗组件
├── Form/               # 表单组件
├── Navigation/         # 导航组件
├── Footer/             # 页脚组件
├── Input/              # 输入框组件
├── Select/             # 选择器组件
├── Table/              # 表格组件
├── Pagination/         # 分页组件
├── Carousel/           # 轮播组件
├── Dropdown/           # 下拉菜单
├── Toast/              # 提示组件
└── Skeleton/           # 骨架屏组件

---

需要选择展示型还是互动型？
├── 内容是否主要是静态信息展示？
│   ├── 是 → 选择 Astro 展示型模板
│   └── 否 → 继续
├── 是否需要用户登录注册？
│   ├── 是 → 选择 TanStack Router 互动型模板
│   └── 否 → 继续
├── 是否需要在线交易/支付？
│   ├── 是 → 选择 TanStack Router 互动型模板
│   └── 否 → 可能只需要展示型
└── 是否需要复杂的动态交互功能？
    ├── 是 → 选择 TanStack Router 互动型模板
    └── 否 → 选择 Astro 展示型模板

---

# 克隆模板
git clone https://github.com/your-org/showcase-cms
cd showcase-cms/templates/astro-website

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 克隆模板
git clone https://github.com/your-org/showcase-cms
cd showcase-cms/templates/interactive-website

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

---

• 展示型模板功能拆分
• 互动型模板功能拆分

---

欢迎贡献代码或提出建议。请先阅读贡献指南。

---

MIT License