前言

谁不想在自己的博客页面拥有一只会一直陪伴你的看板娘呢？博主在网上查找后总结了一下发现的方案

方案一

博客看板娘增强版

方案一是在原作者的基础上进行一些些的修改，因为怕链接失效，还是复述一下。

效果展示

博主这里样式没调好，仅作展示用

效果展示

下载配置

Github地址：https://github.com/galnetwen/Live2D

把下载的live2d文件夹复制到博客根目录的source下

修改主题配置

修改_config.butterfly.yml,在inject.bottom中引入以下内容：

# 看板娘begin
    - <link rel="stylesheet" href="/live2d/css/live2d.css" /><div id="landlord"> <div class="message" style="opacity:0.5"></div> <canvas id="live2d" width="280" height="320" class="live2d"></canvas> <div class="hide-button"><font color="#FFFFFF">隐藏</font></div></div>
    - <script type="text/javascript"> var message_Path = "/live2d/"</script>
    - <script type="text/javascript"> var home_Path = "https://myleimu.github.io/" </script>
    - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></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/rem/model.json"); </script>
# 看板娘end

这里的home_Path要修改成自己的

修改

这里的模型是作者自己配置的，如果想用自己的或者官方的可以把- <script type="text/javascript"> loadlive2d("live2d", "/live2d/model/rem/model.json"); </script>的路径替换就行，想修改对话内容可以到live2d/js/message.js进行相应修改，扩展的话可以在model.json中进行修改

方案二

这个方案就是直接用官方的进行修改的，方案二的功能会多一些,如果你不想折腾直接按官方文档的方式引入就行。

效果展示

效果展示二

下载配置

下载地址

将下载的文件夹live2d-widget-master移动到博客根目录的source文件夹下

修改配置

修改_config.butterfly.yml,在inject.bottom中引入以下内容：

# 引入看板娘的样式
    - <link rel="stylesheet" href="/live2d-widget-master/dist/waifu.css">
# 引入看板娘的核心脚本
    - <script src="/live2d-widget-master/dist/autoload.js"></script>

修改live2d-widget-master/dist/autoload.js

1	const live2d_path = '/live2d-widget-master/dist/';

将原本的路径替换为以上内容

将live2d-widget-master/dist/waifu-tips.json底下的models中的内容替换为你自己的模型路径和内容，你用官方的也行，就不更换。

修改

想要修改东西的话可以直接查看官方文档

然后如果你用的是自己的模型可能会出现模型大小不适配的情况，就比如把文本框挡住了，模型显示不全等问题，这里就需要你自行调整一下样式，你可以调整waifu.css的内容或者模型本身的model.json。

方案三

hexo的配置下有大佬做了工具的，链接地址

但项目可能有点老了，参考官方文档应该也能配置萌萌的看板娘