博客园美化-添加看板娘
一、看板娘介绍
基础版看板娘
名字(代号) | 人物形象 |
---|---|
koharu | ![]() |
shizuku | ![]() |
z16 | ![]() |
hijiki | ![]() |
tororo | ![]() |
wanko | ![]() |
进阶版看板娘
ID | 名字(代号) | 人物形象 |
---|---|---|
1 | Pro酱 | ![]() |
2 | Tra酱 | ![]() |
3 | 22 | ![]() |
4 | 33 | ![]() |
5 | Shizuku | ![]() |
6 | 海王星 | ![]() |
7 | 舰队 | ![]() |
二、添加看板娘
基础版
基础版看板娘 只有基本的人物形象,不能进行交互、换装等功能。
1.在博客侧边公告栏输入如下代码:
注:需要申请开通JS权限
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> // 不同人物形象 // 黑猫 hijiki = "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json" // 白猫 tororo = "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json" // 狗狗 wanko = "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json" // 人物 koharu = "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json" shizuku = "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json" z16 = "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json" L2Dwidget.init({ "model": { // 在这里使用上面的人物名称替换“shizuku”,可以切换人物形象 jsonPath: shizuku, "scale": 1 }, "display": { "position": "right", "width": 120, "height": 150, "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); </script>
2.保存,回到博客刷新,就可以了。
进阶版
进阶版看板娘 可以进行交互、切换人物形象和服装等功能
1.下载配置文件
文件名 | 作用 |
---|---|
waifu.css | 看板娘样式文件 |
waifu-tips.js | 看板娘人物的初始化、语言设置等 |
live2d.min.js | 看板娘交互动作 |
flat-ui.min.css | 看板娘右边菜单项,与博客园的模板样式存在冲突(主要表现在导航菜单) |
flat-ui.css | flat-ui.min.css删减版,只保留了与看板娘相关的样式(推荐使用这个样式) |
压缩包文件地址:
蓝奏云 密码:aboy
百度网盘 提取码: rcx1
2.在博客园后台 文件界面 上传文件
点击文件 即可查看文件的地址
3.在博客园后台 设置 界面 在底部找到页脚HTML,添加如下代码:
下面代码中 上传地址 需替换为是步骤2中文件的地址
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/博客文件地址/flat-ui.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/博客文件地址/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <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/博客文件地址/live2d.min.js"></script> <script src="https://blog-static.cnblogs.com/files/博客文件地址/waifu-tips.js"></script> <script type="text/javascript">initModel()</script>
另注:在其他网页中添加看板娘 需要使用如下代码, 博客园平台可以跳过此部分
<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/文件地址/flat-ui.min.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/文件地址/waifu.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/文件地址/live2d.min.js"></script> <script src="https://blog-static.cnblogs.com/files/文件地址/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>
4.保存,回到博客刷新,就可以了。
5.设置看板娘位置
waifu.css 默认看板娘在右侧显示,具体代码如下
.waifu { position:fixed; bottom:0; /* 设置右侧显示*/ right:0; z-index:1; font-size:0; -webkit-transform:translateY(3px); transform:translateY(3px) }
如想要切换到左侧,修改如下:将waifu.css文件中第4行的right 改为left
.waifu { position:fixed; bottom:0; /* 设置左侧显示*/ left:0; z-index:1; font-size:0; -webkit-transform:translateY(3px); transform:translateY(3px) }
6.设置看板娘人物形象
可以在initModel()函数中修改对应的模型ID和材质ID,具体代码如下。
模型ID [1-7] 对应不同的人物形象
材质ID [0-60] 对应不同的服装,不同人物对应的服装数量不同
function initModel(){ waifuWelcome(); var modelId = localStorage.getItem('modelId'); var modelTexturesId = localStorage.getItem('modelTexturesId'); if (modelId == null) { /* 首次访问加载 指定模型 的 指定材质 */ var modelId = 2; // 模型 ID var modelTexturesId = 49; // 材质 ID } loadModel(modelId, modelTexturesId);
感谢 Fghrsh提供的API接口
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库