当前位置:首页 > 技术 > 正文内容

为博客园添加Live2D角色模型

访客 技术 2026年5月23日 5

在博客园中集成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

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程;crontab 是用来编辑/查看“按时间周期执行命令”的表(cron table)。常见两类:用户 crontab:每个用户一份(crontab -e 编辑)系统级 crontab / cron.d:可指定执行用户(/etc/crontab、/etc/cron.d/*)2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性(极少)class        (可选)id           (通常建议禁用)title️ 注意:id 容易被滥用做锚点注入,很多系统直接禁用class 允许的话最好只允许固定前缀(如 editor-*)二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一:通过官网安装包(最简单,适合初学者)如果你只是想快速安装并开始使用,这是最直接的方法。访问 Node.js 官网。页面会显示两个版本:LTS (Recommended For Most Users):长期支持版,最稳定。建议选这个。Current:最新特性版,包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二:使用 Homebrew 安装(...

Dom\HTML_NO_DEFAULT_NS 的副作用:自动加闭合标签

在使用Dom\HTMLDocument时,Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时,已知的一个副作用就是:自动加闭合标签例如 </img> 为什么会这样?当你使用:Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式,此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中,使用 Artisan 命令创建 Events(事件) 和 Listeners(监听器) 是非常高效的。你可以通过以下几种方式来实现:1. 手动创建单个 Event如果你只想创建一个事件类,可以使用 make:event 命令:Bashphp artisan make:event UserRegistered执行后,文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq?dnsmasq 是一个轻量级、功能强大的网络服务工具,专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么?功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器(ISP、Google DNS 等),并在本地缓存结果加快 DNS 查询速度,减少外部 DNS 流量本地 DNS解析本地网络设备的主机名,无需编辑&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。