博客网站添加Live2D看板娘动漫人物

最近偶然发现的，这大看板娘应用，觉得提昂好看的！就下载了源码！尝试增加到自己的博客！

虽然加上了但是很多功能不能用！勉强看看算了！

H5ES~8KR@I~@3H[KPVU)X$U.png

查看加载样式： 加载样式一 加载样式二 加载样式三

Z]FE}8DKAN`YK[4PMARN620.png

源码和加载方法！

加进 header.php

Markup

<!-- 加载样式 --><link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>

加进 footer.php（须 jQuery 支持）

Markup

<div class="waifu">
    
    <!-- 提示框 -->
    <div class="waifu-tips"></div>
    
    <!-- 看板娘画布 -->
    <canvas id="live2d" class="live2d"></canvas>
    
    <!-- 工具栏 -->
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
    </div><script src="path/to/waifu-tips.js"></script><script src="path/to/live2d.js"></script><!-- 初始化看板娘，加载 waifu-tips.json --><script type="text/javascript">/* 可直接修改部分参数 */
    live2d_settings['modelId'] = 5;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID/* 在 initModel 前添加 */initModel("https://www.example.com/path/to/waifu-tips.json")</script>

或实现自动加载，在 footer.php 的最后加上

Markup

<script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>

autoload.js

JavaScript

// 加载 CSS$("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');// 插入 DIV$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');// 加载 JS$.ajax({
	url: 'https://www.example.com/path/to/waifu-tips.js',
	dataType:"script",
	cache: true,async: false});$.ajax({
	url: 'https://www.example.com/path/to/live2d.js',
	dataType:"script",
	cache: true,async: false});// 初始化看板娘，加载 waifu-tips.json/* 可直接修改部分参数 */live2d_settings['modelId'] = 5;                  // 默认模型 IDlive2d_settings['modelTexturesId'] = 1;          // 默认材质 ID/* 在 initModel 前添加 */initModel('https://www.example.com/path/to/waifu-tips.json');

_BX~R``[B7726V]349QM3SK.png

方法引用自：FGHRSH 的博客

源码下载：Live2D 看板娘下载

20210112重更最新方法

一、下载压缩文件：

waifu.css（看板娘在页面的位置（左边）以及大小）

waifu1.css（看板娘在页面的位置（右边）以及大小）（看你喜欢放在哪边咯）

waifu-tips.js（看板娘的语言设置）

live2d.min.js（一些点击之后的动作）

* flat-ui.min.css（看板娘右边菜单项 PS：不需要可以不配置）

二、将压缩包的文件上传到博客：

三、在博客侧边栏公告添加如下代码：（PS：需要申请开通（支持JS代码））

<head>

//上面红色这段放在</head>的前面一般放在模板文件footer.html里面

</head>

<body>

</div>

上面红色部分放在模板文件footer.html的</body>上面即可！

</body>

</html>

下载地址：点此下载

Hackyh‘Blog