为你的 Typecho 博客添加一个十分可爱的看版娘

只需几步就能添加如本站左下角同款的看板娘
（什么，你的界面没有显示？用手机打开本网站或者你显示器是打竖放会自动隐藏哦）

下载看板娘

1.开源地址：KanBanMusume
2.本站同款的（推荐下载这个）：

放置看板娘

一般解压后放在你站点的根目录就好，需要使用live2d来命名文件夹。如： /live2d

添加代码

1.打开你 Typecho的控制台
2.左上角 点击 控制台
3.左上角 选项点击选择外观
4.点击 屏幕上半部分 编辑当前外观
5.看右边，找到 index.php 的模板文件

添加代码

看屏幕中间的PHP代码文件

1.在 head 标签下面添加一下代码，来引用CSS文件

<link rel="stylesheet" href="/live2d/css/live2d.css" />

2.在 body 标签下面添加一下代码来启动看版娘：

<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="300" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
    <div class="switch-button">换装</div>
</div>

3.点击 蓝色的保存文件按钮

主题设置

1. 点击屏幕上面的 设置外观 按钮，这是你的主题里面的设置
2. 找到 自定义HTML代码/插入HTML代码等
3. 粘贴以下代码一遍全局使用

<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://fghdz.top/'  //此处修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/pio/model_3.json");
</script>

4. 保存设置

自定义文本

如果你使用的是本站的文件， 很明显，本站的代码并不适合你的网站，因为本站作者太变态了，他的看版娘说的话太过逆天 ，你需要修改以下看版娘说的话

1.打开你的站点目录
2.打开并且编辑 该目录 /live2d/message.json 的文件
3.根据你的需要来修改编辑文件

常见问题

Q:我的网站看板娘没有出来怎么办

A: 1.你下载的代码有问题，推荐下载本站同款的
2.你的主题有问题
3.检查以下主题设置的自定义HTML代码有没有问题

4.index.php 的模板文件有没有问题
5.F12开发者模式看看有没有报错
6.检查时候是CSS没加载

放弃吧，有可能看板娘不喜欢你

Q:我的看板娘她变成竹竿/非常胖/

A: 1.打开index.php 的模板文件的，调整一下以下代码：

canvas id="live2d" width="280" height="300" class="live2d"></canvas>

Q:我怎么设置默认皮肤/更换模型

A：修改自定义HTML里的一下代码

   loadlive2d("live2d", "/live2d/model/pio/model_3.json");

/live2d/model/pio　文件夹里面就是模型文件，修改路径就可以了

Q:我能给我的　WordPress　安装吗

A：可以，更方便

Q:我像要随机换皮肤，可以吗

A：修改替换自定义HTML里的一下代码

<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/pio/model_3.json");
</script>

替换成

<script type="text/javascript">
 // 随机换衣服
 var index = Math.ceil(Math.random()*37)
 loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>

Q:你的看版娘在左边，我想我的在右边可以吗

A：如果需要修改看板娘的位置，只需要进入根目录./live2d/css/live2d.css，修改内容。 如要将看板娘从左边移到右边，只需将

#landlord {
    user-select: none;
    position: fixed;
    left: 5px;
    bottom: 0;
    width: 280px;
    height: 250px;
    z-index: 10000;
    font-size: 0;
    transition: all .3s ease-in-out;
}

其中的left改为right即可。 最后别忘了清理浏览器缓存哦！