企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api 。你需要先去控制台创建一个 API Key，然后把它填到各个工具的配置里。

具体操作路径：打开 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 创建 Key，复制出来备用。如果你后面要跑 Claude Code 或者做长期编码任务，可以看看 Coding Plan 页面 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，里面有套餐说明。想先验证模型通不通，直接去模型对话页 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 发一条消息试试。

注意：API Key 不要硬编码到前端代码或者提交到 Git 仓库里。VSCode 的 settings.json 如果会同步到云端，也要考虑是否把 Key 放在环境变量里更安全。

接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面有各语言的调用示例。Claude Code 相关的配置参考 https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude-code-anthropic&utm_campaign=rewrite 。控制台入口是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，可以查看用量和余额。

3. VSCode 端：workbench.html 注入 live2d

VSCode 的界面本质上是 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 id="live2d-widget"> <canvas id="live2dcanvas" width="150" height="300" 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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script> <script type="text/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 + P（macOS 是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.json"

L2Dwidget.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 id="live2d-widget"> <canvas id="live2dcanvas" width="150" height="300" 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 src="https://cdn.jsdelivr.net/npm/live2d-widget@3.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.js，jsonPath 改成/live2d/hijiki.model.json。这样就不依赖外部 CDN 了。

5.4 API Key 在多个工具间不同步

如果你在 VSCode 的 AI 插件和 Hexo 的 AI 摘要插件里都用了 TaoToken，建议把 Key 存在系统环境变量里，比如TAOTOKEN_API_KEY，然后在各工具的配置里引用这个变量。这样换 Key 的时候只需要改一处。具体接入方式参考 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 。

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_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite ，想先跑通模型对话验证通道就去 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 。长期做编码任务的话，Coding Plan 页面 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 有更详细的说明。

最后提醒一句：改 workbench.html 之前一定先备份，VSCode 更新后记得重新注入。Hexo 那边如果换了主题，记得把 live2d 的 partial 引用加到新主题的 layout 里。猫养好了，写代码的心情也会好很多。