1. 为什么要在 VSCode 和 Hexo 里同时养一只猫写代码写累了抬头看到编辑器右下角有只猫在打盹鼠标划过还会跟着你动这种体验确实能缓解不少疲劳。VSCode 和 Hexo 博客是很多开发者的日常阵地如果两边都能挂上 live2d 看板娘那基本就是「处处有猫」的状态。这篇内容要解决的就是这件事用一套配置思路把 VSCode 的 workbench.html 注入和 Hexo 的 L2Dwidget 接入都跑通同时用 TaoToken 统一管理过程中涉及的 AI 辅助配置和 Key 通道避免东一个 Key 西一个 Key 的混乱。适合谁看前端开发者、Hexo 博客站长、喜欢折腾编辑器外观的同学以及想用统一 API 通道管理多个 AI 辅助工具的人。核心检索词就几个VSCode、live2d、workbench.html、L2Dwidget、Hexo。你不需要懂 live2d 的底层渲染原理只要会改配置文件、会跑命令行就能跟着做下来。我试过直接装 vscode-live2d 插件结果加载模型时各种报错卸载也不干净。后来换思路直接改 workbench.html 注入脚本反而稳定得多。Hexo 那边用 L2Dwidget 的 CDN 方案改改 config 就能出效果。两边的配置骨架我会在下面给全你复制过去改改路径就能用。2. TaoToken 前置统一 Key 与 API 通道在动手改配置之前先把 Key 和 API 通道的事情理清楚。TaoToken 在这里的角色是统一管理 AI 辅助能力的入口比如你在 VSCode 里用 AI 补全、在 Hexo 里用 AI 生成摘要都可以走同一个 API 通道不用每个工具单独配一套 Key。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。你需要先去控制台创建一个 API Key然后把它填到各个工具的配置里。具体操作路径打开 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 创建 Key复制出来备用。如果你后面要跑 Claude Code 或者做长期编码任务可以看看 Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 里面有套餐说明。想先验证模型通不通直接去模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 发一条消息试试。注意API Key 不要硬编码到前端代码或者提交到 Git 仓库里。VSCode 的 settings.json 如果会同步到云端也要考虑是否把 Key 放在环境变量里更安全。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言的调用示例。Claude Code 相关的配置参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-code-anthropicutm_campaignrewrite 。控制台入口是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 可以查看用量和余额。3. VSCode 端workbench.html 注入 live2dVSCode 的界面本质上是 Electron 加载的网页workbench.html 就是主界面的入口文件。我们往里面塞一段 live2d 的初始化和 canvas 代码就能在编辑器右下角养猫。3.1 找到 workbench.html 并备份先定位 VSCode 安装目录。Windows 一般在C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\code\electron-browser\workbench\macOS 在/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/Linux 根据安装方式不同可能在/usr/share/code/resources/app/out/vs/code/electron-browser/workbench/。找到 workbench.html 后先复制一份改名为 workbench.html.bak放在同目录下。这样万一改坏了把备份文件改回原名就能恢复。3.2 注入 live2d 代码片段用文本编辑器打开 workbench.html在/body标签之前插入下面这段代码。注意不要覆盖原有的 script 标签只做追加。div idlive2d-widget canvas idlive2dcanvas width150 height300 style position: fixed; width: 150px; height: 300px; opacity: 0.85; right: 0px; bottom: -30px; z-index: 99999; pointer-events: none; border: 0; /canvas /div script typetext/javascript srchttps://cdn.jsdelivr.net/npm/live2d-widget3.0.4/lib/L2Dwidget.min.js/script script typetext/javascript L2Dwidget.init({ model: { jsonPath: https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json, }, display: { superSample: 2, width: 150, height: 300, position: right, hOffset: 0, vOffset: 0, }, mobile: { show: false, }, react: { opacityDefault: 0.85, }, }); /script这段代码做了三件事创建一个固定定位的 canvas 容器、加载 L2Dwidget 库、初始化模型。pointer-events: none让鼠标事件穿透不会挡住你点编辑器里的按钮。z-index设得很大保证猫在最上层。3.3 解决 VSCode 校验警告直接改 workbench.html 后VSCode 启动时会提示「安装似乎损坏」或者 checksum 校验失败。这是因为官方对核心文件做了完整性校验。解决办法是装一个 Fix VSCode Checksums 扩展。打开命令行执行code --install-extension lehni.vscode-fix-checksums装完后打开 VSCode按Ctrl Shift PmacOS 是Cmd Shift P输入Fix Checksums: Apply回车执行。然后重启 VSCode警告就消失了。注意每次 VSCode 自动更新后workbench.html 会被覆盖需要重新注入代码并重新执行 Fix Checksums。建议把注入片段存成一个单独的文本文件更新后直接复制粘贴。3.4 更换模型和调整参数默认用的是 hijiki 黑猫。想换白猫 tororo把 jsonPath 里的hijiki全部替换成tororo即可jsonPath: https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.jsonL2Dwidget.init 里常用的几个参数display.width和display.height控制模型显示尺寸display.position控制左右位置react.opacityDefault控制透明度。如果你觉得猫太大挡住代码把 width 改成 100、height 改成 200 就行。4. Hexo 端L2Dwidget 接入看板娘Hexo 博客接入 live2d 比 VSCode 简单因为不用改核心文件只需要在主题的配置文件里加一段或者在 layout 模板里引入脚本。4.1 安装依赖与配置骨架进入你的 Hexo 博客根目录安装 live2d-widget 的 npm 包npm install live2d-widget --save然后打开主题的配置文件通常是themes/你的主题/_config.yml在末尾追加live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-hijiki display: position: right width: 150 height: 300 mobile: show: false react: opacityDefault: 0.85如果你不想装 npm 包直接用 CDN 方案也行。在主题的layout/_partial/目录下新建一个live2d.ejs文件内容如下% if (theme.live2d theme.live2d.enable) { % div idlive2d-widget canvas idlive2dcanvas width150 height300 style position: fixed; width: 150px; height: 300px; opacity: 0.85; right: 0px; bottom: -30px; z-index: 99999; pointer-events: none; border: 0; /canvas /div script srchttps://cdn.jsdelivr.net/npm/live2d-widget3.0.4/lib/L2Dwidget.min.js/script script L2Dwidget.init({ model: { jsonPath: https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json, }, display: { superSample: 2, width: 150, height: 300, position: right, hOffset: 0, vOffset: 0, }, mobile: { show: false }, react: { opacityDefault: 0.85 }, }); /script % } %然后在layout/layout.ejs的/body之前引入这个 partial%- partial(_partial/live2d) %4.2 本地启动与页面验证配置改完后在博客根目录执行hexo clean hexo s打开浏览器访问http://localhost:4000看右下角是否出现猫。如果没出现按 F12 打开开发者工具看 Console 有没有报错。常见的是 CDN 被拦截或者模型路径 404。验证成功后执行hexo g hexo d部署到线上。线上页面同样检查一遍确保 CDN 资源能正常加载。5. 本篇常见错排查5.1 VSCode 重启后猫不见了大概率是 VSCode 自动更新覆盖了 workbench.html。重新打开该文件确认注入的代码还在不在。如果被覆盖了重新粘贴一遍再跑一次Fix Checksums: Apply。可以在 VSCode 设置里关闭自动更新update.mode: manual这样就不会被频繁覆盖。5.2 猫显示出来了但位置不对调整display.hOffset和display.vOffset。hOffset 是水平偏移正数往左、负数往右vOffset 是垂直偏移正数往上、负数往下。如果猫被任务栏挡住把 vOffset 改成 20 试试。5.3 Hexo 页面猫加载很慢或加载失败CDN 资源在国内访问可能不稳定。解决办法是把 L2Dwidget.min.js 和模型文件下载到本地放到source/live2d/目录下然后把 script 的 src 改成/live2d/L2Dwidget.min.jsjsonPath 改成/live2d/hijiki.model.json。这样就不依赖外部 CDN 了。5.4 API Key 在多个工具间不同步如果你在 VSCode 的 AI 插件和 Hexo 的 AI 摘要插件里都用了 TaoToken建议把 Key 存在系统环境变量里比如TAOTOKEN_API_KEY然后在各工具的配置里引用这个变量。这样换 Key 的时候只需要改一处。具体接入方式参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。5.5 模型加载后没有动画检查model.json路径是否正确以及模型文件是否完整。有些模型依赖额外的纹理图片如果只下载了 json 没下载纹理就会显示成白块或者不动。建议直接用 unpkg 上的完整模型包或者从模型库下载完整目录。6. 一套配置跑通编辑器与站点VSCode 那边改 workbench.html 加注入脚本Hexo 这边用 L2Dwidget 的 CDN 或本地方案两边的核心配置其实是一样的一个 canvas 容器、一个初始化脚本、一个模型路径。你可以把这段配置抽成一个公共的 HTML 片段VSCode 和 Hexo 各自引用改模型的时候两边同步改。Key 的管理走 TaoToken 统一通道VSCode 的 AI 辅助和 Hexo 的 AI 能力都指向同一个 API 入口。需要创建 Key 就去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 想先跑通模型对话验证通道就去 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 。长期做编码任务的话Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 有更详细的说明。最后提醒一句改 workbench.html 之前一定先备份VSCode 更新后记得重新注入。Hexo 那边如果换了主题记得把 live2d 的 partial 引用加到新主题的 layout 里。猫养好了写代码的心情也会好很多。
