live2d PHP,GitHub - hiccphp/live2d-widget: 把萌萌哒的看板娘抱回家 | Live2D widget for web platform...
Live2D Widget
特性 Feature
在网页中添加Live2D看板娘。与PJAX兼容,支持无刷新加载。
Add Live2D widget to web page. Compatible with PJAX.
警告:不支持IE。
WARNING: DO NOT SUPPORT IE.
示例 Demo
在米米的博客的左下角可查看效果。需要使用支持WebGL的现代浏览器浏览。
这个仓库中也提供了两个Demo,即
依赖 Dependencies
本插件需要jQuery和font-awesome支持,请确保它们已在页面中加载,例如在
中加入:
jQuery and font-awesome is required for this plugin. You can add this to
:
否则无法正常显示。(如果你的网页已经加载了jQuery,就不要重复加载了)
使用 Usage
你可以直接这样使用:
将这一行代码加入
或,即可看到效果。如果你的网站启用了PJAX,由于看板娘不必每页刷新,因此需要注意将相关脚本放到PJAX刷新区域之外。
换句话说,如果你是小白,或者只需要最基础的功能,就只需要:
把这一行代码,连同前面的两行代码,一起放到html的
中即可;
如果页面是用各种模版引擎、php、asp生成的,也要自行修改,方法类似,只是可能略为麻烦。
但是!我们强烈推荐自己进行配置,否则很多功能是不完整的,并且可能产生问题!
如果你有兴趣自己折腾的话,请看下面的详细说明。
Using CDN
如果要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为
将username替换为你的GitHub用户名即可。
Self-host
你也可以直接把这些文件放到服务器上,而不是通过CDN加载。
如果你可以通过ssh访问你的主机,请把整个项目克隆到服务器上。执行:
cd /path/to/your/webroot
# Clone this repository
git clone https://github.com/stevenjoezhang/live2d-widget.git
如果你的主机无法用ssh连接(例如一般的虚拟主机),请选择Download ZIP,然后通过ftp上传到主机上,再解压到网站的目录下。
如果你是通过Hexo等工具部署的静态博客,请选择Download ZIP,然后解压到本地的博客目录下,例如source下与_posts同级的目录。重新部署博客时,相关文件就会自动上传到对应的目录。(还需要在Hexo主题相关的swig或ejs模版中正确配置路径,才可以加载)
这样,整个项目就可以通过你的服务器IP或者域名从公网访问了。你可以试试能否正常地通过浏览器打开autoload.js和live2d.min.js等文件。(最好还要确定一下这些文件的内容是正确的,有时由于字符集的问题,文件中可能出现乱码;此时需要重新下载)
如果没有问题,接下来需要修改一些配置。(需要通过服务器上的vim,emacs,cPanel文件管理器等工具修改;你也可以先在本地完成这一步骤,再上传到服务器上)
修改autoload.js中的参数live2d_path为live2d-widget这一文件夹在公网上的路径。比如说,如果你可以通过
https://www.example.com/path/to/live2d-widget/live2d.min.js
访问到live2d.min.js,那么就把live2d_path的值修改为
https://www.example.com/path/to/live2d-widget/
路径末尾的/一定要加上。具体可以参考autoload.js内的注释。
完成后,在你要添加看板娘的界面加入
就可以加载了。
目录结构 Files
waifu-tips.json中包含了触发条件(selector,选择器)和触发时显示的文字(text);
waifu.css是看板娘的样式表。
源文件是对Hexo的NexT主题有效的,为了适用于你自己的网页,可能需要自行修改,或增加新内容。
警告:作者不对包括但不限于waifu-tips.json和waifu-tips.js文件中的内容负责,请自行确保它们是合适的。
如果有任何疑问,欢迎提Issue。如果有任何修改建议,欢迎提PR。
鸣谢 Credits
代码自这篇博文魔改而来:
https://www.fghrsh.net/post/123.html
相比初始的版本,这个仓库增加了一些功能,并优化了提示展现机制。
另外,点击看板娘的纸飞机按钮,会出现一个彩蛋,这来自于WebsiteAsteroids。
更多 More
可以在官方网站下载、打包SDK,以获取更多的功能。具体操作是:
点击Cubism SDK for Web,下载相关文件;
解压并进入目录,执行npm install;
执行npm run build-sample。
许可证 License
Released under the GNU General Public License v3
http://www.gnu.org/licenses/gpl-3.0.html
更新 Update
2018年10月31日,由fghrsh提供的原API停用,请更新至新地址。参考文章:
https://www.fghrsh.net/post/170.html
live2d PHP,GitHub - hiccphp/live2d-widget: 把萌萌哒的看板娘抱回家 | Live2D widget for web platform...相关推荐
- live2d_二次元 | live2d为你的网站博客增加萌萌哒的看板娘
首先科普下什么是Live2D 来源百度百科:Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发.通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于 ...
- Hexo添加Live2D看板娘最新教程
目录 前言 介绍 Live2D 看板娘 添加Live2D看板娘 准备工作 安装依赖 下载model文件 添加live2d看板娘到hexo 查看效果 发布 结束语 参考 前言 上次我们搭建了hexo博客 ...
- Hexo 优化配置汇总【GitHub Actions 看板娘 数学公式 标签云 README 转义问题】
服务器 快到期了,这几天迁移到 GitHub 上,用免费的 GitHub Pages 重新部署下 杰森的博客 .以下样式及优化配置基于 Hexo,主题 Next 文章目录 GitHub Actions ...
- live2d 3行代码 为网站添加萌萌哒看板娘
3行代码 为网站添加萌萌哒看板娘 看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代 ...
- 博客园增加Live2D看板娘教程,超级简单,一看就懂
目录 一.前言 二.效果图 三.资源准备 1.相关的资源,可以点击下面的网盘链接直接下载 2.也可以通过下面的地址到Gitbuh中下载 四.实现教程 1.个人小站实现教程 2.博客园实现教程 一.前言 ...
- 如何把可爱的Live2d看板娘放到自己的网页上
发现好多的博客页面上有这样一个看板娘,非常的讨人喜欢,于是自己就尝试将其添加入网页. 效果图: 首先下载资源并解压:https://www.lanzous.com/i5xllwh 双击live2d.h ...
- live2d内嵌html,为你的博客博客/网页添加Live2d二次元老婆的插件/手动方法
前言 好久没搞WP的教程了,想不想为你的博客加一个看板娘呢,反正我想2333,所以我便汇总了一下网上这些教程模型和机器人api. 插件版 Wordpress 1.Wikimoe大佬制作的插件(伊斯特瓦 ...
- 快来给你的Hexo博客招募亿只live2d看板娘吧(๑•̀ㅂ•́)و✧
首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程 文章目录 前情提要 〇.懒人版 一.环境配置 二.插件安装 三.自建api 1 ...
- Hexo博客优化:在Next主题中设置进阶版Live2D看板娘————拒绝踩坑!!!!
最初级的用法 使用官方包安装,安装非常简单,但效果一般 hexo live-2d地址:https://github.com/xiazeyu/live2d-widget-models git命令行中输入 ...
最新文章
- 让AI精准识别盗版,脸书开源数据增强库:支持图文音视频,提供100多种增强方式...
- 创意赛第二季又来了,PaddleHub人脸关键点检测实现猫脸人嘴特效
- Ext JS高级程序设计
- 如何设计安全的用户登录功能
- python脚本怎么打印日志_python 接口测试1 --如何创建和打印日志文件
- bash: telnet: command not found...
- python代码编辑器、最好_这十大文本/代码编辑器最好用
- linux挂载与卸载图文解析
- 软考初级信息处理技术员(一)
- java 根据条码字体_barcode4j使用自定义字体生成条形码
- 使用Requests爬取网页图片并保存
- Imagenet与ILSVRC数据集介绍
- Mysql8.0下载(网盘云盘)
- UV材质图片合并后UV坐标的变换
- ubuntu命令行更新vscode
- LeetCode 每日一题 1833. 雪糕的最大数量
- 车牌号正则表达式-普通车和新能源车
- 中缀表达式转后缀表达式算法思想
- 计算机视觉-全景图像拼接
- 一文讲透图像分割经典网络:FCN、Unet、DeepLabV3+、Vnet、Unet++
热门文章
- 『教程』L0、L1与L2范数
- P2858 [USACO06FEB]Treats for the Cows G/S 题解
- 摆脱无聊的人生,学点扩展知识
- mmap 以及MMKV 学习 (一)
- 什么是驱动模块?什么是桩模块?
- Ubuntu20.10安装wine QQ后中文会变成方块
- [译]JS Tips:选择(picking)和反选(rejecting)对象的属性
- 35岁的程序员:第11章,故技重施
- 徐姗玩赚中国:第一站,南宁“第一拽姐”,31元一碗的老友粉
- java23设计模式---class10、享元模式(FlyWeight)