Showcase CMS

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

opencode 使用插件skill

{
  "plugin"
}

模板类型对比

| 特性 | 展示型模板(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路由、翻译文件管理 |

技术栈

框架: 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本地化 |

技术栈

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

# 克隆模板
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)

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

文档链接

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

贡献指南

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

许可证

MIT License