【2024最新博客美化教程重置版】在网页中使用L2Dwidget二次元可动人物前端插件,让动漫美女伴随你左右!

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

L2Dwidget 二次元可动人物前端插件 🔥

我们其实还可以通过如何直接在博客或前端html网页上添加L2D网页二次元可动人物来美化我们的页面!

主要是使用L2Dwidget.js

参考文档

官方文档 https://github.com/EYHN/hexo-helper-live2d/blob/HEAD/README.zh-CN.md

快速使用方法:

首先我们要引入L2Dwidget.js插件

https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js

也可以直接复制以下代码到html页面中即可

代码如下

<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-miku@1.0.5/assets/miku.model.json",
            "scale": 1
        },
        "display": {
            "position":"right",
            "width": 300,
            "height": 500,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,
            "opacityOnHover": 0.1
        }
    });
</script>

根据自己的喜好去设置参数,比如可以修改宽高widthheight来显示人物的大小,或者是鼠标移动到人物上的透明度,也可以修改人物在页面出现的位置. 这些就看自己的喜好了!

效果如下

模型人物切换

其实修改模型人物也很简单,在参数设置中我们找到model下面的jsonPath参数

例如:

"model": {
    "jsonPath": "https://unpkg.com/模型名称@1.0.5/assets/miku.model.json",
    "scale": 1
},

也就是这一段配置代码, 比如说当前的模型要设置为live2d-widget-model-miku

那么则将以上代码的模型名称更换为live2d-widget-model-miku 就可以了!

而且模型有很多,大家也可以直接复制地址也可以, 我经常使用的是如下几个模型:

如下表:

名称配置地址
小帅哥https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
小可爱(女)https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱(男)https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
黑猫https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
白猫https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.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

基本上这几个模型完全足够你显摆了! 😈😈😈

模型人物设置到博客

那么如果我们要把这个人物加入到博客园里面应该怎么办呢!

其实也很简单, 打开你自己的博客园进入到后台,点击设置

如图

然后往下拉,找到博客侧边栏公告这个选项, 把之前的代码加入进去就可以了!

如图

最后点击保存,再到博客首页去看看效果吧!

如图

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537584.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 中文官方教程 2022 版(三十四)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 长期持久性 原文&#xff1a;docs.oracle.com/javase/tutorial/javabeans/advanced/longpersistence.html 长期持久性是一种模型&#xff0c;可以将 bean 保存为 XML 格式。 有关 XML 格式和如何为非 be…

SQL执行流程图文分析:从连接到执行的全貌

SQL执行总流程 下面就是 MySQL 执行一条 SQL 查询语句的流程&#xff0c;也从图中可以看到 MySQL 内部架构里的各个功能模块。 MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层&#xff0c; Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在…

员工管理系统!(免费获取源码)

​今天给大家分享一套基于SpringbootVue的员工管理系统源码&#xff0c;在实际项目中可以直接复用。(免费提供&#xff0c;文末自取) 一、系统运行图 1、登陆页面 2、后台管理页面 3、职工管理 4、请假审批管理 二、系统搭建视频教程 源码免费领取方式 后台私信回复员工即可…

从大量数据到大数据,King’s SDMS仪器数据采集及科学数据管理系统的应用

对于实验室或检测机构&#xff0c;仪器设备是所有业务开展的基础&#xff0c;数据则是核心命脉&#xff0c;而传统的仪器设备原始数据收集方式&#xff0c;效率低耗时长、操作流程不规范、不易保存与查找、错误率高、易篡改等成了制约检测机构持续高速发展的瓶颈和弊端&#xf…

kvm虚拟机磁盘镜像加密

一、qcow2的aes加密 低版本的qemu能够支持对qcow2文件进行aes加密的方式&#xff0c;例如对一个已经存在的磁盘文件test.qcow2&#xff0c;可以将其转换为经过加密的qcow2文件。 qemu-img convert -O qcow2 --object secret,idsec0,data123456 -o encryptionon,encrypt.key-s…

springboot发送邮件

很久之前就想写一个总结的&#xff0c;一直没写&#xff0c;今天刚好又碰见了发送邮箱验证码的需求&#xff0c;刚好记录一波 一.核心依赖如下&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par…

Python 全栈体系【四阶】(二十九)

第五章 深度学习 四、TensorFlow 5. 张量及基本运算 5.1 张量的阶与形状 阶&#xff1a;张量的维度&#xff08;数方括号的层数&#xff09; 形状表示方法 0 维&#xff1a;( )1 维&#xff1a;(5)&#xff0c;1 行 5 个元素2 维&#xff1a;(2,3)&#xff0c;2 行 3 列3…

redis数据类型介绍

Redis是一种开源的高性能内存数据存储系统&#xff0c;支持多种数据结构的操作。下面是Redis支持的五种数据类型介绍&#xff1a; 1. 字符串&#xff08;string&#xff09;&#xff1a;Redis中字符串是二进制安全的&#xff0c;允许存储任何格式的数据&#xff0c;如图片、视频…

Springboot集成RabbitMq+延时队列

1. 引入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2.配置yml 2.1 配置生产者yml spring:rabbitmq:host: localhostport: 5672virtual-host: …

UE 模型学习

1. UE中任何模型都是有多个三角面构成的&#xff0c;模型有一个顶点数组&#xff0c;根据右手螺旋定则和三个顶点顺序确定三角面的法线。 注&#xff1a;当三角面的法线方向与相机法线方向相同时&#xff0c;此时看不见三角面&#xff1b;当两法线方向相反&#xff0c;此时才能…

数据结构DAY5--二叉树相关流程

流程有&#xff1a;创建->遍历->得到信息->销毁 创建 根据先序遍历的流程以及对叶子结点的左后驱结点和右后驱结点以#号替代的原则&#xff0c;写出一个数组&#xff0c;并建立一个结构体&#xff0c;包括数据域&#xff0c;结构体类型的左后驱结点和右后驱结点指针…

数字证书在网络安全中的关键作用与日常应用

在当今数字化的时代&#xff0c;网络安全问题日益凸显&#xff0c;保护数据安全和用户隐私成为了人们关注的焦点。数字证书作为一种重要的网络安全技术&#xff0c;其在网络安全中扮演着关键的角色&#xff0c;并且在我们的日常生活中有着广泛的应用。现在给大家介绍简单介绍下…

blender怎么用GPU渲染?blender GPU云渲染推荐

在三维建模和渲染领域&#xff0c;Blender以其强大的功能和免费开源的特点广受好评。GPU渲染作为提升渲染效率的关键技术&#xff0c;越来越受到用户的关注。本文将详细介绍如何在Blender中设置并利用GPU进行渲染&#xff0c;以及探索其云渲染的可能性&#xff0c;助力用户高效…

装机指导。

everything winrar snipaste cmake git tortoisegit tortoisesvn inno setup vs2022 安装的时候注意sdk路径一定要默认&#xff01;&#xff01; 否则你会发现在你的sdk安装路径的根盘符下会多出一个Windows Kits&#xff0c;强迫症接受不了 默认的会跟已有的装在一起…

无法用raven-js,如何直接使用TraceKit标准化错误字符串(一次有趣的探索)

引子&#xff1a;网上三年前&#xff08;2020&#xff09;的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器&#xff0c;便于查看错误来源。 **but&#xff1a;**到处找了一下raven-js&#xff0c;已经没有官方出处了&#xff0c;只在Sentry的源码仓库里发现…

林江院长赴长沙见证爱尔眼科巩膜镜技术诊疗门诊启动仪式

近日&#xff0c;爱尔眼科“巩膜镜技术诊疗门诊、视觉康复及训练门诊”启动会在湖南长沙顺利举行。旨在通过成立爱尔眼科巩膜镜技术诊疗门诊、视觉康复及训练门诊&#xff0c;为有需要的疑难屈光不正患者提供全新的诊疗途径&#xff0c;为各年龄阶段人群视觉问题提供更全面的个…

[数据结构初阶]二叉树

我们在前两篇博客中主要介绍了堆及其应用&#xff0c;针对的对象堆是完全二叉树&#xff0c;存储方式采用顺序结构存储的方式。 那么好的&#xff0c;这篇博客我们浅谈二叉树的链式存储&#xff0c;针对的对象是二叉树&#xff0c;并不局限于完全二叉树了&#xff01; 我们先来…

PlayerSettings.WebGL.emscriptenArgs设置无效的问题

1&#xff09;PlayerSettings.WebGL.emscriptenArgs设置无效的问题 2&#xff09;多个小资源包合并为大资源包的疑问 3&#xff09;AssetBundle在移动设备上丢失 4&#xff09;Unity云渲染插件RenderStreaming&#xff0c;如何实现多用户分别有独立的操作 这是第381篇UWA技术知…

MySOL之旅--------MySQL数据库基础( 3 )

本篇碎碎念:要相信啊,胜利就在前方,要是因为一点小事就停滞不前,可能你也不适合获取胜利,成功的路上会伴有泥石,但是走到最后,你会发现身上的泥泞皆是荣耀的勋章! 今日份励志文案: 凡是发生皆有利于我 目录 查询(select) 1.全列查询 2.指定列查询 3.查询字段为表达式 ​编…

PVE系统的安装

一.PVE系统的安装 前置准备环境:windows电脑已安装Oracle VM VirtualBox,电脑支持虚拟化,且已经开启,按住ctrl+shift+ESC打开任务管理器查看是否开启,如果被禁用,可进入BIOS开启虚拟化,重启电脑后再进行后续操作。本步骤选用windows10安装VirtualBox,版本为7.0.8。 …