# website-next

**Repository Path**: openInula/website-next

## Basic Information

- **Project Name**: website-next
- **Description**: 新一代openInula官网
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-29
- **Last Updated**: 2025-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenInula 官网（Next.js 版）

## 项目简介

OpenInula 是一个现代化的 JavaScript UI 框架，致力于提供极致性能和开发体验。本项目为 OpenInula 新一代官网，基于 Next.js 13+ 构建，采用 Tailwind CSS 打造极简、现代、响应式的 UI。旨在为开发者和用户提供高效、优雅的文档浏览与产品展示体验。

---

## 核心特性

- **编译优先**：大部分逻辑编译期完成，极致性能
- **细粒度响应式**：自动追踪依赖，极大减少重渲染
- **兼容 React 生态**：API 设计与 React 高度兼容，平滑迁移
- **内置模板语法**：支持 if/for 等模板指令
- **丰富核心组件**：状态管理、路由、国际化、请求、应用脚手架等

---

## 快速开始

### 环境要求
- Node.js >= 16.14
- 推荐使用 pnpm/yarn/npm

### 安装依赖
```bash
pnpm install
```

### 本地开发
```bash
pnpm dev
```

### 打包构建
```bash
pnpm build
```

### 创建新项目
推荐使用官方脚手架一键初始化：
```bash
npx create-inula my-app
```
更多用法详见[快速入门文档](./src/app/docs/quick-start/page.mdx)。

---

## 已完成内容

### 1. 首页与品牌展示
- 极简渐变背景，响应式布局，适配主流屏幕。
- 品牌 Logo 与主标题，AuroraText 极光渐变大字，突出品牌形象。
- 流星动画、功能卡片区块、API 对比区块、按钮组（Why Inula? 视频弹窗、Get Started、Install 快捷入口）。

### 2. 顶部导航栏
- 多级导航，支持下拉菜单，涵盖首页、教程、API文档、示例、生态系统、博客、关于等。
- 搜索栏支持文档/API/示例等内容的快速搜索。
- 主题切换按钮，支持明暗模式切换，自动记忆用户偏好。

### 3. 课程系统
- **课程列表页**：卡片式展示所有课程，支持标签、讲师头像、简介，明暗主题自适应。
- **课程详情页**：支持视频播放、讲师介绍、课程简介，底部大卡片式“上/下一个课程”切换，侧边栏可快速跳转，全部适配深色模式。
- **交互体验**：课程切换动效、卡片悬浮动画、侧边栏高亮、响应式适配。

### 4. Footer 页脚
- 合作伙伴展示，底部链接（Gitee、Bilibili、二维码、隐私政策、法律说明等）。
- 响应式设计，移动端友好。

### 5. 文档系统
- 左侧导航栏（支持折叠）、右侧内容区（支持代码高亮、复制）。
- 内容覆盖项目介绍、快速入门、响应式系统、模板系统、组件、生命周期、API文档等。
- 支持文档内容搜索、代码块一键复制、目录自动生成、多级文档嵌套。

### 6. 其它页面
- 404/错误页：自定义未找到页面和全局错误处理页面，风格统一，支持深色模式。
- 法律说明、隐私政策：独立页面，内容通过 Markdown 动态加载。

### 7. 全站深色模式
- 所有页面、卡片、侧边栏、标签、视频区等均支持深色主题，风格与主站完全统一，自动适配系统或手动切换。

---

## 技术栈

- **Next.js 13+**：前端框架，支持 App Router、SSR/SSG。
- **React 18+**：组件化开发。
- **Tailwind CSS**：原子化 CSS，极简高效。
- **TypeScript**：类型安全，提升开发体验。
- **Nextra**：文档主题与导航支持。
- **其他**：动态加载、视频弹窗、渐变动画等。

---

## 设计风格

- 极简、现代、立体感
- 渐变、阴影、圆角、毛玻璃等视觉效果
- 丰富的交互动画（按钮悬浮、卡片放大、流星等）
- 明暗主题自适应

---

## 目录结构

- `src/app/`：页面、全局样式、文档、法律/隐私等独立页面
- `src/components/`：UI 组件（首页、导航、Footer、动画、文档等）
- `public/`：静态资源（logo、svg、合作伙伴图片、视频等）

---

## 贡献指南

欢迎任何形式的贡献！请阅读[贡献指南](./src/app/docs/conventional/ContributingGuide/page.mdx)和[行为准则](./src/app/docs/conventional/CodeOfConduct/page.mdx)。

1. Fork 本仓库并克隆到本地
2. 新建分支进行开发
3. 提交 PR 前请确保通过 lint 检查和所有测试
4. 填写清晰的 PR 描述，等待社区评审

如需签署 CLA 或详细流程，请参考[贡献指南](./src/app/docs/conventional/ContributingGuide/page.mdx)。

---

## 社区与联系方式

- Gitee: [https://gitee.com/openinula](https://gitee.com/openinula)
- Bilibili: [https://space.bilibili.com/3537117686794734](https://space.bilibili.com/3537117686794734)
- 扫码关注 inula 社区：见页脚二维码
- 邮箱：team@inulajs.org

如有建议、Bug 反馈或合作意向，欢迎通过上述方式联系我们！

---

## 未来计划

- 丰富文档内容与示例
- 增加更多生态组件与案例
- 优化移动端体验
- 接入社区互动与反馈
- 多语言支持

---

如需参与贡献或有任何建议，欢迎通过 Gitee、Bilibili 或社区二维码联系我们！