博客园设置看板娘和看板猫

为博客园侧边栏设置看板娘

参考：https://www.cnblogs.com/hean/p/11167216.html
waifu.css在左边
waifu1.css在右边
waifu-tips.js是点击看板娘或者其他动作，引发显示文字，以及一些链接指向。因此此文件要用的时候需要修改一下。

22娘的模型ID是3，如果需要设置默认显示的模型，切换到想设置的模型，在控制台查看log，然后修改waifu-tips.js文件中initModel函数中初始化首次加载的模型参数。

原作者使用说明博客：https://www.fghrsh.net/post/123.html
github地址：https://github.com/fghrsh/live2d_demo

(在HTML代码中initModel方法前直接使用live2d_settings['canSwitchModel'] = true;设置似乎不管用，还会报错，导致模型无法显示。现在这个能将就着用，不用去设置成作者最新的)

博客园使用需要先在管理，申请JS权限。

具体操作步骤：

个人中心-文件，上传waifu-tips.js;waifu1.css(右边);waifu.css;live2d.js;flat-ui.min.css;
个人中心-设置-博客侧边栏公告，申请JS权限。可能需要一个上午时间通过
JS权限通过后，代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>

    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ygxddxc/waifu1.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="waifu" id="waifu">
      <div class="waifu-tips" style="opacity: 1;"></div>
      <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
      <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
      </div>
    </div>
    <script src="https://blog-static.cnblogs.com/files/ygxddxc/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/ygxddxc/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
  </body>
</html>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ygxddxc/flat-ui.min.css"/>

注意链接地址替换；
注意文件名称区别，如有无min；
可以修改waifu-tips.js文件，设置自己喜欢的模型和材质，而非每次进入随机显示
别的文件参考博客里有下载，这里放一个waifu-tips.js文件，修改了两个地方，一是将默认模型设为22；二是将看板娘的返回首页功能从调整博客园首页换成切换默认模型和材质，因为有时候点了换装想切换回来只有清除浏览器缓存了。
waifu-tips.js下载

看板猫

过了一天，我又发现有人的博客上有一只可爱的猫，左手猫，右手22，也太好看了，于是感觉查资料也添加上来。
最开始是看到这个博客里的猫：
白猫
之后搜索资料，发现只有这一个博客里有：
看板猫
不过上面这个博客里写的非常详细了。
通过博客和打开他们的控制台，查看具体代码，我成功把猫显示出来了。
效果如下：

接下来是具体步骤:

确定猫咪模型名称叫tororo
引入JS文件

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

script标签位置是放在上面waifu-tips.js引用的后面。
这里也可以自己进入这个地址，将代码复制存入本地，然后将本地的这个L2Dwidget.min.js文件上传到博客园，和上面看板娘一样引用。
3. JS代码：

<script type="text/javascript">
  L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.json",
            "scale": 1
        },
        "display": {
            "position": "left", <!--设置看板娘的上下左右位置-->
            "width": 100,
            "height": 220,
            "hOffset": 10,
            "vOffset": -100 <!--这里想和22的位置保持对称，但调到-100离底部距离还是高了点，可以试试-130-->
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8, <!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
</script>

<canvas id="live2dcanvas" width="200" height="440" style="position: fixed; opacity: 0.9; left: 10px; bottom: -100px; z-index: 99999; pointer-events: none;"></canvas>

放在initModel的script标签后面即可。
可以根据自己喜好调整数值。
4. 其他模型：
参考第二个连接，除了猫之外，还有其他好几种模型，不过这些模型长什么样就需要自己去试了。
注意修改jsonPath链接。