前置准备确认你的Hexo博客根目录已正常运行Butterfly 5.7主题且已完成基础依赖安装方案一一、拉取完全版看板娘源码1进入Hexo博客的themes/butterfly/source目录2执行Git命令拉取官方全功能看板娘仓库gitclone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget等待克隆完成后会在当前目录生成完整的live2d-widget文件夹二修改核心配置文件1打开live2d-widget\dis目录下的autoload.js文件2注释掉默认的CDN远程加载路径替换为本地资源加载路径// const live2d_pathhttps://fastly.jsdelivr.net/npm/live2d-widgets1.0.1/dist/;const live2d_path/live2d-widget/dist/;三Butterfly主题注入配置1打开Butterfly 5.7主题的配置文件_config.butterfly.yml2在inject配置项中添加入口脚本注入规则inject: head:# 引入 FontAwesome (看板娘图标需要)-linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.cssbottom:# 引入Live2D 看板娘-scriptsrc/live2d-widget/dist/autoload.js/script四设置手机端显示看娘板工具栏打开live2d-widget\dist目录下waifu.css文件在末尾添加下面内容/*看板娘完整配置*/ /*1. 强制人物一直显示不透明解决电脑端透明问题 */#waifu {opacity:1!important;}/*2. 工具栏基本定位贴在人物旁边 */#waifu-tool {position: absolute!important;bottom: 100px!important;/* 高度想更高改大 */ right:-5px!important;/* 看板娘在左边就改 left:-5px*/ z-index:9999!important;transform: none!important;}/*3. 电脑端768px工具栏默认隐藏鼠标移到人物上才显示 */ media(min-width: 769px){#waifu-tool {visibility: hidden!important;opacity:0!important;transition: opacity0.3s ease!important;}#waifu:hover #waifu-tool {visibility: visible!important;opacity:1!important;}}/*4. 手机端≤768px工具栏一直显示 */ media(max-width: 768px){#waifu-tool {visibility: visible!important;opacity:1!important;}}方案二下载看板娘备份文件到hexo\source目录下不是themes\butterfly里面的sourcelive2d-widget修改主题配置文件 _config.butterfly.yml 添加下面内容inject:head:# 引入 FontAwesome 图标库看板娘菜单需要-link relstylesheethrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.cssbottom:#Live2D 看板娘-script src/live2d-widget/autoload.js/script
前置准备确认你的Hexo博客根目录已正常运行Butterfly 5.7主题且已完成基础依赖安装方案一一、拉取完全版看板娘源码1进入Hexo博客的themes/butterfly/source目录2执行Git命令拉取官方全功能看板娘仓库gitclone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget等待克隆完成后会在当前目录生成完整的live2d-widget文件夹二修改核心配置文件1打开live2d-widget\dis目录下的autoload.js文件2注释掉默认的CDN远程加载路径替换为本地资源加载路径// const live2d_pathhttps://fastly.jsdelivr.net/npm/live2d-widgets1.0.1/dist/;const live2d_path/live2d-widget/dist/;三Butterfly主题注入配置1打开Butterfly 5.7主题的配置文件_config.butterfly.yml2在inject配置项中添加入口脚本注入规则inject: head:# 引入 FontAwesome (看板娘图标需要)-linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.cssbottom:# 引入Live2D 看板娘-scriptsrc/live2d-widget/dist/autoload.js/script四设置手机端显示看娘板工具栏打开live2d-widget\dist目录下waifu.css文件在末尾添加下面内容/*看板娘完整配置*/ /*1. 强制人物一直显示不透明解决电脑端透明问题 */#waifu {opacity:1!important;}/*2. 工具栏基本定位贴在人物旁边 */#waifu-tool {position: absolute!important;bottom: 100px!important;/* 高度想更高改大 */ right:-5px!important;/* 看板娘在左边就改 left:-5px*/ z-index:9999!important;transform: none!important;}/*3. 电脑端768px工具栏默认隐藏鼠标移到人物上才显示 */ media(min-width: 769px){#waifu-tool {visibility: hidden!important;opacity:0!important;transition: opacity0.3s ease!important;}#waifu:hover #waifu-tool {visibility: visible!important;opacity:1!important;}}/*4. 手机端≤768px工具栏一直显示 */ media(max-width: 768px){#waifu-tool {visibility: visible!important;opacity:1!important;}}方案二下载看板娘备份文件到hexo\source目录下不是themes\butterfly里面的sourcelive2d-widget修改主题配置文件 _config.butterfly.yml 添加下面内容inject:head:# 引入 FontAwesome 图标库看板娘菜单需要-link relstylesheethrefhttps://cdn.jsdelivr.net/npm/font-awesome4.7.0/css/font-awesome.min.cssbottom:#Live2D 看板娘-script src/live2d-widget/autoload.js/script
