添加依赖

在页脚HTML代码的地方添加下面的代码：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

初始化

<script>

    L2Dwidget.init({

        "model": {

　　　　　　　//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型

            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",

            "scale": 1

        },

        "display": {

            "position": "right", //看板娘的表现位置

            "width": 150,  //小萝莉的宽度

            "height": 300, //小萝莉的高度

            "hOffset": 0,

            "vOffset": -20

        },

        "mobile": {

            "show": true,

            "scale": 0.5

        },

        "react": {

            "opacityDefault": 0.7,

            "opacityOnHover": 0.2

        }

    });

</script>

多种可供选择

live2d-widget-model-chitose

live2d-widget-model-epsilon2_1

live2d-widget-model-gf

live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)

live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)

live2d-widget-model-haruto

live2d-widget-model-hibiki

live2d-widget-model-hijiki

live2d-widget-model-izumi

live2d-widget-model-koharu

live2d-widget-model-miku

live2d-widget-model-ni-j

live2d-widget-model-nico

live2d-widget-model-nietzsche

live2d-widget-model-nipsilon

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-z16

修改下图的地方就可以更换啦：

最近新发现了一个

添加页尾html代码：

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Live2D</title>

        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ECJTUACM-873284962/waifu.css"/>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    </head>

    <body>

        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/ECJTUACM-873284962/waifu.css">

        <div class="waifu" id="waifu">

            <div class="waifu-tips" style="opacity: 1;"></div>

            <canvas id="live2d" width="280" height="250" class="live2d"></canvas>

            <div class="waifu-tool">

            </div>

        </div>

        <script src="https://files.cnblogs.com/files/ECJTUACM-873284962/live2d.js"></script>

        <script src="https://files.cnblogs.com/files/ECJTUACM-873284962/waifu-tips.js"></script>

        <script type="text/javascript">initModel()</script>

    </body>

    </html>

    </div>

</body>

</html>

~~~~~ END ~~~~~

给博客页面添加 live2d 小萝莉的更多相关文章

  1. Live2D 博客页面添加板娘

    偶然看到了live2d,神奇的二次元呀 在页脚Html代码中添加如下代码即可: <link rel="stylesheet" type="text/css" ...

  2. 博客美化—添加萌萌的live2D看板娘(不能再简单了)

    看着很多博客都有live2D的萌萌哒看板娘,我闲着有空说干就干. 从参考博客的附件中下载资源文件 waifu.css waifu-tips.js live2d.js flat-ui.min.css// ...

  3. PHP制作个人博客-广告位添加与调用 推荐文章数据调取

    上一节博客的导航我们已经动态调取,这一节我们主讲一下如何根据页面布局,后台添加广告位,及模板上动态调取广告.博客推荐文章的数据调用. 首先我们在云码博客的后台添加10条左右的测试数据,thinkcmf ...

  4. 给自己的博客上添加个flash宠物插件

    前言 最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 正文 下面就简单介绍下如何在博客园 ...

  5. 如何给自己的博客上添加个flash宠物插件

    最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 多次差找资料后,终于在http://ww ...

  6. 在CSDN博客中添加量子恒道统计功能的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 什么是量子恒道统计?量子恒道统计是一套免费的网站流量统计分析系统.致力于为所有个人站长.个人博主.所有网站管理者.第三 ...

  7. Confluence 6.15 博客页面（Blog Posts）宏参数

    参数是让你可以用来控制宏的格式和输出的选项.在 Confluence 存储格式或者 Wiki 标记(wikimarkup)中使用的参数名与在宏浏览器中使用的标签名是不同的,在下面我们将会用括号列出  ...

  8. Confluence 6.15 博客页面（Blog Posts）宏

    博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中:  从编辑工具栏中,选择 插入(Insert)  ...

  9. 使用vuepress搭建GitHub pages静态博客页面

    vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...

随机推荐

  1. 6.mybatis----日志工厂

    日志工厂 如果一个数据库操作出现了异常,我们需要排错,所以说日志就是最好的助手 曾经:sout,debug 现在:日志工厂 在Mybatis中具体使用哪一个日志,在设置中设定 咋设定? 在mybati ...

  2. 最大/最小de K个数/第K个数

    题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 思路 堆排序 收获 用优先队列实现最大最小堆 注意下列代码中优先队列 ...

  3. 安装Docker：解决container-selinux >= 2.9问题

    1.安装Docker要求Centos内核版本高于3.10:通过uname  -r查看当前系统的内核版本 uname  -r 2.使用root登陆系统,确保yum包保持更新到最新: sudo yum  ...

  4. 计算机系统概论之CPU（central processing unit）

    CPI表示每条指令(Instruction)周期数,即执行一条指令所需的平均时钟周期数.可用下式计算: CPI=执行某段程序所需的CPU(Centrol Processing Unit)时钟周期数/程 ...

  5. k8s 部署 custom-metrics-apiserver 时使用 secret 保存 ca 证书遇到的问题

    部署 k8s-prometheus-adapter 的 custom-metrics-apiserver 时,pod 总是启动失败,对应的错误日志: unable to install resourc ...

  6. Codeforces Round #599 (Div. 2) C. Tile Painting

    Ujan has been lazy lately, but now has decided to bring his yard to good shape. First, he decided to ...

  7. 短网址（t.cn、url.cn）生成，网址缩短接口API

    简要说明 短网址api接口有很多格式,不同的接口生成的短网址格式也不同,比如常见的t.cn.url.cn.w.url.cn等格式.总而言之短网址接口就是用来将一个冗长的链接缩短成10个字符以内的短链接 ...

  8. 题解【POJ2955】Brackets

    Description We give the following inductive definition of a "regular brackets" sequence: t ...

  9. Java - Test - TestNG: Idea 添加 TestNG 依赖

    1. 概述 Idea 开发的 maven 添加 testng 依赖 2. 背景 最近复习 TestNG 尝试搭建环境 发现教材和网上很多的教程, 都是 eclipse 的 我用的是 idea 这个貌似 ...

  10. GBK与Unicode的转换

    一.GBK转换到Unicode编码 std::string Gbk2Unicode(std::string &strValue) { std::string strReturn; unsign ...