添加依赖

在页脚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. asmx 、Web Service、Web API

    asmx .Web Service.Web API asmx 是WEB服务文件 asmx.cs里有相关代码 属于B/S形式,用SOAP方式HTTP访问,用XML返回 可以返回基础类型和PUBLIC结构 ...

  2. mongo gridfs 学习

    一.mongo是啥东西? MongoDB 是由C++语言编写的,基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. 二.gridfs是啥东西? 1.MongoD ...

  3. 514 ，css不同选择器的权重（css层叠的规则）

    !important规则最重要,大于其它规则 行内样式规则,加1000 eg,<html>   <head>  </head>  <body>    & ...

  4. HDU多校第三场 Hdu6606 Distribution of books 线段树优化DP

    Hdu6606 Distribution of books 题意 把一段连续的数字分成k段,不能有空段且段和段之间不能有间隔,但是可以舍去一部分后缀数字,求\(min(max((\sum ai ))\ ...

  5. winform学习（7）Label控件、Button控件、TextBox控件

    Label控件是System.Windows.Forms.Label 类提供的控件. 作用:主要用来提供其他控件的描述文字,例如:登录窗体上的用户名.密码(输入框前面的字) Button控件是Syst ...

  6. （转）Java中的String与常量池

    Java中的String与常量池 转自:http://developer.51cto.com/art/201106/266454.htm string是java中的字符串.String类是不可变的,对 ...

  7. HDU2121 Ice_cream’s world II （最小树形图）

    在建图的时候对原图进行加边 建立一个超级源点~ #include<cstdio> #include<algorithm> #include<cstring> usi ...

  8. 吴裕雄 python 机器学习——集成学习随机森林RandomForestRegressor回归模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...

  9. Drawer 侧边栏、以及侧边栏内 容布局

    一.Flutter Drawer 侧边栏 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显 ...

  10. Linux 内核内存池

    内核中经常进行内存的分配和释放.为了便于数据的频繁分配和回收,通常建立一个空闲链表——内存池.当不使用的已分配的内存时,将其放入内存池中,而不是直接释放掉. Linux内核提供了slab层来管理内存的 ...