live2d内嵌html,博客(网页)添加 Live2D 看板娘
Live2D demo
Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码
基于 API 加载模型,支持 定制 提示语
增加 参数设置 一键定制看板娘,易用性++
增加 看板娘样式设置,可直接设置宽高度等
支持多种一言接口,基于 JQuery UI 实现拖拽
目录结构
│ 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 // Flat UI 字体
flat-ui-icons-regular.svg // Flat UI 字体
flat-ui-icons-regular.ttf // Flat UI 字体
flat-ui-icons-regular.woff // Flat UI 字体
live2d.js // Live2D 核心
waifu-tips.js // Live2D 看板娘 扩展
waifu-tips.json // Live2D 看板娘 提示语
waifu.css // Live2D 看板娘 样式表
使用方法
解压live2d压缩包到网站根目录 根据自己需求引用demo1-3即可
设置参数
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’],看板娘大小,例如 ‘280×250’,’600×535’
live2d_settings[‘waifuTipsSize’],提示框大小,例如 ‘250×70’,’570×150’
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” 节日提示(日期段,支持多句随机)
live2d打包下载
链接:https://pan.baidu.com/s/1hMxOdcdIe-W-HcsGNTF7tg
提取码:ygvz
waifu-tips.js 的详细设置说明,和 waifu-tips.json 节点说明
原文链接:https://www.fghrsh.net/post/123.html
live2d内嵌html,博客(网页)添加 Live2D 看板娘相关推荐
- live2d内嵌html,为你的博客博客/网页添加Live2d二次元老婆的插件/手动方法
前言 好久没搞WP的教程了,想不想为你的博客加一个看板娘呢,反正我想2333,所以我便汇总了一下网上这些教程模型和机器人api. 插件版 Wordpress 1.Wikimoe大佬制作的插件(伊斯特瓦 ...
- 解决博客园添加hexo看板娘无法加载问题
关于添加看板娘 因为觉得作者设置的页面左下角的网易云音乐并不实用所以将其改成看板娘 但是由于太菜,不能很好的理解live2d的官方文档 数次度娘都是一些不能用的版本,不是配置少双引号,就是路径错误,看 ...
- 【分享】给自己的博客园添加一个板娘(可选)
全部样式分享 更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...
- 网页/博客Hexo添加live2d游戏角色看板娘,简易添加,碧蓝航线等live2d新型游戏角色模型(moc3)
目前博客上常见live2d看板娘很多都已经是比较老的了(旧版的是moc文件的)并且相应的插件不支持新版模型(moc3文件),如碧蓝航线的live2d模型.本篇介绍在网页里引入moc3文件的方法 示例网 ...
- 博客园添加live2D看板娘和樱花飘落背景
写在前面 本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落 博客园 文章目录 写在前面 本文使用 ...
- 博客园添加Live2d看板娘
最近给自己的博客添加了个动态的小萝莉,给大家分享一下,效果请见我的博客左下角: (当然你也可以在自己的html页面引入下面的js来添加小萝莉) 1.首先最重要的一点你要申请一个博客园账号. 2.其次申 ...
- live2d_二次元 | live2d为你的网站博客增加萌萌哒的看板娘
首先科普下什么是Live2D 来源百度百科:Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发.通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于 ...
- 用树莓派做服务器运行博客网页
文章目录 阅读本文你将了解的知识点: 树莓派做服务器运行Hexo博客网页 1.服务器框架 2.本地Hexo设置 2.1 安装GIT 2.2 安装NodeJs 2.3 安装Hexo 2.4 Hexo生成 ...
- 网页php自描述,一段代码让wordpress博客自动添加关键词(keywords)及网页描述(description)...
让wordpress博客自动添加关键词(keywords)及网页描述(description) 打开你的模板文件wp-content/themes/模板目录文件/header.php 在头部添加 // ...
- 基于Hexo+Gitee的个人静态博客网页搭建
基于Hexo+Gitee的个人静态博客网页搭建 前言 环境搭建:NodeJs+Git+Hexo (Win10+64位) NodeJs安装 Hexo安装 主题配置 Gitee仓库创建和部署 个性化配置 ...
最新文章
- SAP MIGO收货界面'批次'分类选项卡里不出现'分类'按钮之对策
- android listview 自动循环滚动条,ListView的自动循环滚动显示【原创】
- ​如何编写高质量的C#代码(一)
- 小程序自定义组件中observer函数的应用
- V210 系统时间设置
- docker使用centos镜像
- json解析对应的value为null_解决golang json解析出现值为空的问题
- eclipse报错:“start ruble bundle manager”解决方法
- Win10点击声音图标打不开音量调节的解决方法
- 我的Delphi开发经验谈(本人修改版) 收藏
- 多媒体计算机主机系统,多媒体计算机系统的组成
- Google退出中国,我同意了。
- CodeFroces GYM 2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest (ECPC 16) B.street(最短路)
- 如何做好性能压测(二)| 施压方式选择(rps or 并发)
- 用html数据库搭建信息管理系统,数据库的建立和系统模块功能的实现.doc
- 微信小程序 《数字华容道》
- NYOJ 题目239 月老的难题 (二分图最大匹配-匈牙利算法模板)
- 谷歌浏览器默认打开网页设置
- 高权重淘宝标题关键词优化原理解析
- 电气AutoCAD基础教学(三)——块的绘制
热门文章
- unity3d C#UnityEngine API 提示中文汉化
- 2017年美国大学生数学建模竞赛F题优秀论文解读
- Python初学16——程序设计方法学
- 数学分析 反函数存在性定理,连续性定理与求导定理
- 服务器系统win12可以安装CAD,技术员教你解决win10系统安装CAD2012的教程介绍
- swc反编译工具_JPEXS Free Flash Decompiler(Flash反编译工具)v11.3.0 中文免费版-ucbug软件站...
- VSD Viewer for Mac(Visio绘图文件阅读器)
- ajax保持会话,Ajax请求会话过期处理(JS)
- 如何解决Alreader不自动滚动
- Selenium IDE 下载及安装