给自己的博客园装饰萌萝莉(live2d)

有挺多博友问我博客右下角的萝莉是怎么加上的,我这里做一个小教程。

  1. 首先,也是最重要的,必须先有一个cnblog账号。
  2. 登录博客园账号→管理→设置,在这里修改设置。
  3. 下滑,申请JS权限,申请成功后会有提示(支持js代码)。
  4. 然后在【页首html代码】编辑器中插入
<!-- 右下角live2d效果 -->
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>

    5. 然后在【页脚html代码】编辑器中插入

复制代码
 1 <!-- 右下角live2d效果 -->
 2 <script type="text/javascript">
 3 setTimeout(() => {
 4         L2Dwidget.init({
 5                 "model": {
 6                         "scale": 0.5
 7                 },
 8                 "display": {
 9                         "position": "right",
10                         "width": 180,
11                         "height": 260,
12                         "hOffset": 0,
13                         "vOffset": -20
14                 },
15                 "mobile": {
16                         "show": true,
17                         "scale": 0.5
18                 },
19                 "react": {
20                         "opacityDefault": 0.7,
21                         "opacityOnHover": 0.2
22                 }
23         });
24 }, 1000)
25 </script>
复制代码

写个延时是为了等资源加载完,不然会报找不到 L2Dwidget 对象等错误。

当然也可以自定义其他选项,需要自己去踩坑了!

就这样,博客右下角就会添加实时关注你的萝莉啦!

posted @   电子猫  阅读(8588)  评论(14编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
博客已经出生了2570天8小时36分15秒
点击右上角即可分享
微信分享提示