Live2D 入门：给网站装上看板娘

屏幕角落里那个会跟着鼠标转头、会眨眼的二次元角色——Live2D。它是纯前端的装饰件，也是一个站的「性格签名」。

Live2D 是什么

Live2D 是日本的2D 立体化技术：把一张静态的立绘拆成多个图层（眼睛、嘴、头发、身体），通过网格变形让 2D 图产生 3D 般的动态——转头、眨眼、呼吸起伏、口型同步。VTuber 的动作捕捉用的就是它。

Web 端的呈现靠 live2d-widget 这类开源挂件：加载模型文件（JSON 描述 + 贴图），用 WebGL 渲染在页面角落，响应鼠标移动做出注视效果。

接入（以 live2d-widget 为例）

最简方式，一个 script 标签：

<script src="https://fastly.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js"></script>
<script>
  L2Dwidget.init({
    model: {
      jsonPath: 'https://fastly.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json',
      scale: 1,
    },
    display: {
      position: 'right',     // 右下角
      width: 200,
      height: 300,
      hOffset: 0,
      vOffset: -20,
    },
    mobile: { show: false },  // 移动端关闭（省电、不挡内容）
    react: { opacity: 0.9 },  // 半透明融入页面
  });
</script>

模型资源（live2d-widget-model-* 系列 npm 包）有几十个可选：shizuku、haru、koharu……基本都是免费开源的初音家族风格立绘。

本站的用法

本站的看板娘挂件跟随站点深浅色主题，且在管理后台做了面板扩展——后台可以直接控制看板娘的显示与模型切换，不用改代码。技术上要点：

• 惰性加载：模型文件（几百 KB 到几 MB）在首屏渲染后再加载，不抢首屏性能预算；
• 移动端隐藏：小屏上它会遮挡正文，且动画耗电，mobile.show: false 是标配；
• opacity 0.8~0.9：完全实体的看板娘会「跳」出页面，半透明让它成为界面的一部分。

模型资源与版权

这是用 Live2D 唯一要认真对待的问题。模型分几类：

1. 开源免费模型（live2d-widget-model 系列）：可商用、可魔改，最安全；
2. 官方示例模型（Live2D 官网 sample）：个人站展示通常无碍，商用要看具体授权条款；
3. 角色版权模型（初音未来等角色）：受角色著作权保护，商用需授权，别心存侥幸。

个人博客用开源模型即可；如果站点有商业属性，选模型前花十分钟读一遍它的 LICENSE。

性能与克制的艺术

看板娘是纯装饰件，工程上要守住三条底线：

不占首屏：脚本 defer 或首屏后加载，Lighthouse 分数不为它让路。

不挡交互：容器 pointer-events: none（除非你要做点击互动），保证它下面的页面元素可点。

能一键关：给读者一个永久关闭按钮（记 localStorage），尊重「我就是不喜欢页面里有个小人」的用户——装饰件的第一美德是可退出。

小结

Live2D 挂件的技术含量不高（一个 script + 一份模型 JSON），它真正的价值在于给站点一个记忆点。接入时记住工程三原则：惰性加载、移动端隐藏、可一键关闭；版权上选开源模型。这类「无用但可爱」的东西，恰恰是个人站点区别于工业产品的地方。