本文最后更新于天前,内容可能已不再适用!

本篇文章教大家如何给自己的网页添加一个类似右下角的 Live2D 看板娘。

如果你的模型是moc3格式的,请参考给你的网页添加一个 moc3 格式的 Live2d 模型

使用插件

如果你的博客使用了WordPress,Typecho,EmlogZ-Blog等框架,可以直接下载大佬们的插件使用

不使用插件

如果你的网站没有使用有现成插件的框架,可以直接将代码写入 html

依赖类库

  • JQuery (waifu-tips.js)
  • JQuery UI (仅实现拖拽效果需要)

使用方法

下载源码

将 assets 文件夹解压到网站目录(这里以解压到根目录为例)

引入 css 及 js 文件

  • autoload.js 引入
    • "</body>"前引入autoload.js
  • 常规方式引入
    • "</head>"前引入waifu.css样式表
    • "</body>"前引入waifu-tips.jslive2d.js
    • "</body>"前插入 初始化 JS,可在 初始化前 设置参数
<html>
<head>

        · · ·   · · ·

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

        · · ·   · · ·

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

    <script type="text/javascript">
        live2d_settings['modelId'] = 1;
        live2d_settings['modelTexturesId'] = 87;
    	initModel("https://www.example.com/path/to/waifu-tips.json")
    </script>
</body>
</html>

定制属于你的看板娘

  • 修改waifu-tips.js顶部的设置参数(或初始化前设置)
  • 修改waifu-tips.json,定制看板娘提示语,打造专属看板娘

设置参数

Tips:waifu-tips.js已自带默认参数,如无特殊要求可跳过

  • 后端接口
    • live2d_settings['modelAPI']看板娘 API 地址,默认值'//live2d.fghrsh.net/api/'
    • live2d_settings['tipsMessage']提示语读取路径,默认值'waifu-tips.json'(一般在initModel时指定)
    • live2d_settings['hitokotoAPI']一言 API 接口,可选'lwl12.com''hitokoto.cn''jinrishici.com'(古诗词)
  • 默认模型
    • live2d_settings['modelId']默认模型(分组) ID,可在 Demo 页[F12]呼出控制台(Console)找到
    • live2d_settings['modelTexturesId']默认材质(模型) ID,可在 Demo 页[F12]呼出控制台(Console)找到
  • 工具栏设置
    • live2d_settings['showToolMenu'], 显示工具栏,true|false
    • live2d_settings['canCloseLive2d'], 关闭看板娘 按钮,true|false
    • live2d_settings['canSwitchModel'], 切换模型 按钮,true|false
    • live2d_settings['canSwitchTextures'], 切换材质 按钮,true|false
    • live2d_settings['canSwitchHitokoto'], 切换一言 按钮,true|false
    • live2d_settings['canTakeScreenshot'], 看板娘截图 按钮,true|false
    • live2d_settings['canTurnToHomePage'], 返回首页 按钮,true|false
    • live2d_settings['canTurnToAboutPage'],跳转关于页 按钮,true|false
  • 模型切换模式
    • live2d_settings['modelStorage'],记录 ID (刷新后恢复),true|false
    • live2d_settings['modelRandMode'],模型切换,可选'rand'(随机) |'switch'(顺序)
    • live2d_settings['modelTexturesRandMode'],材质切换,可选'rand'|'switch'
  • 提示消息选项
    • live2d_settings['showHitokoto'],空闲时一言,true|false
    • live2d_settings['showF12Status'],控制台显示加载状态,true|false
    • live2d_settings['showF12Message'],提示消息输出到控制台,true|false
    • live2d_settings['showF12OpenMsg'],控制台被打开触发提醒,true|false
    • live2d_settings['showCopyMessage'],内容被复制触发提醒,true|false
    • live2d_settings['showWelcomeMessage'],进入面页时显示欢迎语,true|false
  • 看板娘样式设置
    • live2d_settings['waifuSize'],看板娘大小,例如'280x250''600x535'
    • live2d_settings['waifuTipsSize'],提示框大小,例如'250x70''570x150'
    • live2d_settings['waifuFontSize'],提示框字体,例如'12px''30px'
    • live2d_settings['waifuToolFont'],工具栏字体,例如'14px''36px'
    • live2d_settings['waifuToolLine'],工具栏行高,例如'20px''36px'
    • live2d_settings['waifuToolTop'],工具栏顶部边距,例如'0px''-60px'
    • live2d_settings['waifuMinWidth']面页小于 指定宽度 隐藏看板娘,例如'disable'(停用),'768px'
    • live2d_settings['waifuEdgeSide']看板娘贴边方向,例如'left:0'(靠左 0px),'right:30'(靠右 30px)
    • live2d_settings['waifuDraggable']拖拽样式,可选'disable'(禁用),'axis-x'(只能水平拖拽),'unlimited'(自由拖拽)
    • live2d_settings['waifuDraggableRevert'],松开鼠标还原拖拽位置,true|false
  • 其他杂项设置
    • live2d_settings['l2dVersion'],当前版本 (无需修改)
    • live2d_settings['l2dVerDate'],更新日期 (无需修改)
    • live2d_settings['homePageUrl'],首页地址,可选'auto'(自动),'{URL 网址}'
    • live2d_settings['aboutPageUrl'],关于页地址,'{URL 网址}'
    • live2d_settings['screenshotCaptureName'],看板娘截图文件名,例如'live2d.png'

定制提示语

Tips:waifu-tips.json已自带默认提示语,如无特殊要求可跳过

  • "waifu"系统提示
    • "console_open_msg"控制台被打开提醒(支持多句随机)
    • "copy_message"内容被复制触发提醒(支持多句随机)
    • "screenshot_message"看板娘截图提示语(支持多句随机)
    • "hidden_message"看板娘隐藏提示语(支持多句随机)
    • "load_rand_textures"随机材质提示语(暂不支持多句)
    • "hour_tips"时间段欢迎语(支持多句随机)
    • "referrer_message"请求来源欢迎语(不支持多句)
    • "referrer_hostname"请求来源自定义名称(根据 host,支持多句随机)
    • "model_message"模型切换欢迎语(根据模型 ID,支持多句随机)
    • "hitokoto_api_message",一言 API 输出模板(不支持多句随机)
  • "mouseover"鼠标触发提示(根据 CSS 选择器,支持多句随机)
  • "click"鼠标点击触发提示(根据 CSS 选择器,支持多句随机)
  • "seasons"节日提示(日期段,支持多句随机)

使用浏览器插件在任何网页上都显示

安装插件:https://www.tampermonkey.net/

安装脚本:live2D 看板娘

说明

最后修改:2021-09-01 11:12:36
如果觉得我的文章对你有用,请随意赞赏