博客中添加动漫妹子，总有一个适合你，嘿嘿嘿！

常喜欢逛博客的你，是不是会碰到一些有意思的东西，有很多博客网站都有一个卡通人物，它一直盯着你鼠标移动的地方，俗称看板娘。

是不是好想拥有她？

今天就来讲讲如何在自己的博客中添加类似的功能。如果你的数学知识和创造力比较好的话，可以自己手写一个简单的动画人物，当然这样的人比较少，毕竟这也是一个很耗时的过程，并且效果比较单一。

手写不行就来用现成的，业界已有一些比较成熟的方案，比较受欢迎的就是 L2Dwidget。

如何使用

急速添加

<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js">script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js">script>

<script type="text/javascript">
L2Dwidget.init({
      
    "display": {
      
        "superSample": 2,
        "width": 200,   // 宽度
        "height": 400,  // 高度
        "position": "right",  // 模型位置
        "hOffset": 0,  // 纵向偏移
        "vOffset": 0   // 横向偏移
    },
    "mobile": {
      
    	"show": false  // 是否在移动设备上显示
	}
});
script>

在你的 index.html 中添加上面的代码，你就可以马上看到属于你的妹子啦。

什么？这个不是你喜欢的类型？

那我们就来换个妹子，在 init 方法中添加下面的属性：

"model": {
     
    jsonPath: "https://unpkg.com/[email protected]/assets/chitose.model.json",
    scale: 1
},

jsonPath 格式：https://unpkg.com/live2d-widget-model-模型名称@版本号/assets/模型名称.model.json

其中 jsonPath 就是这个模型的地址，只需要更换其中的 chitose 为对应模型的名称即可，共有22个不同的小可爱供你选择。

chitose

Epsilon2.1

Gantzert_Felixander

haru_1

haru_2

haruto

hibiki

hijiki

izumi

koharu

miku

nico

nietzsche

ni-j

nipsilon

nito

shizuku

tororo

tsumiki

unitychan

wanko

z16

我自己也去把每个都试了下，有一些小可爱的 jsonPath 不存在了，所以无法使用。

欢迎访问我的个人网站（相信你会喜欢上我的风格）：www.dengzhanyong.com

关注我的个人公众号【前端筱园】，不错过我的每一篇推送

不用担心，还可以使用线下版本

步骤一：下载资源文件【关注公众号“前端筱园”，回复 “看板娘” 即可下载】

**步骤二：**将下载的文件拷贝到项目中

**步骤三：**在 index.html 中添加下面的内容

<script src="/live2dw/lib/L2Dwidget.min.js">script>

**步骤四：**执行初始化模型

window.L2Dwidget.init({
     
    tagMode: false,
    debug: false,
    model: {
     
        jsonPath: '/live2dw/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json',
        scale: 1
    },
    display: {
     
        position: 'right',
        width: 150,
        height: 300,
        hOffset: 100,
        vOffset: 50
    },
    mobile: {
      show: true },
    log: false  
})

**注意点：**模型路径是相对于 live2dw 文件夹的路径，并不是你执行初始化的代码所在文件的相对路径。

这是因为你在初始化时，将模型路径以字符串的形式传进去，真正加载模型资源是在 /live2dw/lib/L2Dwidget.min.js 中进行的。

在vue或react中使用

在vue和react中使用也是相当的简单，步骤一二三保持不变，初始化过程可以写在 index.html 中，当然更多的是写在 App.vue 或 app.js 中。

• vue中，在组件的 created 生命周期中初始化
• react中，在组件的 componentDidMount 生命周期中初始化

Hexo中使用

步骤一：安装模块

# npm install --save hexo-helper-live2d

步骤二：下载模型

格式：npm install 模型名字

# npm install live2d-widget-model-hibiki

步骤三：添加配置

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中
  log: false 
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true 
  react:
    opacity: 1