如何把可爱的 Live2D 模型添加到自己的网站上~

如何把可爱的 Live2D 模型添加到自己的网站上~

{callout color="#ff94a9"}
欢迎来到深沐的博客站!在这里你可以用最低的成本下载到你所喜爱的动漫角色 Live2D 模型!那么在这里的模型我们要如何使用呢?就让我们一起走进这篇教程吧!
{/callout}

{dotted startColor="#10f92b" endColor="#ff9ecd"/}

把可爱的 Live2D 模型添加到自己的网站上是比较常用的方式,这样你的访客看到你的网站就可以同时看到你喜欢的看板娘啦!市面上的各种博客平台都已经有很多插件了。例如 Typecho 就已经有很多个版本了,它们的区别在于模型以及功能上的不同。可只有保罗制作的 Typecho 插件是支持直接在后台更换模型的呢!这对于 Typecho 的新手可谓是非常友好哈!对于正在使用其他博客平台的朋友们也不必担心,在这里我也会告诉你们如何修改他们的插件,让这些插件的模型变成自己的呢!

{dotted startColor="#31f247" endColor="#ff8fb0"/}

Typecho

下载保罗的看板娘插件,并上传到你的插件目录(一般为 usr/plugins)。进入你的网站后台,在顶部的“控制台”下找到“插件” -> Pio -> 启用。启用之后我们就可以开始设置啦!

引用模型

插件默认提供两种方式引用模型,一个是读取插件指定目录下的模型,还有一个是另外引用。对于新手,我们比较推荐放在插件目录的 model 文件夹下。只要你在本站下载模型,都已经为这个插件专门做过一定的优化处理啦。

显示不全?

待我们放好模型之后可能会发现,模型显示不太齐全。这是由于高宽度设置不正确导致的~ 由于插件默认的模型是 Pio,而其他模型的比例和它不同,所以我们就需要在插件目录下手动设置它的宽度和高度啦!这样我们的模型就能正常显示出来了!

遮住内容?

如果你用的主题默认在左侧有侧边栏,发现模型遮住了菜单,那么我们就可以在插件设置里面修改它的位置,这样就可以遮住你的内容啦!

更多介绍详见: 给你的博客增加动态看板娘

EmLog

{dotted startColor="#5bf231" endColor="#eb9494"/}

其他平台

其他平台可以通过修改插件或是修改模板的方式引用看板娘。这里的方法适用于 WordPress、EMLog、Z-Blog 甚至是静态网站。

{message type="success" content="保罗的 插件文档 里已经提供了完整的独立版使用教程,你可以在不使用插件的情况下正常食用看板娘。以下方法仅简单引用了看板娘,但并不包含交互功能。"/}

下载来自玩水大佬的封装
{cloud title="玩水大佬" type="github" url="https://github.com/journey-ad/live2d_src" password=""/}项目,我们会在 src/lib 目录下得到一个 live2d.min.js 。这个就是核心啦!

然后在你的网页上添加一个 canvas 画布,一般放在 footer.php 即页尾文件里面。一般写成这样:

<canvas id="paul" width="280" height="250"></canvas>

其中 id 部分负责让脚本获得画布的位置,width 和 height 分别是宽度和高度,在这里设置你的模型宽高。

然后我们就需要引用这个 JS 文件啦!方法也很简单,你把这个文件放在合适的位置,或是用 CDN 引用皆可。

<script src="live2d.min.js"></script>

{message type="success" content="注意:要确认画布放在 <script> 的前面!"/}

接着我们再通过一段简单的代码来开始引用我们的模型:

<script>loadlive2d('paul', '模型路径/model.json');</script>

这样我们的网站上,就显示出自己的看板娘啦!

细心的你肯定会发现,看板娘被放在了正常的位置显示了出来,而不是 “悬挂” 在页面的某个位置。我们通过添加一段简单的 CSS 就可以做到了!

#paul{
    left: 0;
    bottom: 0;
    z-index: 520; /* 如果模型被遮住可以把它改的更大 */
    position: fixed;
    pointer-events: none; /* 防止遮住鼠标点击页面其他内容 */
}

{message type="success" content="于是我们网站上就有了自己的看板娘啦!"/}

教程来源于 梦象