给你的博客加上个Live2D看板娘吧

Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`

给你的博客加上个Live2D看板娘吧

日期：2017-12-24 阿珏折腾代码浏览：10584次评论：43条

前段时间，在不少人博客看到这个 Live2D 看板娘，颇感兴趣！就查阅了点相关教程为自个博客也添加上了

前言

live2d

并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，

不能随意使用

。

本文章中所用模型解包自

药水制作师

手机游戏，版权归该官方所有。(没错，我也是来安利这款游戏的)

准备工作

俗话虽说：“授人以鱼不如授人以渔”，

但是由于这鱼比较难钓，我们还是乖乖搬个小板凳坐吃鱼群众吧！

以下代码是我

光明正大

从
后宫学长
那偷过来的鱼加以烹饪而成。

先到我的

Github

去下载我再次整理过后的live 2D的代码(

包含两人的动作和初始的三套贴图

)，毕竟还是煮熟的好吃点~

下载后解压代码到你的博客网站根目录去。（目录位置可以自定义）

然后把解压出来的文件夹改名为：live2d 。（叫啥无所谓，好看最重要）

(少女盲目分析中)

食用方法

然后就教大家怎么吃吧，呸，还真吃起来了

在你博客程序头部文件（header.php）引入界面样式，在 head 标签内插入如下代码：

<link rel="stylesheet" href="/live2d/css/live2d.css" />

在你博客程序页脚文件（footer.php）引入脚本，在 body 标签结束前插入如下代码：

<script type="text/javascript">

    var message_Path = '/live2d/'

    var home_Path = 'https://www.52ecy.cn/'

</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">

    loadlive2d("live2d", "/live2d/model/tia/model.json");

</script>

以上代码在使用绝对路径时要注意一个问题：

像我博客 www.52ecy.cn 和 52ecy.cn 都可以进行访问，但是如果在引用的时候使用了www，访问www.52ecy.cn的时候是没有问题，但在直接访问52ecy.cn的时候，会因为跨域问题(子域名不同也属于跨域)，导致json无法加载，然后你的看板娘就出不来了。

可以改为以下代码(人物的切换也只需改为相应的文件夹名字即可)

<script type="text/javascript">

    loadlive2d("live2d", "<?php echo 'http://'.$_SERVER['HTTP_HOST'].'/'; ?>live2d/model/Pio/model.json");

</script>

在合适的页面位置插入 Live2D 看板娘的元素，可以放在底部：

<div id="landlord">

    <div class="message" style="opacity:0"></div>

    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>

</div>

鼠标放在页面某个元素上时，需要 Live2D 看板娘提示的请修改 message.json 文件。

{

    "mouseover": [

        {

            "selector": ".container a[href^='http']",  //此处修改为你页面元素的标签名

            "text": ["要看看 {text} 么？"]  //此处修改为你需要提示的文字

        },

        {

            "selector": ".navto-search",

            "text": ["在找什么东西呢，需要帮忙吗？"]

        }

    ],

    "click": [  //此处是 Live2D 看板娘的触摸事件提示

        {

            "selector": "#landlord #live2d",

            "text": ["不要动手动脚的！快把手拿开~~", "真…真的是不知羞耻！", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]

        }

    ]

}

然后，刷新你的博客页面，看看效果吧！

注意路径别弄错了噢 ~

使用主题函数获取路径其实是很好的。

建议都使用绝对路径进行引用，而不是像列子中的相对路径

成品效果欣赏

Pio

Tia

喵的，万恶的水印你走开！

具体效果你可以调戏一下本博客左下角的Pio(没错，我觉得她更可爱)

结语

关于如何进行换装play 请参考原作者(

猫和向日葵

)的这篇文章《
给博客添加能动的看板娘(Live2D)-关于模型的二三事

》

请注意本文中出现的

“药水制作师”、“Potion Maker”字样及应用内包含的文本、模型、图片、动作数据等所有权均属于

“药水制作师”作者

Sinsiroad，仅供研究学习，不得用于商业用途

网友评论：

路人甲 7个月前 (2020-09-03)

真优秀

6666666 9个月前 (2020-07-24)

我想用站长现成的看板娘，可以打包分享吗[#得意]

锟斤拷锟斤拷. 1年前 (2020-01-23)

真实的回到分为负二负一

阿珏 1年前 (2020-01-24)

@锟斤拷锟斤拷.：对方不是很懂你的意思，于是送了你个帽子[#aru_136]

ICON 1年前 (2019-11-23)

第一个紫色图标里面一个v的是个啥软件哦[#aru_21]

阿珏 1年前 (2019-11-23)

@ICON：查看模型使用的是LIVE2D官方提供的Live2D Viewer

龗尧 2年前 (2019-04-18)

追问

留的ip地址、然后

看板娘显示不出来

这是为什么呢？

阿珏 2年前 (2019-04-19)

@龗尧：听不懂

龗尧 2年前 (2019-04-21)

@阿珏：啊... 您好这是我的博客：http://www.zhangyyao.com/

具体讲起来确实感觉很难表达

您可以点进去看一看

麻烦了（捂脸）

还有可以长期保持联系么？（我怕我问着问着就不回复我了）

阿珏 2年前 (2019-04-22)

@龗尧：很正常啊，不用看啊，想保持长期联系可以加群，群号自己找[#wb_doge]

龗尧 2年前 (2019-04-18)

"合适的页面位置插入live2D元素"底下这行代码是放到footer.php里面吗？

顺便求看板娘换装（星星眼恳切）

阿珏 2年前 (2019-04-19)

@龗尧：都行，换装你去我友链里FGHRSH博客里去找新版的

苏哲 2年前 (2019-02-15)

是不是跟知更鸟主题有冲突，加了之后网站文章的图片就不显示了

阿珏 2年前 (2019-02-16)

@苏哲：那可能就是有些地方有冲突了，具体哪里这就很难讲

QQ账号错误 2年前 (2019-01-06)

皮肤给一下呗

mynamezhf@gmail.com谢谢啦

wa 2年前 (2018-11-11)

大佬你好根据这个还有广树typecho插件和imjad.cn大佬的血小板

集成了一个https://github.com/samondlee/typecho_Live2dHistoire1/tree/master/Live2dHistoire

但是发现不能像你的一样截图、换装也不能像猫与向日葵大佬的血小板一样蹦蹦跳跳为啥呀呜呜呜

明明动画都加载了

阿珏 2年前 (2018-11-12)

@wa：不能蹦跶可能是动作文件有问题吧，截图换装不能那应该是js文件出问题了。具体的我也不是很清楚，用现成的多好啊。哈哈

失去才会珍惜 2年前 (2018-11-07)

这篇评论是私密评论##

阿珏 2年前 (2018-11-08)

@失去才会珍惜：去17素材网可以搜索到

Į 2年前 (2018-09-01)

能不能给普通的网页加上看板娘呢[#aru_1]

Į 2年前 (2018-09-01)

@Į：而且我这文字是出来了就是动画模型一直出不来

阿珏 2年前 (2018-09-01)

@Į：理论都是可以的，只要不冲突

晨熙 2年前 (2018-08-24)

表白墙可以放这个吗？？

阿珏 2年前 (2018-08-24)

@晨熙：理论都可以的

交际猫 2年前 (2018-07-20)

代码无法复制233 [#aru_113]

牧羊 2年前 (2018-07-14)

复制不了那些代码，还有想要贵站的换装，谢谢了

易小独 2年前 (2018-07-09)

为了那到那些框框代码我把开发者弄出来结果电脑死了半小时[#aru_15]

阿珏 2年前 (2018-07-09)

@易小独：真是灰常抱歉了，你可以来找我给你的

牧羊 2年前 (2018-07-14)

@阿珏：我要

刘德华 2年前 (2018-07-19)

@易小独：chrome里禁用断点就好啦~[#(哈哈)]

阿珏 2年前 (2018-07-19)

@刘德华：别说出来，嘘~

杨小杰博客 2年前 (2018-05-10)

这姑娘6

阿珏 2年前 (2018-05-11)

@杨小杰博客：你喜欢就好

henry 2年前 (2018-05-10)

这篇评论是私密评论##

henry 2年前 (2018-05-10)

[#aru_42]其他网站程序可以添加嘛。例如我这个。

阿珏 2年前 (2018-05-11)

@henry：理论上都可以的

冷梦丶 2年前 (2018-04-08)

[#aru_18]你这个板娘的分不分享呀~[#aru_91]

星星 2年前 (2018-03-30)

求皮肤谢谢[#aru_1]

星星 3年前 (2018-03-30)

求皮肤谢谢[#aru_1]

inpm 3年前 (2018-03-13)

+1求皮肤

inpm.cy@gmail.com

pony 4年前 (2018-01-28)

= =，想要贵站的刷新换衣服的方法。

阿珏 4年前 (2018-01-31)

@pony：网址或qq都不愿意留下，你想我怎么给你？

′千玄 4年前 (2018-02-22)

@阿珏：换衣服这个细节还没注意，厉害了~