在Blogger博客上添加live2d

 

以前在WordPrees上面安装过Live2d，自从迁移到Blogger后也想在上面也实现同样的功能，不过大家都知道Blogger在自定义方面还是没有WordPrees自由度高，比如不能上传文件，不能使用php等，后来阅读了Live2d官方的文档后才找到了合适的方法，有兴趣的朋友可以自己去官方上面查看官方文档。

在Blogger上使用Live2D需要以下步骤：

1. 下载Live2D模型和相关资源，可以在官方网站或其他网站上下载。
2. 将下载的资源上传到Blogger博客的服务器或其他云存储服务上，例如Google Drive或OneDrive等。
3. 在Blogger博客的模板中添加Live2D的代码。可以将以下代码添加到模板的HTML代码中，或者将其添加到一个小部件中。

<div class="live2d">
  <canvas id="live2dcanvas"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/@live2d/cubism-sdk-web"></script>
  <script src="https://cdn.jsdelivr.net/npm/@live2d/cubism-framework-live2d-minimal"></script>
  <script src="https://your-server.com/live2d/model.js"></script>
  <script src="https://your-server.com/live2d/live2d.js"></script>
</div>

修改代码中的资源链接和文件名，以便它们指向正确的资源。

根据需要修改CSS样式来改变Live2D的外观和位置。可以在样式表中添加以下CSS代码：

.live2d {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 300px;
  z-index: 9999;
}

这将使Live2D在页面左下角固定，并设置它的大小为200像素宽，300像素高。

注意，Live2D需要在支持WebGL的浏览器中运行。在不支持WebGL的浏览器中，它将无法正常工作。如果您遇到任何问题，可以查看Live2D的官方文档或寻求技术支持。

👉  效果展示页面

如果你使用的是WordPress或其他自建网站可以使用这个方法：wordpress安装live2d方法

本文由Yuday分享 | 专注互联网科技分享 发布 ，如需转载请注明出处。
作者： yuday
原文链接：在Blogger博客上添加live2d