不用插件自己搭一个可以换人物的看板娘

前面我们介绍了几个好看的二次元老婆，但是这些还是有一点点不足，就是不能同时切换不同人物，在写为你的博客添加二次元老婆的时候，我无意发现了有一个大佬的项目，所以我就借鉴了一下他的项目改成了现在这个样子。废话不多说，现在开始教程

【本教程来自小游网】

先贴出大佬的文章地址，因为这个项目是采用前后端分离的模式，所以分为两部分：前端代码的搭建以及后台 API 的搭建。当然作者也是贴出了现成的 API 调用地址，但是我们最好还是自己搭建一个 API 服务器，因为这样就可以自己修改和添加模型（别人的接口请求量太多了，我们还是体谅一下别人吧）。

好的现在开始教程：

先到作者的 github 上面下载前端代码

下载好后可以直接放到我们服务器的根目录，接下来我们就可以开始把调用代码嵌入到我们的网页中去。

目前有两种方式：直接嵌入或者调用 js 代码自动嵌入

先来讲一下直接嵌入，先嵌入如下代码到头部 (注意修改 waifu.css 的地址)：

<link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>

然后在加入如下代码到尾部（注意：须 jQuery 支持）

<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>

当然，我们可以直接自动加载，如果你要自动加载的话，前面两部都不需要做，直接在尾部嵌入如下代码

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

然后在修改一下 autoload.js，把里面的引用文件改一下路径。然后就可以直接使用了，如果不想搭 API 服务器的可以先走了，下面我们讲一下怎么搭建 API 服务器 (搭建自己 API 的好处就是可以自己添加模型还可以节作者服务器的负担)：

注意

这里说一下可能遇到的坑 1. 要使用看板娘我们就必须让我们的网页有 jQuery，这里就是直接引入 jQuery 文件就行了，具体自己到百度上搜

2. 如果你选择的是自动引入，我们那个引入时需要修改路径，autoload.js 里面的几个文件必须是你自己网站的完整路径（要加上网址的完整路径）。

3.autoload.js 里面有一个文件是写错了的，waifu.css 这个文件中间没有 min，这个要特别注意。

首先先到作者的 github 上面下载模型切换的 API 源码

下载好好直接上传到自己服务器的根目录即可，比如我们在自己的根目录下新建一个 API 的文件夹，API 源码就放放在里面。

然后到 waifu-tips.js 文件夹里面修改一下，改成自己的 API 地址

不用插件自己搭一个可以换人物的看板娘

接下来，就可以直接访问自己的网站查看效果了。当然这个文件里面可以修改自己看板娘的大小。

注意：你需要先清除浏览器的数据，然后才能看到。

还有，这里在写文件路径的时候最好加上自己的网址，单纯使用相对路径好像没用。(可能是我相对路径引用错了吧。) 当然如果你想调节看板娘的大小的话可以修改 wifu-tip 的那个 js 文件。

最后给大家看下效果

不用插件自己搭一个可以换人物的看板娘

注意

赞过：

相关推荐

本站之宝 - 二次元看板娘设置教程

关于新站域名如何促进 SEO 快速收录方法

网站长期遭受 cc 和 DOS 攻击防御策略方案

分享一款好看的引导页源码

共有 0 条评论

不用插件自己搭一个可以换人物的看板娘

注意

分享到：

赞过：

相关推荐

本站之宝 - 二次元看板娘设置教程

关于新站域名如何促进 SEO 快速收录方法

网站长期遭受 cc 和 DOS 攻击防御策略方案

分享一款好看的引导页源码

共有 0 条评论