博客添加Live2D看板娘全攻略

原创于 2025-10-13 22:40:17 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

在博客页面添加Live2D Widget的心得与踩坑记录

将Live2D Widget添加到博客页面可以为静态网站增添互动性和趣味性。以下是一些关键步骤和常见问题的解决方案。

基础集成方法

引入Live2D Widget通常需要加载官方提供的JavaScript库。以下是一个基本示例：

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        model: {
            jsonPath: 'https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json',
            scale: 1
        },
        display: {
            position: 'right',
            width: 150,
            height: 300
        },
        mobile: {
            show: true
        }
    });
</script>

模型选择与配置

Live2D提供多种官方和社区模型，不同模型需要对应不同的JSON配置文件。常用模型包括：

live2d-widget-model-hijiki
live2d-widget-model-koharu
live2d-widget-model-shizuku

模型资源可以通过CDN加载，也可以下载后自行托管。配置参数中scale控制模型大小，建议根据页面布局调整。

样式自定义问题

默认样式可能不适合所有博客主题。通过CSS可以覆盖原始样式：

#live2d-widget {
    opacity: 0.8 !important;
    transition: all 0.3s;
}
#