[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70651":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},70651,"live2d-widget","stevenjoezhang\u002Flive2d-widget","stevenjoezhang","把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform","https:\u002F\u002Fzhangshuqiao.org\u002F2018-07\u002F在网页中添加Live2D看板娘",null,"JavaScript",10730,2619,80,6,0,9,21,81,27,106.6,"GNU General Public License v3.0",false,"master",true,[27,28],"javascript-plugin","live2d","2026-06-12 04:00:56","# Live2D Widget\n\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fbuilt-with-love.svg)\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fmade-with-typescript.svg)\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fuses-css.svg)\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fcontains-cat-gifs.svg)\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fpowered-by-electricity.svg)\n![](https:\u002F\u002Fforthebadge.com\u002Fimages\u002Fbadges\u002Fmakes-people-smile.svg)\n\n[English](README.en.md)\n\n## 特性\n\n- 在网页中添加 Live2D 看板娘\n- 轻量级，除 Live2D Cubism Core 外无其他运行时依赖\n- 核心代码由 TypeScript 编写，易于集成\n\n\u003Cimg src=\"demo\u002Fscreenshots\u002Fscreenshot-2.png\" width=\"280\">\u003Cimg src=\"demo\u002Fscreenshots\u002Fscreenshot-3.png\" width=\"280\">\u003Cimg src=\"demo\u002Fscreenshots\u002Fscreenshot-1.png\" width=\"270\">\n\n*注：以上人物模型仅供展示之用，本仓库并不包含任何模型。*\n\n你也可以查看示例网页：\n\n- 在 [米米的博客](https:\u002F\u002Fzhangshuqiao.org) 的左下角可查看效果\n- [demo\u002Fdemo.html](https:\u002F\u002Flive2d-widget.pages.dev\u002Fdemo\u002Fdemo)，展现基础功能\n- [demo\u002Flogin.html](https:\u002F\u002Flive2d-widget.pages.dev\u002Fdemo\u002Flogin)，仿 NPM 的登陆界面\n\n## 使用\n\n如果你是小白，或者只需要最基础的功能，那么只用将这一行代码加入 html 页面的 `head` 或 `body` 中，即可加载看板娘：\n\n```html\n\u003Cscript src=\"https:\u002F\u002Ffastly.jsdelivr.net\u002Fnpm\u002Flive2d-widgets@1.0.0\u002Fdist\u002Fautoload.js\">\u003C\u002Fscript>\n```\n\n添加代码的位置取决于你的网站的构建方式。例如，如果你使用的是 [Hexo](https:\u002F\u002Fhexo.io)，那么需要在主题的模版文件中添加以上代码。对于用各种模版引擎生成的页面，修改方法类似。  \n如果网站启用了 PJAX，由于看板娘不必每页刷新，需要注意将该脚本放到 PJAX 刷新区域之外。\n\n**但是！我们强烈推荐自己进行配置，让看板娘更加适合你的网站！**  \n如果你有兴趣自己折腾的话，请看下面的详细说明。\n\n## 配置\n\n你可以对照 `dist\u002Fautoload.js` 的源码查看可选的配置项目。`autoload.js` 会自动加载两个文件：`waifu.css` 和 `waifu-tips.js`。`waifu-tips.js` 会创建 `initWidget` 函数，这就是加载看板娘的主函数。`initWidget` 函数接收一个 Object 类型的参数，作为看板娘的配置。以下是配置选项：\n\n| 选项 | 类型 | 默认值 | 说明 |\n| - | - | - | - |\n| `waifuPath` | `string` | `https:\u002F\u002Ffastly.jsdelivr.net\u002Fnpm\u002Flive2d-widgets@1\u002Fdist\u002Fwaifu-tips.json` | 看板娘资源路径，可自行修改 |\n| `cdnPath` | `string` | `https:\u002F\u002Ffastly.jsdelivr.net\u002Fgh\u002Ffghrsh\u002Flive2d_api\u002F` | CDN 路径 |\n| `cubism2Path` | `string` | `https:\u002F\u002Ffastly.jsdelivr.net\u002Fnpm\u002Flive2d-widgets@1\u002Fdist\u002Flive2d.min.js` | Cubism 2 Core 路径 |\n| `cubism5Path` | `string` | `https:\u002F\u002Fcubism.live2d.com\u002Fsdk-web\u002Fcubismcore\u002Flive2dcubismcore.min.js` | Cubism 5 Core 路径 |\n| `modelId` | `number` | `0` | 默认模型 id |\n| `tools` | `string[]` | 见 `autoload.js` | 加载的小工具按钮 |\n| `drag` | `boolean` | `false` | 支持拖动看板娘 |\n| `logLevel` | `string` | `error` | 日志等级，支持 `error`，`warn`，`info`，`trace` |\n\n## 模型仓库\n\n本仓库中并不包含任何模型，需要单独配置模型仓库，并通过 `cdnPath` 选项进行设置。  \n旧版本的 `initWidget` 函数支持 `apiPath` 参数，这要求用户自行搭建后端，可以参考 [live2d_api](https:\u002F\u002Fgithub.com\u002Ffghrsh\u002Flive2d_api)。后端接口会对模型资源进行整合并动态生成 JSON 描述文件。自 1.0 版本起，相关功能已通过前端实现，因此不再需要专门的 `apiPath`，所有模型资源都可通过静态方式提供。只要存在 `model_list.json` 和模型对应的 `textures.cache`，即可支持换装等功能。\n\n## 开发\n\n如果以上「配置」部分提供的选项还不足以满足你的需求，那么你可以自己进行修改。本仓库的目录结构如下：\n\n- `src` 目录下包含了各个组件的 TypeScript 源代码，例如按钮和对话框等；\n- `build` 目录下包含了基于 `src` 中源代码构建后的文件（请不要直接修改！）；\n- `dist` 目录下包含了进一步打包后网页直接可用的文件，其中：\n  - `autoload.js` 用于自动加载其它资源，例如样式表等；\n  - `waifu-tips.js` 是由 `build\u002Fwaifu-tips.js` 自动打包生成的，不建议直接修改；\n  - `waifu.css` 是看板娘的样式表；\n  - `waifu-tips.json` 中定义了触发条件（`selector`，CSS 选择器）和触发时显示的文字（`text`）。  \n    `waifu-tips.json` 中默认的 CSS 选择器规则是对 Hexo 的 [NexT 主题](https:\u002F\u002Fgithub.com\u002Fnext-theme\u002Fhexo-theme-next) 有效的，为了适用于你自己的网页，可能需要自行修改，或增加新内容。  \n    **警告：`waifu-tips.json` 中的内容可能不适合所有年龄段，或不宜在工作期间访问。在使用时，请自行确保它们是合适的。**\n\n要在本地部署本项目的开发测试环境，你需要安装 Node.js 和 npm，然后执行以下命令：\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fstevenjoezhang\u002Flive2d-widget.git\nnpm install\n```\n\n如果需要使用 Cubism 3 及更新的模型，请单独下载并解压 Cubism SDK for Web 到 `src` 目录下，例如 `src\u002FCubismSdkForWeb-5-r.4`。受 Live2D 许可协议（包括 Live2D Proprietary Software License Agreement 和 Live2D Open Software License Agreement）限制，本项目无法包含 Cubism SDK for Web 的源码。  \n如果只需要使用 Cubism 2 版本的模型，可以跳过此步骤。本仓库使用的代码满足 Live2D 许可协议中 Redistributable Code 相关条款。  \n完成后，使用以下命令进行编译和打包。\n\n```bash\nnpm run build\n```\n\n`src` 目录中的 TypeScript 代码会被编译到 `build` 目录中，`build` 目录中的代码会被进一步打包到 `dist` 目录中。  \n为了能够兼容 Cubism 2 和 Cubism 3 及更新的模型，并减小代码体积，Cubism Core 及相关的代码会根据检测到的模型版本动态加载。\n\n## 部署\n\n在本地完成了修改后，你可以将修改后的项目部署在自己的服务器上，或者通过 CDN 加载。为了方便自定义有关内容，可以把这个仓库 Fork 一份，然后把修改后的内容通过 git push 到你的仓库中。\n\n### 使用 jsDelivr CDN\n\n如果要通过 jsDelivr 加载 Fork 后的仓库，使用方法对应地变为\n\n```html\n\u003Cscript src=\"https:\u002F\u002Ffastly.jsdelivr.net\u002Fgh\u002Fusername\u002Flive2d-widget@latest\u002Fautoload.js\">\u003C\u002Fscript>\n```\n\n将此处的 `username` 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新，需要创建新的 git tag 并推送至 GitHub 仓库中，否则此处的 `@latest` 仍然指向更新前的文件。此外 CDN 本身存在缓存，因此改动可能需要一定的时间生效。\n\n### 使用 Cloudflare Pages\n\n也可以使用 Cloudflare Pages 来部署。在 Cloudflare Pages 中创建一个新的项目，选择你 Fork 的仓库。接下来，设置构建命令为 `npm run build`。完成后，Cloudflare Pages 会自动构建并部署你的项目。\n\n### Self-host\n\n你也可以直接把这些文件放到服务器上，而不是通过 CDN 加载。\n\n- 可以把修改后的代码仓库克隆到服务器上，或者通过 `ftp` 等方式将本地文件上传到服务器的网站的目录下；\n- 如果你是通过 Hexo 等工具部署的静态博客，请把本项目的代码放在博客源文件目录下（例如 `source` 目录）。重新部署博客时，相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改，可能需要设置 `skip_render`。\n\n这样，整个项目就可以通过你的域名访问了。不妨试试能否正常地通过浏览器打开 `autoload.js` 和 `live2d.min.js` 等文件，并确认这些文件的内容是完整和正确的。  \n一切正常的话，接下来修改 `autoload.js` 中的常量 `live2d_path` 为 `dist` 目录的 URL 即可。比如说，如果你能够通过\n\n```\nhttps:\u002F\u002Fexample.com\u002Fpath\u002Fto\u002Flive2d-widget\u002Fdist\u002Flive2d.min.js\n```\n\n访问到 `live2d.min.js`，那么就把 `live2d_path` 的值修改为\n\n```\nhttps:\u002F\u002Fexample.com\u002Fpath\u002Fto\u002Flive2d-widget\u002Fdist\u002F\n```\n\n路径末尾的 `\u002F` 一定要加上。  \n完成后，在你要添加看板娘的界面加入\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fexample.com\u002Fpath\u002Fto\u002Flive2d-widget\u002Fdist\u002Fautoload.js\">\u003C\u002Fscript>\n```\n\n就可以加载了。\n\n## 鸣谢\n\n\u003Ca href=\"https:\u002F\u002Fwww.browserstack.com\u002F\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" height=\"80\" srcset=\"https:\u002F\u002Fd98b8t1nnulk5.cloudfront.net\u002Fproduction\u002Fimages\u002Flayout\u002Flogo-header.png?1469004780\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" height=\"80\" srcset=\"https:\u002F\u002Flive.browserstack.com\u002Fimages\u002Fopensource\u002Fbrowserstack-logo.svg\">\n    \u003Cimg alt=\"BrowserStack Logo\" height=\"80\" src=\"https:\u002F\u002Flive.browserstack.com\u002Fimages\u002Fopensource\u002Fbrowserstack-logo.svg\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n> 感谢 BrowserStack 容许我们在真实的浏览器中测试此项目。  \n> Thanks to [BrowserStack](https:\u002F\u002Fwww.browserstack.com\u002F) for providing the infrastructure that allows us to test in real browsers!\n\n\u003Ca href=\"https:\u002F\u002Fwww.jsdelivr.com\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" height=\"80\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fjsdelivr\u002Fjsdelivr-media\u002Fmaster\u002Fwhite\u002Fsvg\u002Fjsdelivr-logo-horizontal.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" height=\"80\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fjsdelivr\u002Fjsdelivr-media\u002Fmaster\u002Fdefault\u002Fsvg\u002Fjsdelivr-logo-horizontal.svg\">\n    \u003Cimg alt=\"jsDelivr Logo\" height=\"80\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fjsdelivr\u002Fjsdelivr-media\u002Fmaster\u002Fdefault\u002Fsvg\u002Fjsdelivr-logo-horizontal.svg\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n> 感谢 jsDelivr 提供的 CDN 服务。  \n> Thanks jsDelivr for providing public CDN service.\n\n感谢 fghrsh 提供的 API 服务。\n\n感谢 [一言](https:\u002F\u002Fhitokoto.cn) 提供的语句接口。\n\n点击看板娘的纸飞机按钮时，会出现一个彩蛋，这来自于 [WebsiteAsteroids](http:\u002F\u002Fwww.websiteasteroids.com)。\n\n## 更多\n\n代码自这篇博文魔改而来：  \nhttps:\u002F\u002Fwww.fghrsh.net\u002Fpost\u002F123.html\n\n更多内容可以参考：  \nhttps:\u002F\u002Fnocilol.me\u002Farchives\u002Flab\u002Fadd-dynamic-poster-girl-with-live2d-to-your-blog-02  \nhttps:\u002F\u002Fgithub.com\u002Fguansss\u002Fpixi-live2d-display\n\n更多模型仓库：  \nhttps:\u002F\u002Fgithub.com\u002Fzenghongtu\u002Flive2d-model-assets\n\n除此之外，还有桌面版本：  \nhttps:\u002F\u002Fgithub.com\u002FTSKI433\u002Fhime-display  \nhttps:\u002F\u002Fgithub.com\u002Famorist\u002Fplatelet  \nhttps:\u002F\u002Fgithub.com\u002Fakiroz\u002FLive2D-Widget  \nhttps:\u002F\u002Fgithub.com\u002Fzenghongtu\u002FPPet  \nhttps:\u002F\u002Fgithub.com\u002FLikeNeko\u002FL2dPetForMac\n\n以及 Wallpaper Engine：  \nhttps:\u002F\u002Fgithub.com\u002Fguansss\u002Fnep-live2d\n\nLive2D 官方网站：  \nhttps:\u002F\u002Fwww.live2d.com\u002Fen\u002F\n\n## 许可证\n\n本仓库并不包含任何模型，用作展示的所有 Live2D 模型、图片、动作数据等版权均属于其原作者，仅供研究学习，不得用于商业用途。\n\n本仓库的代码（不包括受 Live2D Proprietary Software License 和 Live2D Open Software License 约束的部分）基于 GNU General Public License v3 协议开源  \nhttp:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-3.0.html\n\nLive2D 相关代码的使用请遵守对应的许可：\n\nLive2D Cubism SDK 2.1 的许可证：  \n[Live2D SDK License Agreement (Public)](https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F10tz1WrycskzGGBOhrAfGiTSsgmyFy8D9yHx9r_PsN8I\u002F)\n\nLive2D Cubism SDK 5 的许可证：  \nLive2D Cubism Core は Live2D Proprietary Software License で提供しています。  \nhttps:\u002F\u002Fwww.live2d.com\u002Feula\u002Flive2d-proprietary-software-license-agreement_cn.html  \nLive2D Cubism Components は Live2D Open Software License で提供しています。  \nhttps:\u002F\u002Fwww.live2d.com\u002Feula\u002Flive2d-open-software-license-agreement_cn.html\n\n## 更新日志\n\n2020年1月1日起，本项目不再依赖于 jQuery。\n\n2022年11月1日起，本项目不再需要用户单独加载 Font Awesome。\n","Live2D Widget 是一个用于在网页上添加生动的 Live2D 看板娘的 JavaScript 插件。该项目的核心功能是通过轻量级的代码实现，除了 Live2D Cubism Core 之外没有其他运行时依赖，并且核心代码由 TypeScript 编写，易于集成和扩展。用户可以通过简单的配置自定义看板娘的行为和外观，包括拖动、模型切换等功能。Live2D Widget 适用于希望增强网站互动性和趣味性的个人博客、企业官网等场景，为访问者带来更加生动有趣的浏览体验。",2,"2026-06-11 03:33:13","high_star"]