Z次元
文章 笔记 日志
专题
专栏分类 文章归档
友链
友情链接 朋友圈
交流
留言 关于我
头像
系列文章
-
-
-
-
网站添加能换装可互动的live 2d看板娘
系列文章
网站搭建
最后更新:2024/12/15|创建时间:2020/6/20

文章介绍了如何在Hexo博客中添加互动性的Live 2D看板娘,使用张书樵的项目,并将其集成到Butterfly主题中。步骤包括下载解压、修改文件路径和配置文件,调整看板娘大小、位置等。

官方live 2d 地址

我这里使用的是张书樵的项目,以hexo-theme-butterfly为例。

  1. 下载 张书樵live2d,解压到本地博客目录的 themes/butterfly/source 下,修改文件夹名为 live2d-widget,修改项目中的 autoload.js 文件:

将:

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为:

const live2d_path = "/live2d-widget/";
  1. 在主题配置文件中,引入js:
<script src="/live2d-widget/autoload.js"></script>
  1. 在主题配置文件中,新增如下内容:
live2d:
  enable: true

想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

预览效果:
图片

  1. 注意:此项目需要 jQuery 和 font-awesome支持。一般hexo主题都自带,所以无需引入,如果没有的话,可以在页面中引入:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

后记

网站添加Live2d的看板娘——伊斯特瓦尔(Histoire)

其它版本项目地址推荐:

保罗版:GitHub

版权声明
本文依据 CC-BY-NC-SA 4.0 许可协议授权,请您在转载时注明文章来源为 Z次元 ,若本文涉及转载第三方内容,请您一同注明。
更多专栏文章推荐
网站搭建
Hexo博客的搭建(从零开始)
2020/6/11
Z次元——开源博客项目
2025/3/16
Umami:部署自己的网站访问统计工具
2025/2/16
Astro——性能遥遥领先的新兴前端框架
2024/9/1
评论区
发表评论
回复
1

1

1232020年6月30日

这个做出来不能换装啊

回复
柒

2

柒. 博主 2020年7月1日

鼠标悬停在看板娘上,点击旁边工具菜单第三个,就可以换装了

回复
E

1

Ephraim2020年6月29日

大佬第二个加了之后报错了

回复
北

1

北方柿子2020年6月22日

tv_点赞大佬厉害

后记
目录
后记
十玖八柒
每天进步多一点
欢迎到访φ(゜▽゜*)♪
最新评论
个人占星:

想给自己的网站弄个统计功能,但不会弄,头疼

永恒末匕:

好哇塞,这个厉害

十玖八柒:

测试图片发送

Corwin: @十玖八柒

哎 主要是我的个人网站用的是静态的cos 实现评论框还是有点困难

我的
个人主页
站点地图
RSS订阅
导航
十年之约
虫洞穿梭
全站友链
虚位以待
©2020 - 2025 By 十玖八柒 版权所有
豫ICP备20021466号