不少人对这个 Live2D 看板娘感兴趣,很多博客都有看板娘,下面我们来给自己博客添加一个 Live2D 看板娘吧。兼容 PJAX
,完美适配 Sakura 主题,也可以用于其他主题但可能需要修改样式。
准备
需要 Font Awesome 4.7.0
支持,请确保相关样式表已在页面中加载(如果网页中已经加载了 Font Awesome ,就不要重复加载了,Sakura 主题已自带请跳过
),例如在 <head>
中加入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
项目
开工
默认版
- 下载项目代码,将
live2d_default
放到你的站点根目录,waifu-tips.json
中为触发内容可以修改,最后引用autoload.js
即可,一般放到footer.php
的</body>
标签之前:
<script src="/live2d_load/autoload.js"></script>
- 预览
少女前线版
- 下载项目代码,除了
live2d_default
将其他目录放到你的站点根目录,waifu-tips.json
中为触发内容可以修改 live2d/model_list.json
和live2d/model
为加载的模型列表,可以自己精简然后在你主题的
footer.php
文件</body>
标签之前引用即可
<script src="/live2d_girls/autoload.js"></script>
如果你要修改更多请查看下面引用的前两个项目的说明文档
预览
补充
autoload.js
中的 apiPath:
为 live2d API 接口,默认即可,如果你有其他的也可以修改
autoload.js
中的 cdnPath:
为对象存储路径,注意跨域的问题,不使用请注释掉
Json配置(SDK 2):http://live2d.pavostudio.com/doc/zh-cn/live2d/model-config/
Comments | 27 条评论
该评论为私密评论
该评论为私密评论
測試了,本地搭建也是沒有音樂播放上面的3個選項!
@KILLUA
我这边调整你的样式,发现按钮的位置不太对,你把小工具关掉,在调整调整CSS看看
好的,我試試本地..
该评论为私密评论
@KILLUA 原版是没问题的,可能CSS冲突了,或者你改过其他东西,你可以在原版主题看看有没有这个问题
@Kinoko 我就是根據你網站改的文字,居中,網站運行時間,聲音特效,logo文字特效.文字TTF.沒有私下改過其他..
看板件我就修改了那3個網站鏈接,插入頭部顯示..我的live2d沒有放在主題的文件夾裡面,我放在空間根目錄有影響嗎?
@KILLUA 这无所谓的,只要能有文件不404就成,你建个本地测试环境看看是不是这样吧
嗯,是比之前快点了,终于弄好了,太感谢你了
可以了,就是有点慢
@燚人 你把model目录和根目录的那个.json放到GitHub(文件不能大于50M)上,修改下autoload.js文件的CDN接口就快多了
能不能写一期如何自制看板娘的教程呀
@内河
https://github.com/fghrsh/live2d_api
下载整个项目,把你要的Live2D模型放到Model目录,修改model_list.json
内容,上传到自己的服务器,修改autoload.js中的live2d接口即可,细节看这个项目的说明@Kinoko 你好,这是什么问题
https://cdn.jsdelivr.net/gh/xxxx/live2d_api/get/?id=1-46 403
看板娘一直报403错误,是怎么回事
@燚人 放到本地有问题吗?GitHub没有PHP环境,需要你从本地处理请求然后获取Github上模版的静态文件
@Kinoko 那本地怎么处理请求?
@燚人 你把项目放到自己的服务器上就好了呀
我用了一下可以显示,但是不会显示左边的切换和隐藏按钮
@Hrlni-hrlni.cn CSS的问题把文件下载到本地自己改下
@Kinoko 我用QQ浏览器可以正常显示,但是谷歌就不行
@Hrlni-hrlni.cn 移动端还是PC端,原版主题我测试是没有任何问题的
@Kinoko 可以说下css在哪嘛,我用的默认api版
@Hrlni-hrlni.cn https://github.com/Fog-Forest/live2d/blob/master/live2d_load/waifu.css
那个.min是被我压缩过的CSS
这个项目为何如此之眼熟,哈哈哈