为博客园添加Live2D角色模型
在博客园中集成Live2D动画角色,可以通过以下步骤实现固定或随机模型展示。
1. 登录并进入设置页面
登录博客园账号后,依次点击【管理】→【设置】,在此处进行相关配置。
2. 在页首HTML代码中引入Live2D库
将以下代码插入到页首HTML部分:
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
3. 在页脚HTML代码中配置效果
将以下代码添加至页脚HTML部分以完成效果设置:
<script>
const modelList = ["chitose", "haruto", "hibiki", "hijiki", "izumi", "koharu", "miku", "nico", "nipsilon", "nito", "shizuku", "tororo", "tsumiki", "unitychan", "wanko", "z16"];
const selectedModel = modelList[Math.floor(Math.random() * modelList.length)];
document.addEventListener("DOMContentLoaded", () => {
initLive2D(selectedModel);
});
function initLive2D(modelName) {
L2Dwidget.init({
model: {
jsonPath: `https://unpkg.com/live2d-widget-model-${modelName}@1.0.5/assets/${modelName}.model.json`,
scale: 1
},
display: {
position: "right",
width: 150,
height: 300,
hOffset: 10,
vOffset: -30
},
mobile: {
show: true,
scale: 0.7
},
react: {
opacityDefault: 0.8,
opacityOnHover: 0.3
}
});
}
</script>
完成后保存设置即可生效。如果需要固定某个模型,可以将selectedModel变量直接赋值为所需模型名称。
提示:若未获得JS权限,请先申请"博客侧边栏公告(支持HTML代码)(JS权限申请)"。
以下是部分可用模型示例及其预览图:
https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json
https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json















