Post
使用 Coduora 进行网站开发
介绍如何使用 Coduora AI 编程助手(内置 GLM-5.1、Qwen3.6-Plus、DeepSeek、MiniMax、Kimi 等模型),高效完成 Astro 网站开发的全流程指南。
本篇为苏州大学编程智能体输出测试用
使用 Coduora 进行网站开发
什么是 Coduora
Coduora 是一款集成在 VS Code 中的 AI 编程助手,内置多种国产大模型,苏州大学学生可免费使用,无需额外配置 API Key。它提供代码补全、文件读写、终端命令执行、浏览器预览等能力,可以像结对编程一样与开发者协作完成项目。
Coduora 内置的模型包括:
| 模型 | 提供方 | 特点 |
|---|---|---|
| glm-5.1 | 智谱 AI | 中文理解精准,代码生成能力强 |
| qwen3.6-plus | 阿里云通义 | 多模态能力,长上下文支持 |
| deepseek-chat | DeepSeek | 代码推理出色,性价比高 |
| deepseek-reasoner | DeepSeek | 深度推理模式,适合复杂逻辑 |
| minimax-m2.5 | MiniMax | 长文本处理优秀 |
| kimi-k2.6 | Moonshot | 超长上下文,适合大文件分析 |
为什么选择 Coduora
| 优势 | 说明 |
|---|---|
| 中文友好 | 内置国产模型对中文指令理解精准,无需刻意翻译成英文 |
| 上下文感知 | Coduora 自动读取项目文件结构,模型能理解整个代码库 |
| 全流程覆盖 | 从设计构思 → 代码编写 → 调试 → 部署,一站式完成 |
| 实时预览 | Coduora 可启动开发服务器并在浏览器中验证效果 |
| Git 集成 | 直接在对话中完成 git add、commit、push 操作 |
安装指南
简单几步,即可开启您的 Coduora AI 辅助编程之旅。
第 1 步:准备 VS Code 环境
确保您的设备已安装最新版本的 Visual Studio Code。如果尚未安装,请前往 官方渠道 获取。
第 2 步:获取插件文件
从 苏州大学 AI 平台 下载最新的插件安装包(.vsix 格式)。
第 3 步:安装到 VS Code
⚠️ 注意:本插件可能会与 Cline 插件产生冲突,请先卸载 Cline 及其衍生插件后再安装。
- 点击 VS Code 最左侧边栏的 扩展 / Extensions 图标
- 在扩展视图右上角,点击
...更多选项 - 选择菜单中的 Install from VSIX…
- 在弹出的文件选择器中找到已下载的
.vsix文件并确认
第 4 步:启动并认证
安装成功后,插件通常会自动在右侧边栏弹出。如果未显示:
- 快捷键唤醒:
Ctrl / ⌘ + Shift + P - 搜索指令:输入
Coduora并选择 Coduora: Open in new Tab
Coduora 登录后会自动完成身份验证,您可以立即开始使用。首次登录享有 一个月免费使用期限,期间可无限制体验全部内置模型。
模型选择
Coduora 内置 6 种模型,苏州大学学生登录后即可免费使用,无需申请 API Key。打开 Coduora 侧栏,可在 glm-5.1、qwen3.6-plus、deepseek-chat、deepseek-reasoner、minimax-m2.5、kimi-k2.6 之间切换,根据任务特点选择最合适的模型。
初始化 Astro 项目
npm create astro@latest my-site
cd my-site
npm install
npm run dev
实际开发流程
第一步:描述需求
在 Coduora 对话框中用中文描述你想要的功能:
“帮我创建一个博客首页,展示最近 5 篇文章,每篇文章显示标题、日期和标签,整体风格简洁暖色。”
Coduora 会自动读取项目结构,理解 Astro 框架约定,然后生成对应的页面文件。
第二步:迭代修改
如果效果不满意,直接提出修改意见:
“卡片之间间距太小了,加一点阴影效果,标签用小圆角按钮显示。”
Coduora 会定位到相关文件并精确修改,无需你手动查找代码位置。
第三步:添加复杂功能
“给文章详情页加一个目录导航(TOC),桌面端固定在侧边,手机端折叠显示。”
Coduora 可以一次性完成组件创建、样式编写、页面集成,甚至自动处理响应式布局。
第四步:数学公式支持
“博客需要支持 LaTeX 数学公式渲染,行内用
$...$,块级用$$...$$。”
Coduora 会安装 remark-math 和 rehype-katex,修改 astro.config.mjs,并添加 KaTeX CSS 按需加载逻辑。
常用指令示例
创建新文章:
“在
src/content/blog/下新建一篇关于二阶系统分析的文章,frontmatter 包含标题、日期、标签自动控制原理。”
修复 Bug:
“首页文章列表没有按日期排序,帮我修复排序逻辑。”
优化性能:
“搜索索引 JSON 太大了,把正文截断到 600 字再写入索引。”
部署推送:
“把改动提交并推送到远程仓库。”
Coduora 会依次执行:
git add .
git commit -m "描述改动"
git push
使用技巧
让指令更精准
- 指定文件路径:
修改 src/pages/index.astro 的首页布局 - 给出约束条件:
样式用 CSS 变量,不要引入新依赖 - 分步执行:复杂任务拆成多轮对话,每轮确认后再继续
利用项目上下文
Coduora 会自动读取项目文件列表和关键配置,你不需要重复说明项目结构。只需说”按照现有风格”或”参考 BaseLayout.astro 的写法”,模型就能保持一致性。
验证与调试
让 Coduora 启动开发服务器并在浏览器中预览:
“启动 dev server,然后在浏览器中打开首页看看效果。”
如果页面有问题,截图反馈给 Coduora,它会根据视觉信息定位并修复问题。
与传统开发对比
| 维度 | 传统手动开发 | Coduora |
|---|---|---|
| 写代码 | 手动查阅文档、逐行编写 | 描述需求,AI 生成并迭代 |
| 调试 | 手动定位报错、搜索解决方案 | AI 读取错误日志,直接修复 |
| 样式调整 | 反复修改 CSS、刷新浏览器 | 口头描述调整方向,AI 精准修改 |
| 文档编写 | 手动撰写 | AI 根据代码自动生成说明 |
| 部署 | 手动执行 git 命令 | 一句话完成提交推送 |
注意事项
- 免费使用:苏州大学学生首次登录享有 一个月免费使用期限,期间可直接使用 Coduora 内置的全部模型(glm-5.1、qwen3.6-plus、deepseek-chat、deepseek-reasoner、minimax-m2.5、kimi-k2.6),无需 API Key,无需额外付费
- 代码审查:AI 生成的代码应人工审查,特别是涉及安全、权限的部分
- 渐进式开发:建议每完成一个功能就
git commit,方便回滚 - 中文指令:GLM-5.1 对中文理解最好,尽量用中文描述需求,避免翻译歧义
Discussion
Comments
Share questions, corrections, or extra notes about this post.