1. 为什么个人展示页总卡在“最后一步”个人展示页面这东西说简单也简单一个 HTML 文件加几行 CSS 就能跑说难也难难在你写着写着就开始纠结配色、纠结响应式、纠结要不要加个暗色模式最后页面没上线文件夹里躺了七八个半成品。我见过太多朋友简历上写着“熟悉前端”结果个人主页还停留在index.html里只有一句“Hello World”。真正的问题不在写页面本身而在于工具链太碎。你要开编辑器、装插件、查文档、调样式、配环境中间任何一步卡住热情就凉一半。CodeBuddy 这类 AI 编程助手的价值就是把这些碎步骤串起来你在编辑器里敲header它给你补全结构你写 CSS 忘了flex怎么写它给你提示你 JavaScript 报错看不懂它给你解释。而 TaoToken 在这里扮演的角色是统一 Key 和 API 通道——你不用为每个模型单独申请账号、单独配环境变量一个 Key 走通对话、补全、Agent 调用。这篇要交付的东西很具体用 CodeBuddy 从零搭一个个人展示页HTML/CSS/JavaScript 骨架齐全TaoToken 的settings.json配置片段可直接复制项目初始化命令和预览验证步骤都给你。目标就一个——10 分钟内跑通一个能部署的个人主页原型。适合谁适合想快速有个作品集页面、但不想在环境配置上耗半天的开发者也适合刚学前端想找个完整项目练手的朋友。2. TaoToken 前置把 Key 和通道先理顺在动手写页面之前先把“模型怎么调”这件事定下来。CodeBuddy 本身是编辑器里的助手但它背后调用的模型服务需要一套凭证和通道。TaoToken 的作用就是把这层统一掉你注册后拿到一个 API Key然后在 CodeBuddy 的配置里指向 TaoToken 的 API 地址之后不管你是用对话模型问问题还是用编码模型做补全都走同一个入口。先做两件事。第一去 TaoToken 官网注册账号地址是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册完进控制台创建 API Key。第二记下 API 基础地址https://taotoken.net/api这个地址后面要写进配置文件注意它不带 UTM 参数就是干净的 API 入口。注意API Key 只显示一次创建后立刻复制到安全的地方。不要把它硬编码进前端代码或提交到 Git 仓库后面我们会用配置文件的方式管理。如果你还没决定用哪个模型可以先到模型对话页面试试手感地址是https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite。想直接管 Key 就去 API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite配置字段有疑问时对着查。这一步的核心产出就一个一个可用的 API Key 一个 API 基础地址。拿到这两样后面的配置才有意义。3. 可复制配置settings.json 与项目初始化3.1 写 settings.jsonCodeBuddy 的配置走settings.json不同编辑器路径略有差异但内容结构一致。下面这份可以直接复制把YOUR_TAOTOKEN_API_KEY换成你刚创建的那个 Key{ codebuddy.provider: openai-compatible, codebuddy.apiBase: https://taotoken.net/api, codebuddy.apiKey: YOUR_TAOTOKEN_API_KEY, codebuddy.model: claude-sonnet-4-20250514, codebuddy.completion.enable: true, codebuddy.completion.triggerMode: auto, codebuddy.chat.enable: true, codebuddy.agent.enable: true, codebuddy.telemetry: false }几个字段说明一下。apiBase填 TaoToken 的 API 地址不要多加斜杠apiKey就是你的凭证model可以先填一个通用对话模型后面做补全时如果觉得慢再换成更轻量的编码模型。completion.triggerMode设为auto表示你打字时自动触发补全如果觉得干扰可以改成manual用快捷键手动触发。提示如果你在 VS Code 里配置settings.json通常在用户目录的.vscode文件夹下JetBrains 系列则在 IDE 设置的插件配置区。改完记得重启编辑器让配置生效。3.2 初始化项目打开终端建目录、初始化 Git、生成基础文件三条命令搞定mkdir my-portfolio cd my-portfolio git init npm init -ynpm init -y会生成一个默认的package.json虽然纯静态页面不依赖 npm 包但后面如果你想加构建工具或部署脚本这个文件是入口。接着创建目录结构mkdir css js images touch index.html css/style.css js/main.js现在你的项目长这样index.html是页面骨架css/style.css管样式js/main.js管交互images放头像和项目截图。这个结构足够简单也足够扩展。3.3 用 CodeBuddy 生成页面骨架在index.html里输入html:5然后触发补全CodeBuddy 会生成标准 HTML5 骨架。接着按这个顺序写header放头像、姓名、导航section#about放个人介绍和技能列表section#projects放项目卡片section#contact放联系方式。每写一个标签CodeBuddy 都会提示属性和嵌套结构。一个最小可用的 header 结构如下header classsite-header img srcimages/avatar.jpg alt头像 classavatar h1 classname你的名字/h1 p classtagline前端开发 | 技术爱好者/p nav classnav a href#about关于/a a href#projects项目/a a href#contact联系/a /nav /headerCSS 部分先做基础重置和布局容器* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background: #f7f8fa; } .site-header { text-align: center; padding: 48px 16px; background: #fff; } .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }JavaScript 先放一个平滑滚动让导航点击不跳变document.querySelectorAll(.nav a).forEach(link { link.addEventListener(click, e { e.preventDefault(); const target document.querySelector(link.getAttribute(href)); target.scrollIntoView({ behavior: smooth }); }); });到这里骨架、样式、交互三件套都有了。CodeBuddy 在写这些代码时会实时补全标签闭合、CSS 属性值、JavaScript 方法名省掉大量查文档的时间。4. 验证请求确认通道真的通了配置写完不代表通了得验证。分两步先验 API 通道再验页面预览。4.1 验证 TaoToken 通道在终端里用 curl 发一个最小请求确认 Key 和地址都对curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer YOUR_TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [{role: user, content: 回复 OK}], max_tokens: 10 }如果返回里能看到choices字段和内容说明通道正常。如果返回 401检查 Key 有没有复制错返回 404检查apiBase是不是多写了路径。这一步过了CodeBuddy 里的对话和补全才有基础。4.2 预览页面用 VS Code 的话装个 Live Server 插件右键index.html选“Open with Live Server”浏览器会自动打开http://127.0.0.1:5500。没有插件就用 Python 自带的python3 -m http.server 8000然后访问http://localhost:8000。你应该能看到头像、姓名、导航点击导航能平滑滚动到对应区块。打开浏览器开发者工具的 Console确认没有红色报错。Network 面板里看style.css和main.js是不是都 200。注意如果图片不显示检查images/avatar.jpg是否真的存在路径大小写是否匹配。Linux 和 macOS 对大小写敏感Windows 不敏感这个坑很容易踩。5. 本篇常见错排查补全不触发先确认settings.json里completion.enable是true然后重启编辑器。如果还不触发检查apiBase是不是写成了https://taotoken.net/api/末尾多了斜杠有些客户端对末尾斜杠敏感。401 UnauthorizedKey 错了或者过期了。去 API Keys 页面重新生成一个替换settings.json里的值。注意不要有多余空格。页面样式全丢打开开发者工具 Network 面板看style.css的请求状态。如果是 404说明路径写错了。HTML 里引用 CSS 应该是link relstylesheet hrefcss/style.css注意css/前面没有斜杠。导航点击没反应检查main.js有没有被正确引入script srcjs/main.js/script应该放在/body前面。再看 Console 有没有报querySelectorAll is not a function之类的错通常是选择器写错了。中文乱码meta charsetUTF-8必须放在head第一行。如果还乱码检查文件本身是不是 UTF-8 编码保存的。端口被占用python3 -m http.server 8000报Address already in use换个端口比如8001。6. 接下来怎么走页面跑通之后你可以做三件事让它更像“作品”。第一把项目卡片做成数据驱动在main.js里定义一个数组每项包含项目名、描述、技术栈、链接然后用map渲染成 DOM这样加项目不用改 HTML。第二加一个暗色模式切换用 CSS 变量存颜色JavaScript 切class十几行代码就能搞定。第三部署上线GitHub Pages 或 Netlify 都支持直接拖文件夹绑个域名就是你的数字名片。如果你后面要长期用 CodeBuddy 做编码和 Agent 任务建议了解一下 Coding Plan地址是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它针对高频编码场景做了通道优化。配置过程中遇到接入问题对着接入文档排查最快https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite。想先试试模型对话效果从这里进https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite。最后说个实际经验个人展示页最怕的不是技术难是“想太多”。先把能跑的版本上线再慢慢迭代。你现在的index.html哪怕只有头像和一段介绍也比躺在文件夹里的完美草稿强。