si-educational
在线教育平台着陆页模板，适用于教育机构、在线课程平台、培训中心展示课程和服务。
技术栈
- Next.js 15.5.9 (已锁定版本，App Router)
- React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
- TypeScript 5
- Tailwind CSS 4
- next-auth (身份认证)
- next-themes (深色/浅色主题切换)
- Framer Motion (高级动画)
- AOS (滚动动画)
- react-slick (轮播组件)
- @headlessui/react (无头 UI 组件)
- @iconify/react (图标库)
快速开始
pnpm install
pnpm run dev
目录结构
src/
├── app/ # Next.js App Router 入口
│ ├── layout.tsx # 根布局 (Header + Footer + 主题Provider)
│ ├── page.tsx # 首页 (Hero + 课程 + 导师 + 评价)
│ ├── not-found.tsx # 404 页面
│ ├── globals.css # 全局样式 + Tailwind 主题变量
│ ├── (site)/ # 路由分组 (共享布局)
│ │ ├── (auth)/ # 认证路由组
│ │ │ ├── signin/page.tsx # 登录页面
│ │ │ └── signup/page.tsx # 注册页面
│ │ └── documentation/page.tsx # 文档页面
│ ├── api/ # API 路由
│ │ ├── auth/[...nextauth]/route.ts # NextAuth 认证 API
│ │ └── data/route.ts # 静态数据 API (菜单、课程、导师)
│ ├── components/ # 可复用组件
│ │ ├── Layout/ # 布局组件
│ │ │ ├── Header/index.tsx # 导航栏 (Logo + 菜单 + 主题切换)
│ │ │ │ ├── Logo/index.tsx # Logo 组件
│ │ │ │ ├── ThemeToggler.tsx # 主题切换按钮
│ │ │ │ └── Navigation/ # 导航链接
│ │ │ │ ├── HeaderLink.tsx # 桌面导航
│ │ │ │ └── MobileHeaderLink.tsx # 移动导航
│ │ │ └── Footer/index.tsx # 页脚
│ │ ├── Home/ # 首页专用组件
│ │ │ ├── Hero/index.tsx # Hero 区域 (主标题 + 下拉选择器)
│ │ │ │ ├── Dropdownone.tsx # 课程类型选择
│ │ │ │ └── Dropdowntwo.tsx # 学习时长选择
│ │ │ ├── Companies/index.tsx # 公司 Logo 轮播
│ │ │ ├── Courses/index.tsx # 课程列表 (分类过滤)
│ │ │ ├── Mentor/index.tsx # 导师卡片网格
│ │ │ ├── Testimonial/index.tsx # 学生评价轮播
│ │ │ └── Newsletter/index.tsx # 邮件订阅区
│ │ ├── Auth/ # 认证相关组件
│ │ │ ├── SignIn/index.tsx # 登录表单
│ │ │ ├── SignUp/index.tsx # 注册表单
│ │ │ ├── ForgotPassword/index.tsx # 忘记密码
│ │ │ ├── MagicLink/index.tsx # 魔法链接登录
│ │ │ ├── ResetPassword/index.tsx # 重置密码
│ │ │ ├── SocialSignIn.tsx # 社交登录按钮
│ │ │ └── SocialSignUp.tsx # 社交注册按钮
│ │ ├── Contact/ # 联系表单
│ │ │ └── Form/index.tsx
│ │ ├── Documentation/ # 文档相关组件
│ │ │ ├── Documentation.tsx # 主文档组件
│ │ │ ├── Introduction.tsx # 介绍
│ │ │ ├── QuickStart.tsx # 快速开始
│ │ │ ├── Configuration.tsx # 配置说明
│ │ │ ├── ColorConfiguraion.tsx # 颜色配置
│ │ │ ├── TypographyConfiguration.tsx # 字体配置
│ │ │ ├── LogoConfiguration.tsx # Logo 配置
│ │ │ ├── PackageStructure.tsx # 包结构说明
│ │ │ └── DocNavigation.tsx # 文档侧边导航
│ │ ├── Common/ # 通用组件
│ │ │ ├── Breadcrumb.tsx # 面包屑
│ │ │ ├── Loader.tsx # 加载动画
│ │ │ ├── PreLoader.tsx # 页面预加载
│ │ │ └── ScrollUp.tsx # 回到顶部按钮
│ │ ├── Skeleton/ # 骨架屏组件
│ │ │ ├── CourseDetail/index.tsx # 课程加载骨架
│ │ │ ├── Mentor/index.tsx # 导师加载骨架
│ │ │ └── Testimonial/index.tsx # 评价加载骨架
│ │ ├── SharedComponent/ # 共享组件
│ │ │ ├── HeroSub/index.tsx # 子页面 Hero
│ │ │ └── Volunteer/index.tsx # 志愿者组件
│ │ ├── Breadcrumb/index.tsx # 面包屑导航
│ │ ├── NotFound/index.tsx # 404 组件
│ │ └── ScrollToTop/index.tsx # 滚动到顶部
│ └── types/ # TypeScript 类型定义
│ ├── blog.ts # 博客类型
│ ├── breadcrumb.ts # 面包屑类型
│ ├── course.ts # 课程分类类型
│ ├── coursedetail.ts # 课程详情类型
│ ├── footerlinks.ts # 页脚链接类型
│ ├── hour.ts # 学习时长类型
│ ├── menu.ts # 菜单类型
│ ├── mentor.ts # 导师类型
│ └── testimonial.ts # 评价类型
├── utils/ # 工具函数
│ ├── aos.tsx # AOS 动画初始化
│ └── validateEmail.ts # 邮箱验证
public/ # 静态资源
└── images/
├── logo/ # Logo 图片
├── banner/ # Hero 区域背景
├── courses/ # 课程卡片图片
├── mentor/ # 导师头像
├── testimonial/ # 评价用户头像
├── slickCompany/ # 公司 Logo 轮播
├── newsletter/ # 新闻订阅图片
├── documentation/ # 文档图片
└── 404-*.svg # 404 页面图片
路由配置
| 路径 | 页面 | 说明 |
|---|---|---|
/ |
Home | 首页 (Hero + 公司轮播 + 课程 + 导师 + 评价 + 订阅) |
/signin |
SignIn | 登录页面 |
/signup |
SignUp | 注册页面 |
/documentation |
Documentation | 模板文档 |
API 路由
| 端点 | 方法 | 说明 |
|---|---|---|
/api/data |
GET | 获取所有前端数据 (导航、课程、导师、评价) |
/api/auth/* |
- | NextAuth 认证端点 |
/api/register |
POST | 用户注册 |
数据结构
导航菜单数据 (src/app/api/data/route.ts)
const HeaderData = [
{
label: 'Home',
href: '/',
},
{
label: 'Pages',
href: '#',
submenu: [
{ label: 'Sign In', href: '/signin' },
{ label: 'Sign Up', href: '/signup' },
]
},
// ...
];
课程数据 (src/app/api/data/route.ts)
const CourseDetailData = [
{
course: 'HTML, CSS & Javascript Course for Web Developers',
imageSrc: '/images/courses/courses1.svg',
profession: 'Web Development',
price: '$70.00',
category: 'webdevelopment' // 用于分类过滤
},
// ...
];
// 课程分类
const CourseData = [
{ name: 'Web Development' },
{ name: 'Mobile Development' },
{ name: 'Data Science' },
{ name: 'Cloud Computing' },
];
导师数据 (src/app/api/data/route.ts)
const MentorData = [
{
name: 'Brooklyn Simmons',
href: '#',
imageSrc: '/images/mentor/mentor1.svg',
imageAlt: 'Brooklyn Simmons',
color: 'bg-success' // 颜色标签
},
// ...
];
评价数据 (src/app/api/data/route.ts)
const TestimonialData = [
{
profession: 'UI/UX Designer',
name: 'Robert Fox',
imgSrc: '/images/testimonial/testimonial1.svg',
starimg: '/images/testimonial/stars.svg',
detail: '评价内容...'
},
// ...
];
类型定义
// src/app/types/coursedetail.ts
type CourseDetailType = {
course: string;
imageSrc: string;
profession: string;
price: string;
category: 'mobiledevelopment' | 'webdevelopment' | 'datascience' | 'cloudcomputing';
};
// src/app/types/mentor.ts
type MentorType = {
name: string;
href: string;
imageSrc: string;
imageAlt: string;
color: string;
};
// src/app/types/testimonial.ts
type TestimonialType = {
profession: string;
name: string;
imgSrc: string;
starimg: string;
detail: string;
};
// src/app/types/menu.ts
type HeaderItem = {
label: string;
href: string;
submenu?: SubmenuItem[];
};
核心组件说明
布局系统
RootLayout(src/app/layout.tsx): 根布局，包含主题Provider、认证Provider、Header和Footer- 使用
next-themes实现深色/浅色模式切换 - 使用
next-auth实现用户认证
主题切换
主题通过 next-themes 的 ThemeProvider 管理，支持:
light- 浅色主题dark- 深色主题system- 跟随系统
主题颜色 (src/app/globals.css)
--color-primary: #611f69; /* 紫色 - 主色 */
--color-cream: #fcf5ef; /* 奶油色 - 背景 */
--color-success: #6b9f36; /* 绿色 - 成功状态 */
--color-orange: #f9cd92; /* 橙色 - 强调 */
动画效果
- AOS (Animate On Scroll): 在
src/utils/aos.tsx初始化，页面滚动时的进入动画 - Framer Motion: 高级动画库，支持复杂过渡效果
- react-slick: 轮播组件动画
认证系统
使用 next-auth v4，配置文件位于 src/app/api/auth/[...nextauth]/route.ts。
启用社交登录需要：
- 在
.env.local中配置环境变量：
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000
# Google 登录
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# GitHub 登录
GITHUB_ID=your-github-id
GITHUB_SECRET=your-github-secret
- 在
route.ts中取消对应 provider 的注释
数据获取模式
所有页面数据从 /api/data 集中获取：
// 组件中的数据获取示例
useEffect(() => {
const fetchData = async () => {
const res = await fetch('/api/data');
const data = await res.json();
setCourses(data.CourseDetailData);
};
fetchData();
}, []);
常见修改任务
修改网站信息
- 修改
src/app/components/Layout/Header/Logo/index.tsx中的 Logo - 修改
src/app/components/Layout/Footer/index.tsx中的版权信息 - 修改
src/app/layout.tsx中的 metadata
修改导航菜单
编辑 src/app/api/data/route.ts 中的 HeaderData 数组
添加新页面
- 在
src/app/(site)/目录下创建新文件夹和page.tsx - 在
HeaderData中添加导航项
修改样式主题
- 编辑
src/app/globals.css中的 CSS 变量 - 主要颜色:
--color-primary,--color-cream,--color-success,--color-orange
修改课程/导师/评价数据
编辑 src/app/api/data/route.ts 中对应的数据数组：
CourseDetailData- 课程列表MentorData- 导师列表TestimonialData- 评价列表CourseData- 课程分类
添加新的课程分类
- 在
CourseData添加新分类 - 在
CourseDetailType类型中添加新的 category 值 - 在课程数据中使用新分类
组件使用示例
课程列表组件 (Courses)
// 支持分类过滤
const categories = ['webdevelopment', 'mobiledevelopment', 'datascience', 'cloudcomputing'];
// 过滤逻辑
const filteredCourses = courses.filter(
course => selectedCategory === 'all' || course.category === selectedCategory
);
轮播组件 (Companies/Testimonial)
// react-slick 配置
const settings = {
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{ breakpoint: 1024, settings: { slidesToShow: 3 } },
{ breakpoint: 768, settings: { slidesToShow: 2 } },
]
};
图片资源
- 存放在
public/images/目录 - 引用路径：
/images/xxx.svg - 课程图片：
/images/courses/ - 导师头像：
/images/mentor/ - 评价头像：
/images/testimonial/
安全说明
以下依赖版本已锁定以修复安全漏洞：
- Next.js 15.5.9 - 锁定版本，修复漏洞编号为：CVE-2025-66478
- React 19.2.3 - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)
请勿使用 ^ 或 ~ 前缀以避免自动升级到有漏洞的版本。