Fork me on GitHub

博客园美化-添加看板娘

一、看板娘介绍

基础版看板娘

名字(代号) 人物形象
koharu koharu
shizuku Shizuku
z16 z16
hijiki hijiki
tororo tororo
wanko wanko

进阶版看板娘

ID 名字(代号) 人物形象
1 Pro酱 Pro
2 Tra酱 Tra
3 22 22
4 33 33
5 Shizuku Shizuku
6 海王星 hai
7 舰队 fleet

二、添加看板娘

基础版

基础版看板娘 只有基本的人物形象,不能进行交互、换装等功能。

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接口

posted @   ZTianming  阅读(5634)  评论(10编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
欢迎阅读『博客园美化-添加看板娘』

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示