在线课程网站模板 | eLearning – 课程与导师轮播界面

eLearning 是一套面向技能培训、线上课程品牌和独立讲师的课程展示网站模板。首页用课程卡片、导师和学员评价组织内容，并提供登录、注册界面及配置文档。它采用 Next.js、React 和 Tailwind CSS，需要通过 Node.js 安装依赖和构建；课程详情、播放页和学员控制台仍需另行开发。

课程首页与页面构成

首屏采用浅蓝白背景，紫色按钮与深蓝搜索按钮形成重点。左边是课程方向、搜索框和三项学习特点，右边是教师人物与渐变背景。人物旁的“50+”课程数、学员图表都已经合成在 public/images/banner/mahila.png 中，它们不会随课程数据变化。换成自己的业务时，需要一并替换图片里的数字与文字。

课程、导师和评价采用自动轮播。课程数据有六项，卡片包含名称、讲师、评分、价格、课时和学员数；桌面默认展示三张，宽度低于 1200px 改为两张，低于 600px 展示一张。导师同样有六项，但重复使用三张人像。课程价格、人数、评价和企业标志均为示例，上线时应换成可核实的自有资料。

入口	实际内容
首页 /	首屏、企业标志、课程、导师、评价和订阅区
/signin、/signup	独立登录与注册界面；页眉另有弹窗入口
/documentation	环境、目录、颜色、字体和 Logo 等配置说明
404	未找到页面的回退设计，不是另一套首页

包内是一个课程展示首页、两个认证界面和一个文档页，另带 404。适合在 React 组件基础上继续开发课程业务；若主要需要课程列表、讲师和联系页，并希望直接修改 HTML，可以对照 Mentor 教育培训机构模板。

搜索与账户功能

首页搜索框可以输入文字，但按钮没有搜索事件，也没有筛选课程数据；“Explore courses”仍指回首页，课程名称是占位链接。搜索结果、课程详情、购买和报名都需要后续开发。订阅区也只是输入框与按钮，没有保存邮箱或发送订阅邮件的处理。

登录和注册比普通空表单多了一层调用代码：登录尝试使用 NextAuth 的凭据方式，社交按钮调用 Google 或 GitHub 登录，注册则向 /api/register 发送请求。本地包没有对应的认证路由、注册接收端或用户数据库，依赖列表中有 NextAuth 并不表示账户系统已经配置完成。忘记密码链接也没有对应页面，登录与注册界面底部的互跳链接仍指向首页。

如果当前只做课程宣传，可以保留首页并把入口改到自己的咨询或报名渠道；需要账户和在线学习时，再接入认证、课程数据、订单与播放服务。不要让现成登录按钮承担尚未实现的业务。

内容与视觉怎么改

课程、导师、评价和企业标志的示例资料集中在 src/app/api/data.tsx。这里导出的是本地数组，目录名 api 不代表它已提供服务端接口。改课程时，名称、图片、讲师、评分、价格、课时与学员数应一起核对；缩减示例数量时，也应清理导师与评价中的重复项。

• 改首屏文案：编辑 src/components/Home/Hero/index.tsx。
• 改导航和页脚：分别查看 src/components/Layout/Header/Navigation/menuData.tsx 与 src/components/Layout/Footer/index.tsx。原菜单的 Group 指向不存在的 portfolio 区块，应删除这一项或补齐目标；课程标题也需要设置真正的详情或咨询入口。
• 改配色：tailwind.config.ts 中的主色为 #6556ff，辅助色为 #1a21bc，浅色背景也在同处配置。
• 换字体与图片：Poppins 由 src/app/layout.tsx 的 next/font 引入，图片保存在 public/images/。人物图与订阅背景占据较大面积，替换时应保留合适的构图；相比只改按钮颜色，更换这两处图像更能改变整页气质。

修改 Tailwind 配色或组件中的样式类后，需要重新构建；直接覆盖旧的导出目录不会生成新样式。

本地预览与静态部署

包内锁定 Next.js 14.2.4，依赖锁文件记录了 React 18.3.1 和 Tailwind CSS 3.4.4。配置文档建议 Node.js 20+、npm 10+。它没有附带可直接使用的 HTML 成品，初次运行应先安装依赖。

1. 在项目目录运行 npm ci，再用 npm run dev 启动本地预览；首次构建使用的 Poppins 字体需要能够获取或已有缓存。
2. 先完成内容、图片和入口修改。原移动菜单的按钮线条与浅色背景接近，菜单选中锚点后也没有主动收起处理，正式使用前应一并调整。
3. 静态部署前核对 next.config.mjs。原配置已有 output: 'export'，生产环境目录固定为 /E-learning；换成自己的子目录时，同时修改 basePath、assetPrefix、src/utils/util.ts 的图片前缀，以及 Tailwind 和组件中写死的背景图路径。只改一个配置，会留下图片或背景丢失的问题。
4. 运行 npm run build 后，发布生成的 out/ 内容；检查首页、认证页、文档页直接访问和刷新，以及图片、导航与移动菜单。如果希望每条路由对应独立目录，可在配置中加入 trailingSlash: true。

静态导出负责展示页面，登录注册所需的服务端能力不会随 out/ 一起生成。原包的 deploy 脚本面向 GitHub Pages，使用其他托管平台时，按目标平台上传静态产物即可，不必照搬这条发布命令。

本站演示副本已修正子目录资源、无效导航和手机菜单，并停用认证、注册等业务调用，只在操作后显示演示提示。原始源码保持原样，自行建站时仍需处理上述入口与服务。