{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

详见广树的文章 - 博客通用版 Live2D 伊斯特瓦尔发布

{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="于是我们网站上就有了自己的看板娘啦！"/}

教程来源于梦象