AI 萌新小窝 — 项目介绍
在线访问
- 线上地址 ： https://www.corely.top
一、项目内容
AI 萌新小窝 是一个面向 AI 零基础用户的中文综合学习与创作平台，已上线运行于 www.corely.top ，核心定位是"让 AI 萌新也能轻松上手"。网站包含 15 个功能页面 ，内容涵盖：
内容板块 说明 拆书心得 21 篇经典文学深度拆解，覆盖《呼兰河传》《红楼梦》《活着》《百年孤独》，附带 AI 拆书方法论 文学理论 6 篇入门级理论文章（叙事学、结构主义、女性主义批评等），基于杨宁老师等课程整理 萌新学习 8 篇 AI 写作入门教程，从去 AI 味技巧到副业变现指南 知识创作 15 篇 AI 工具介绍（LangChain、Dify、Ollama、FastGPT 等开源项目） 书摘文案 经典书摘、名人名言、微信读书高赞划线等 6 类文案素材 资源导航 "数字星团"主题，21 个分类的全球资源导航（AI/开发/设计/教育/游戏等） AI 学习 15 个 AI 学习资源分类，从基础教程到前沿资讯 网文在线 网文平台导航（番茄/起点/七猫/晋江等），"笔墨江湖"主题风格 游戏开发 19 个游戏开发资源分类，重点推荐 Godot 引擎 社区互动 Supabase 实时留言板 + 弹幕系统
二、技术栈
纯前端架构 ，零构建工具、零框架依赖，轻量且高效：
层级 技术 结构 HTML5 语义化标签 + Schema.org 结构化数据 样式 原生 CSS（约 5000 行），CSS 变量设计系统，多主题切换 交互 原生 JavaScript（无 jQuery/React/Vue），模块化文件分工 内容管理 Markdown 文件驱动（70+ 篇文章），动态加载渲染 后端服务 Supabase（实时数据库，用于留言板） SEO 优化 自研 seo-manager.js，动态注入 Open Graph / Twitter Card / JSON-LD 结构化数据 离线支持 PWA（Service Worker + manifest.json），支持离线访问 搜索引擎 sitemap.xml + robots.txt + 百度站长自动推送
核心 JS 模块：
- script.js — 主交互（搜索/Tab/弹幕/懒加载/光效）
- render-content.js — 内容数据与 Markdown 动态渲染引擎
- article-page.js — 文章详情页（80+ 文章映射 + Markdown 解析器 + 分享功能）
- seo-manager.js — SEO 优化模块（结构化数据/社交标签/阅读时间估算）
- service-worker.js — PWA 离线缓存策略
三、设计效果
设计语言：“Cyber Zen Garden”（赛博禅意花园）
- 主色调 ：深黑背景（#0a0a0f）+ 青色荧光（#00f5d4）+ 琥珀暖色（#f4a261）
- 多主题系统 ：每个页面拥有独立视觉风格（网文页用墨韵深褐，资源页用星空深紫，AI 学习用翡翠绿）
- 视觉特效 ：噪点纹理叠加、骨架屏加载动画、卡片鼠标跟踪光效、毛玻璃导航栏、自定义滚动条
- 响应式 ：四档断点适配（1024/768/640/480px），移动端汉堡菜单
- 字体 ：Google Fonts 的 Noto Serif SC（标题）+ Noto Sans SC（正文）