WordPress博客添加看板娘

效果如下:

WordPress博客添加看板娘(送37套服饰)

1. 从我的github下载压缩包

该压缩包已经自带37套服饰、支持换装功能、支持经典动漫台词展示、未来还会支持钉宫日语50音发声喔~

2. 将下载的压缩包上传到网站的根目录,并解压

scp live2d_v1.0.zip [email protected]:/usr/local/nginx/html/vwhm_net_wwwroot/

3. 在header.php文件中添加以下代码

cd wp-content/themes/twentyseventeen/

<link rel="stylesheet" href="/live2d/css/live2d.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

4. 在footer.php文件中body结束标签之前,添加以下代码

<div id="landlord">
 <div class="message" style="opacity:0"></div>
 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
 <div class="hide-button">隐藏</div>
 <div class="switch-button">换装</div>
</div>

<script type="text/javascript">
 var message_Path = '/live2d/'
 var home_Path = 'http://vwhm.net' //此处修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
 var index = Math.ceil(Math.random()*37)
 console.log('未闻花名vwhm.net + ' + index)
 loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>

搞定~打完收工~

附录:

以下是普通demo.html页面中,集成看板娘的步骤:

live2d目录文件

live2d目录中已经有了所有的js.css.model等文件


正式开工

1. 在任意一个与live2d目录同级的html页面中的 head 标签内插入如下代码：
<link rel="stylesheet" href="/live2d/css/live2d.css"/>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>


2. 在 body 标签的最后面 插入 Live2D 看板娘的元素: 
<div id="landlord">
 <div class="message" style="opacity:0"></div>
 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
 <div class="hide-button">隐藏</div>
</div>

3. 在 body 标签结束前插入如下代码：
<script type="text/javascript">
 var message_Path = '/live2d/'
 var home_Path = 'https://vwhm.net/‘ //此处修改为你的域名，必须带斜杠
</script>

<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
 // 随机换衣服
 var index = Math.ceil(Math.random()*37)
 loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>

本文链接：https://blog.csdn.net/THMAIL/article/details/105932140

智能推荐

博客园——live2d看板娘如何设置

live2d看板娘如何设置可以去『我的博客园』查看看板娘（支持变装版）https://www.cnblogs.com/jingjingjingjingjingjingrj/ 首先，打开博客园，在『设置』中申请JS权限，不到一天就能申请下来。二、复制以下代码放入『博客侧边栏公告』或者『页脚html代码』，然后保存。...

Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

前言更多效果展示，请访问我的个人博客。效果图：教程：小白水平： hexo的官方是支持看板娘的，已经封装好了插件，但只是模型，不能说话、不能换装、功能较少。安装模块，如下：在站点配置文件或主题配置文件中新增如下内容：小白水平，效果如下：大神水平：大神作品，功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。下载张书樵大神的项目，解压到本地博客目录的 themes/...

使用Hexo的helper-live2d插件自定义博客看板娘

经常逛别人博客都会看到看板娘，但是那些看板娘我都不太喜欢。度娘搜了搜Hexo看板娘教程来来去去都是使用live2d-widget-models提供的那几个模型，昨天偶然在gitee上看到了少女前线的Live2D文件很喜欢！！！搜了一下好像没什么教程是自定义Live2d模型的，都是使用helper-live2d插件提供的模型。在gitee上看到的少女前线的Live2D模型文件除了预览图和贴图文件，...

vue中使用看板娘

vue使用看板娘，使用Live2D引入看板娘效果（请看左下角那个小妹妹~~~）示例环境：vue-cli4 首先需要下载看板娘的文件资源下载地址：链接：https://pan.baidu.com/s/121eOpQQK94Me-j4hQalwuA 提取码：6mv3 放置目录位置如下全局引入（public => index.html => script => src =&g...

python基础（《Python编程从入门到实践》笔记）K

python基础语法本笔记是对这本书的基础语法部分进行了学习：因为本身有其他语言的编程基础，所以笔记仅仅对我自不熟悉的部分进行了记录函数...