您现在的位置是:首页 > 学无止境 > 各种折腾各种折腾

给博客增加一个萌萌哒看板娘-基于live2d

2021-07-15 11:59:11各种折腾人已围观

简介给博客增加一个萌萌哒看板娘-基于live2d之前在别的博客上看到了萌萌哒的看板娘,很有意思,就准备自己也增加一个,作为一个不会写程序的人,当然是坚持“拿来主义”,去网

给博客增加一个萌萌哒看板娘-基于live2d

之前在别的博客上看到了萌萌哒的看板娘,很有意思,就准备自己也增加一个,作为一个不会写程序的人,当然是坚持“拿来主义”,去网上找一个就好了。

开始确实踩了很坑,各种问度娘,找相关的博客介绍。最终找了自己能理解的并使用的版本。还有博客美化这种事,只有第一次和无数次,还是适可而止。要不然都把大把时光浪费掉了。
先看图

【版权声明】版权归原著所有,本次只作为分享和记录,如有侵权,请联系陵小宇删除。

程序包下载

原参考与下载地址:https://github.com/fghrsh/live2d_demo

个人打包下载地址:共享地址:http://yun.lingyuyy.com/index.php?share/file&user=1&sid=YCu3DwtA 提取密码:1352
 

步骤一:复制链接下载相关的文件,并解压。目录文件如下:

demo1-default.html // 经常引用Demo

demo2-autoload.html // autoload.js Demo

demo3-waifu-tips.html // 内置waifu-tips Demo

Assets//资源

  autoload.js // 自动异步加载

  flat-ui-icons-regular.eot // 平面 UI 字体

  flat-ui-icons-regular.svg // 平面 UI 字体

  flat-ui-icons-regular.ttf // 平面 UI 字体

  flat-ui-icons-regular.woff // 平面 UI 字体

  live2d.js // Live2D 核心

  waifu-tips.js // Live2D 看板娘扩展

  waifu-tips.json // Live2D 看板娘提示语

  waifu.css // Live2D 看板娘样式表

  waifu.min.css //Live2D 看板娘样式表

步骤二:把相关文件和代码添加到,网页中

实现方式一(常规方式) 1.引入依赖类库和css样式表

JQuery (waifu-tips.js)

JQuery UI (仅实现 拖拽效果 需要)

2.代码实现
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D 看板娘 v1.4 / Demo 1</title>
    <!-- waifu.min.css样式 -->
    <link rel="stylesheet" type="text/css" href="assets/waifu.min.css"/>
</head>
<body>   
    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="assets/jquery.min.js?v=3.3.1"></script>
    
    <!-- 实现拖动效果,需引入 JQuery UI -->
    <script src="assets/jquery-ui.min.js?v=1.12.1"></script> 
    <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="assets/waifu-tips.min.js"></script>
    <script src="assets/live2d.min.js"></script>
    <script type="text/javascript">
        /* 可直接修改部分参数 */
        live2d_settings['modelId'] = 1;                  // 默认模型 ID
        live2d_settings['modelTexturesId'] = 87;         // 默认材质 ID
        live2d_settings['modelStorage'] = false;         // 不储存模型 ID
        live2d_settings['canCloseLive2d'] = false;       // 隐藏 关闭看板娘 按钮
        live2d_settings['canTurnToHomePage'] = false;    // 隐藏 返回首页 按钮
        live2d_settings['waifuSize'] = '600x535';        // 看板娘大小
        live2d_settings['waifuTipsSize'] = '570x150';    // 提示框大小
        live2d_settings['waifuFontSize'] = '30px';       // 提示框字体
        live2d_settings['waifuToolFont'] = '36px';       // 工具栏字体
        live2d_settings['waifuToolLine'] = '50px';       // 工具栏行高
        live2d_settings['waifuToolTop'] = '-60px';       // 工具栏顶部边距
        live2d_settings['waifuDraggable'] = 'axis-x';    // 拖拽样式
        /* 在 initModel 前添加 */
        initModel("assets/waifu-tips.json?v=1.4.2")
    </script>
</body>
</html>

实现方式二(autoload.js 引入)

1. 在前引入autoload.js

2. 修改autoload.js文件路径,在autoload.js文件中设置相关的参数
 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D 看板娘 v1.4 / Demo 2</title>
</head>
<body>      
    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="assets/jquery.min.js"></script> 
    <!-- 实现拖动效果,需引入 JQuery UI -->
    <script src="assets/jquery-ui.min.js"></script>
    <!-- 使用 aotuload.js 引入看板娘 -->
    <script src="assets/autoload.js"></script>
</body>
</html>

# autoload.js(注意对应的文件路径)
try {
    $("<link>").attr({href: "assets/waifu.min.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
    $('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>');
    $.ajax({url: 'assets/waifu-tips.min.js',dataType:"script", cache: true, async: false});
    $.ajax({url: 'assets/live2d.min.js',dataType:"script", cache: true, async: false});
    /* 可直接修改部分参数 */
    live2d_settings['hitokotoAPI'] = 'hitokoto.cn';  // 一言 API
    live2d_settings['modelId'] = 5;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
    live2d_settings['modelStorage'] = false;         // 不储存模型 ID
    /* 在 initModel 前添加 */
    initModel('assets/waifu-tips.json');
} catch(err) { console.log('[Error] JQuery is not defined.') }

参数设置:

在waifu-tips.js文件修改自己需要的参数(自带默认参数,无特殊要求可以跳过)

后端接口
 

live2d_settings['modelAPI']= '//live2d.fghrsh.net/api/';// 自建 API 修改这里
live2d_settings['tipsMessage']= 'waifu-tips.json';// 同目录下可省略路径
live2d_settings['hitokotoAPI']= 'lwl12.com';// 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)

默认看板娘模型

live2d_settings['modelId'] = 1;  // 默认模型 ID,可在Demo 页[F12]呼出控制台(Console)找到
live2d_settings['modelTexturesId']= 53; // 默认材质 ID,可在Demo 页[F12]呼出控制台(Console)找到

工具栏设置

live2d_settings['showToolMenu']         = true;         // 显示 工具栏,可选 true(真), false(假)
live2d_settings['canCloseLive2d']       = true;         // 显示 关闭看板娘  按钮,可选 true(真), false(假)
live2d_settings['canSwitchModel']       = true;         // 显示 模型切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchTextures']    = true;         // 显示 材质切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchHitokoto']    = true;         // 显示 一言切换    按钮,可选 true(真), false(假)
live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮,可选 true(真), false(假)
live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮,可选 true(真), false(假)
live2d_settings['canTurnToAboutPage']   = true;         // 显示 跳转关于页  按钮,可选 true(真), false(假)

模型切换

live2d_settings['modelStorage']         = true;         // 记录 ID (刷新后恢复),可选 true(真), false(假)
live2d_settings['modelRandMode']        = 'switch';     // 模型切换,可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换,可选 'rand'(随机), 'switch'(顺序)

提示消息选项

ive2d_settings['showHitokoto']         = true;         // 显示一言
live2d_settings['showF12Status']        = true;         // 显示加载状态
live2d_settings['showF12Message']       = false;        // 显示看板娘消息
live2d_settings['showF12OpenMsg']       = true;         // 显示控制台打开提示
live2d_settings['showCopyMessage']      = true;         // 显示 复制内容 提示
live2d_settings['showWelcomeMessage']   = true;         // 显示进入面页欢迎词

看板娘样式设置h2

live2d_settings['waifuSize']  = '280x250';    // 看板娘大小,例如 '280x250', '600x535'
live2d_settings['waifuTipsSize']        = '250x70';     // 提示框大小,例如 '250x70', '570x150'
live2d_settings['waifuFontSize']        = '12px';       // 提示框字体,例如 '12px', '30px'
live2d_settings['waifuToolFont']        = '14px';       // 工具栏字体,例如 '14px', '36px'
live2d_settings['waifuToolLine']        = '20px';       // 工具栏行高,例如 '20px', '36px'
live2d_settings['waifuToolTop']         = '0px'         // 工具栏顶部边距,例如 '0px', '-60px'
live2d_settings['waifuMinWidth']        = '768px';      // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide']        = 'left:0';     // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable']       = 'disable';    // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置,可选 true(真), false(假)

其他选项设置

live2d_settings['l2dVersion'] = '1.4.2';        // 当前版本
live2d_settings['l2dVerDate'] = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl']= 'auto';       // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl']         = 'https://www.fghrsh.net/post/123.html';   // 关于页地址, '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'

定制个性提示语

文件: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" 节日提示(日期段,支持多句随机)

工具栏样式设置

文件waifu.min.css 设置相关css样式

参考文献:

https://www.fghrsh.net/post/123.html(网页添加live2d看板娘)

https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02/(给博客添加能动的看板娘(Live2D))

Tags:看板娘

很赞哦! ()

相关文章

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计14篇文章
  • 浏览统计462次浏览
  • 评论统计2个评论
  • 微信公众号:扫描二维码,关注我们