CyberEdu — 网络安全学习平台
一个互动式的网络安全学习网站 — 从零基础小白到高级安全从业者。
52 章节 · 28 个 CTF 挑战 · 中英双语 · AI 导师
🚀 在线演示
·
中文
·
更新日志
·
报告 Bug
## ✨ 功能特性
| 类别 | 详情 |
|----------|---------|
| 📚 **内容** | 涵盖 7 个模块的 52 个章节 · 4 个难度等级（入门 → 专家） |
| 🌐 **双语** | 完整的中英翻译 · 一键切换界面语言 |
| 🤖 **AI 导师** | 内置聊天助手 · 流式 SSE · 支持 DeepSeek, OpenAI, Qwen, Claude, Ollama |
| 💻 **代码编辑器** | CodeMirror 5 · 支持 Python / JS / C / Bash 语法高亮 |
| 🚩 **CTF 竞技场** | 16 个挑战 · 包含 Crypto, Web, Misc, Reverse, Forensics, PWN |
| ⌨️ **练习** | 10 个带有预期输出验证的编程挑战 |
| 🔍 **搜索** | Ctrl+K 全局搜索 · 基于 token 的模糊匹配 |
| 📱 **响应式** | 完整的移动端支持 · 侧边栏覆盖 · 紧凑型导航 |
| 🌙 **主题** | 暗色 / 亮色模式 · 持久化存储至 localStorage |
| 📊 **进度** | 自动追踪学习进度 · 支持 JSON 导出/导入备份 |
### 📚 7 个核心模块
```
Programming · Cryptography · Networking · Web Security · Pentesting · Malware Analysis · CTF
```
## 🏗️ 项目结构
```
cyberedu/
├── cyberedu.html # Main page (entry point)
├── content.js # Content data (bilingual: modules/chapters/exercises/CTF)
├── script.js # Interactive logic
├── style.css # Stylesheet (Neo-Brutalist Terminal design)
├── i18n.js # EN/ZH localization (~140 translation pairs)
├── server.js # Local Node.js server (AI chat proxy)
├── favicon.svg # Site icon
├── docs/ # Documentation assets (screenshots, OG images)
├── versions/ # Historical version archives + CHANGELOG
├── .github/ # Issue & feature request templates
└── CONTRIBUTING.md # Contribution guidelines
```
## 🚀 快速开始
### 快速开始（无需服务器）
只需在浏览器中直接打开 `cyberedu.html`。代码高亮、主题切换、进度追踪和搜索 —— 所有这些功能均可在没有服务器的情况下运行。
### 配合 AI 导师使用（本地服务器）
需要 [Node.js](https://nodejs.org/) v16+：
```
node server.js
# 然后打开 http://localhost:8000
```
点击右下角的绿色悬浮按钮以打开 AI 聊天面板。点击 ⚙ 进行配置：
| 字段 | 示例 |
|-------|---------|
| API 类型 | `OpenAI Compatible` 或 `Anthropic` |
| API Base URL | `https://api.deepseek.com` |
| API Key | `sk-...` |
| 模型 | `deepseek-chat`, `deepseek-reasoner`, `claude-sonnet-4-20250514` |
可选：调整 temperature、max tokens 和 thinking/reasoning 模式。
## 🤖 支持的 AI 模型
| 提供商 | API Base URL | 模型示例 |
|----------|-------------|--------|
| **OpenAI Compatible** |||
| DeepSeek | `https://api.deepseek.com` | `deepseek-chat`, `deepseek-reasoner` |
| OpenAI | `https://api.openai.com/v1` | `gpt-4o`, `gpt-4o-mini` |
| Qwen (通义) | `https://dashscope.aliyuncs.com/compatible-mode/v1` | `qwen-plus`, `qwen-max` |
| Ollama (本地) | `http://localhost:11434` | `llama3`, `qwen2` |
| Groq | `https://api.groq.com/openai/v1` | `llama-3.1-70b` |
| **Anthropic** |||
| Claude | `https://api.anthropic.com` | `claude-sonnet-4-20250514`, `claude-haiku-3-5` |
## 🛠️ 技术栈
| 层级 | 技术 |
|-------|-----------|
| 前端 | HTML5 / CSS3 / Vanilla JavaScript（客户端零依赖） |
| 代码高亮 | [Prism.js](https://prismjs.com/) v1.29.0 |
| 代码编辑器 | [CodeMirror 5](https://codemirror.net/) 包含 Python/JS/C/Bash 模式 |
| 本地服务器 | Node.js 内置 `http` 模块（零依赖） |
| AI 流式传输 | SSE (Server-Sent Events) |
| 字体 | JetBrains Mono + Noto Sans SC + Space Mono |
## 📋 最新动态
### v2.3 (2026-06-05)
- 🤖 **多模型 AI** — 在兼容 OpenAI 的模型之外，增加了对 Claude/Anthropic API 的支持
- 📱 **移动端响应式** — 侧边栏覆盖、紧凑型导航、响应式排版
- 🔍 **增强的搜索** — 基于 token 的模糊匹配，支持按词高亮
- 🌐 **国际化 (i18n)** — AI 设置面板支持完全双语（中/英），站点默认语言为英语
- ⚡ **性能优化** — 脚本延迟加载，并带有加载遮罩
- 📝 **开源准备就绪** — 新增 CONTRIBUTING.md、SEO meta 标签，进行了项目清理
## 💬 反馈
发现 Bug 或有建议？[提交 issue →](https://github.com/Chhhhhhhhhhhhhhh/cyberedu/issues/new/choose)
## 📄 许可证
[MIT](LICENSE) — 个人和商业用途均可免费使用。
如果您觉得 CyberEdu 对您有帮助，欢迎点个 ⭐！